herghost Posted December 19, 2007 Share Posted December 19, 2007 Hi All, I have a button on a page and I would like to move down around 30 pixels if the mouse is hovered on it, then to remain still the second time? Is this possible? If so how would I go about it? I know very little java but understand the principles. This is the code I have for the button at the moment <p><input type="button" name="B1" value="Click To Be Taken To The Random Proxy! >>" onclick="randomlink()"></p> </form> which is just a simple random link generator Thanks Quote Link to comment Share on other sites More sharing options...
markjoe Posted December 20, 2007 Share Posted December 20, 2007 I'm no expert, but here's my guess: document.formname.B1.offsetTop=(document.formname.B1.offsetTop+30); Something like that should work to move the button, but it may differ slightly for different browsers. To make it only happen once you could set a hidden input value. if(document.formname.inputname.value!='1'){ document.formname.B1.offsetTop=(document.formname.B1.offsetTop+30); document.formname.inputname.value='1'; } That would require this in the HTML of the page within the named form: <input type='hidden' name='inputname' value=''> Side note: I would like to stress that Java and javascript are completly different things. I imaginge that you didn't mean Java in the middle of your post. I just feel the need to point that out sometimes. Quote Link to comment Share on other sites More sharing options...
herghost Posted December 20, 2007 Author Share Posted December 20, 2007 Thanks for your reply MarkJoe, How would I implement this on a HTML page? All I have managed so far is to make the button disappear ! Quote Link to comment Share on other sites More sharing options...
markjoe Posted December 20, 2007 Share Posted December 20, 2007 As it turns out (had to check the book), offsetTop and offsetLeft are read-only properties. You will need to use styles. Here's what I worked out: <script type='text/javascript'> //set the global variable to track if button has been clicked var buttonClicked=false; function clickButton(){ if(buttonClicked==false){ //set the top attribute of the elements style property to its offset + 30 pixels document.form1.button1.style.top=(document.form1.button1.offsetTop+30)+'px'; //set global variable, so function will not moved button again buttonClicked=true; } } </script> <body> <form name='form1'> <input type='button' name='button1' value='button' style='position:absolute;' onclick='clickButton();'> </form> </body> It now occurs to me that offsetTop is relative to the parent element (like a table cell), so it may be better off to set the top position in the style tag. you can use document.form1.button1.style.top to get the value instead of document.form1.button1.offsetTop. But style.top will return with the "px" atached so you would need to remove that before doing any math. Quote Link to comment Share on other sites More sharing options...
markjoe Posted December 20, 2007 Share Posted December 20, 2007 Here is another version that should play better in a real page. It gets the offsetTop for the element and all parent elements, ending up with the total offsetTop value of the element relative to the page. <script type='text/javascript'> var buttonClicked=false; function clickButton(){ if(buttonClicked==false){ document.form1.button1.style.top=(getOffsetTop(document.form1.button1)+30)+'px'; buttonClicked=true; } } function getOffsetTop(theElement){ theOffset=0; while(theElement!=null){theOffset+=theElement.offsetTop;theElement=theElement.offsetParent} return theOffset; } </script> <body> <form name='form1'> <input type='button' name='button1' value='button' style='position:absolute;top:0px;' onclick='clickButton();'> </form> </body> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.