Posted by: murali3 Mar 26 2012, 07:16 AM
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
Attached image(s)
Posted by: Christian J Mar 26 2012, 10:21 AM
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.
Posted by: Christian J Mar 26 2012, 01:29 PM
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.
http://www.w3.org/TR/css3-positioning/#abs-non-replaced-height
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';
}