having a div which scrolls with 2 images

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mikek12004
    New Member
    • Sep 2008
    • 200
    #1

    having a div which scrolls with 2 images

    I want in all my scrolling divs to remove the scroll bar-quite easy through css, so now how to scroll the contents? After some searching I have found the following code which works perfectly

    Code:
     

<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 

<script type="text/javascript"> 
<!-- 
defaultStep=1  
step=defaultStep  

function scrollDivDown(id){ 
clearTimeout(timerDown)  
document.getElementById(id).scrollTop+=step  
timerDown=setTimeout("scrollDivDown('"+id+"')",10) 

}  

function scrollDivUp(id){ 
clearTimeout(timerUp) 
document.getElementById(id).scrollTop-=step  
timerUp=setTimeout("scrollDivUp('"+id+"')",10) 
}  

timerDown=""  
timerUp=""  

function stopMe(){ 
clearTimeout(timerDown)  
clearTimeout(timerUp) 
} 

document.onmousemove=function(){stopMe()}  

 
// --> 
</script>   
</HEAD> 
<BODY> 
<P></P> 

<div id="div1" style="width:200px; height:300px; overflow:hidden">  
<b>LAYER CONTENTS</b>  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>End  
</div>  
<P></P> 

<a href="#null" onMouseDown="scrollDivDown('div1')" onMouseUp="stopMe()">ScrollDown</a>   
<a href="#null" onMouseDown="scrollDivUp('div1')"  onmouseup="stopMe()">Scroll Up</a>  
<img src="images/arrowdown.gif" onMouseDown="scrollDivDown('div1')" onMouseUp="stopMe()"/>
<img src="images/arrowup.gif" onMouseDown="scrollDivUp('div1')" onMouseUp="stopMe()"/>
</BODY> 
</HTML>
    However in this example the user must keep pressing the links/images to navigate, I want to do this by simply hovering the mouse above them (I tried simply changing the events but the it worked spartialy-when I place the mouse above the down link it goes down only once and not continiously )
    any help? (Also note that I want to keep the structure of fuctions with arguments since in the same page I will have multiple divs)
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Use onmouseover instead of onmousedown.

        Comment

        • mikek12004
          New Member
          • Sep 2008
          • 200
          #3
          I tried but still the same. What I want is when I get my mouse over the arrows to continiously scroll with mouseover it does only once and the n I have to mouse the pointer out of the image and then again in just to move a step. I found this code with 2 links Up and down with the mousedown and mouseup events which worked fine I raplaced the links with images but I cannot seem to get this work

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              The line
              Code:
              document.onmousemove=function(){stopMe()}
              is clearing the timeouts. Remove that line.

                Comment

                • mikek12004
                  New Member
                  • Sep 2008
                  • 200
                  #5
                  Pretty good! I replaced the events commented the line you told me and it works fine, I will place at the end of hte post, the entire code for others with the same problem. One other think I was wondering in this example is it possible for the mousewheel to be used to scroll the div?
                  Code:
                   

<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 

<script type="text/javascript"> 
<!-- 
defaultStep=1  
step=defaultStep  

function scrollDivDown(id){ 
clearTimeout(timerDown)  
document.getElementById(id).scrollTop+=step  
timerDown=setTimeout("scrollDivDown('"+id+"')",10) 

}  

function scrollDivUp(id){ 
clearTimeout(timerUp) 
document.getElementById(id).scrollTop-=step  
timerUp=setTimeout("scrollDivUp('"+id+"')",10) 
}  

timerDown=""  
timerUp=""  

function stopMe(){ 
clearTimeout(timerDown)  
clearTimeout(timerUp) 
} 

//for onclick events
//document.onmousemove=function(){stopMe()}  

 
// --> 
</script>   
</HEAD> 
<BODY> 
<P></P> 

<div id="div1" style="width:300px; height:300px; overflow:hidden">  
<b>LAYER CONTENTS</b>  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
<P>Some Text<P>SOME TEXT<P>Some Text<P>End  
</div>  
<img src="images/arrowdown.gif" onmouseover="scrollDivDown('div1')" onMouseOut="stopMe()"/>
<img src="images/arrowup.gif" onmouseover="scrollDivUp('div1')" onMouseOut="stopMe()"/>

<div style="font-size:12px; margin-top:5px; width:300px; padding-left:2px">
<img  style="padding-left:5px; padding-right:5px" src="http://image.allmusic.com/00/acg/pic100/drz000/z085/z08555fem4l.jpg" alt="JoAnn Falletta" width="50" height="100" align="left" class="alignleft"/>With thdgdfgdfgfdge opening of the 2008-09 Concert Season, conductor JoAnn Falletta is celebrating her 10th anniversary as music director of the Buffalo Philharmonic, an orchestra frequently shortlisted as one the best in the United States and which continues to thrive even as subscriptions are down elsewhere. Falletta's is a name also familiar from recordings; in just short of two decades she has managed to make more than 50 of them for labels such as Naxos, Koch, Delos, Albany, and others.
<p>
</p>
</div>

</BODY> 
</HTML>

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Support for mouse wheel scroll control is not very strong or consistent. You could have a play with this though to get you started.

                        Comment

                        • mikek12004
                          New Member
                          • Sep 2008
                          • 200
                          #7
                          Thanks for your post, I did have a look (not that I made much) more luck I had with the moo tools I found from that page they do have a custom event for mousewheel but it doesn't work for multiple divs on the same page...If someone has already made the wheel work, I would like to hear his opinion

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              I think you can use it with multiple divs on the same page if you have a look here.

                                Comment

                                Previous template Next
                                Working...