Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Move the text UP/DOWN on clicking on arrow image?

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

Again there is not "btm" CSS property.

If you want move scrollDiv to the top or bottom, you can change its className:

CODE

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';
}