The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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
 
Reply to this topicStart new topic
Replies
Christian J
post Mar 26 2012, 10:21 AM
Post #2


.
********

Group: WDG Moderators
Posts: 5,997
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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 28th August 2014 - 04:04 AM