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, 01:29 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,658 Joined: 10-August 06 Member No.: 7 |
You can also set the style directly in the JS functions:
CODE function scrollup(objId) { document.getElementById(objId).style.position='absolute'; document.getElementById(objId).style.top='0'; } function scrolldown(objId) { document.getElementById(objId).style.position='absolute'; document.getElementById(objId).style.bottom='0'; } ...but after clicking both arrows, scrollDiv would have both a "top" and "bottom" property. This causes unexpected results: * If scrollDiv's "height" is specified, it seems the "top" property always wins over "bottom", regardless of order. * If scrollDiv's "height" is not specified, it's stretched all the way from the viewport's top to bottom. As usual I don't understand the spec, maybe this part is relevant: If none of the three [‘top’, ‘height’, and ‘bottom’] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values. If one of ‘margin-top’ or ‘margin-bottom’ is ‘auto’, solve the equation for that value. If the values are over-constrained, ignore the value for ‘bottom’ and solve for that value. One workaround might be to remove the unused JS style property, but (AFAIK) that's not possible once a property has been defined. Instead one might set the unwanted property's value to "auto": CODE function scrollup(objId) { document.getElementById(objId).style.position='absolute'; document.getElementById(objId).style.top='0'; document.getElementById(objId).style.bottom='auto'; } function scrolldown(objId) { document.getElementById(objId).style.position='absolute'; document.getElementById(objId).style.top='auto'; document.getElementById(objId).style.bottom='0'; } |
Lo-Fi Version | Time is now: 26th April 2024 - 02:21 PM |