The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Move the text UP/DOWN on clicking on arrow image?
murali3
post 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)
Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2012, 10:21 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Mar 26 2012, 01:29 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
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.
http://www.w3.org/TR/css3-positioning/#abs...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';
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:32 AM