Move the text UP/DOWN on clicking on arrow image? |
Move the text UP/DOWN on clicking on arrow image? |
murali3 |
Mar 26 2012, 07:16 AM
Post
#1
|
Group: Members Posts: 1 Joined: 26-March 12 Member No.: 16,787 |
Hi,
I am working on moving the text UP/DOWN on cliking on arrow image placed on right handside. CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Scroll</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .top{ position: absolute; top:0; right:0; background-image: url('uparrow.png'); background-size: 16px 16px; width: 16px; height: 16px; } .btm{ position: absolute; display:block; background-image: url('downarrow.png'); background-size: 16px 16px; width: 16px; height: 16px; bottom: 0; right: 0; } </style> <script type="text/javascript"> function scrollup(objId){ alert("Scroll UP"); console.log(objId); var a = document.getElementById(objId).style.top; console.log(a); } function scrolldown(objId){ alert("Scroll DOWN"); var b= document.getElementById(objId).style.btm; console.log(objId); console.log(b); } </script> </head> <body> <div id="scrollDiv" style="btm:0px"> This is what i like to say. </div> <div class="top" onclick="scrollup('scrollDiv')"></div> <div class="btm" onclick="scrolldown('scrollDiv')"></div> </body> </html> Oncliking on images nothing happens.. Can somebody help me in this... Your help highly appreciated..... Regards, Murali This post has been edited by murali3: Mar 26 2012, 07:20 AM Attached image(s) |
Christian J |
Mar 26 2012, 10:21 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
CODE var a = document.getElementById(objId).style.top; The above just creates a variable with scrollDiv's current top value (if it has previously been set with JS, which is not the case). CODE var b= document.getElementById(objId).style.btm; The above is incorrect, there is not "btm" CSS property. CODE <div id="scrollDiv" style="btm:0px"> Again there is not "btm" CSS property. If you want move scrollDiv to the top or bottom, you can change its className: CODE <script type="text/javascript"> function scrollup(objId) { document.getElementById(objId).className='up'; } function scrolldown(objId) { document.getElementById(objId).className='down'; } </script> and then style each class in the CSS: CODE .up { position: absolute; top: 0; } .down { position: absolute; bottom: 0; } I also suggest changing the cursor style of the arrows. |
Lo-Fi Version | Time is now: 26th April 2024 - 03:53 AM |