SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    rollover combined with scroller

    Hi,

    I have used to different javascripts on a div, with the first one, when the user rolls the mouse over some text, the image changes, it also positions text relating to that image into a div that scrolls, so one javascript for the rollover and one for the scroller. It works fine, except that when the user moves from one text link to the next, the scroller does not start each time at the top, but rather at the same point the previous one was, so if the previous scroller was almost at the bottom, moving the mouse at the other link, the text that shows up is already positioned at the bottom as well, the user does not see the first part. Is there a way to ensure that with each rollover, the scrolling text starts at the top?

    Some extracts of the code is here.

    rollover javascript.
    Code:
    var packages = [
            {	desc: '<p>Run mouse over links for more information.</p>',
    			image:'images/bg.gif',
    			img:''
    		},
    	{	desc: '<h4 class="slideGreen">Wedding & Honeymoon</h4>.....',
    			image:'images/wedding2.jpg',
    			img:''
    		}
    ];
    
    
    
    //preload images
    function loadimages() {
    	for(var y = 0; y < packages.length; y++) {
    		packages[y].img = new Image();
    		packages[y].img.src = packages[y].image;
    	}
    };
    
    function changeImage(obj) {
    	document.getElementById("vmarquee").innerHTML = obj.desc;
    	document.getElementById("packpic").src = obj.img.src;
    }
    html code is here
    Code:
    <li><a onmouseout="changeImage(packages[0])" onmouseover="changeImage(packages[1])">Wedding <br />
                    & Honeymoon</a></li>
                  <li><a onmouseout="changeImage(packages[0])" onmouseover="changeImage(packages[2])">Romantic<br />
                    Gateaway</a></li>
                  <li><a onmouseout="changeImage(packages[0])" onmouseover="changeImage(packages[3])">Explorer</a></li>
                  <li><a onmouseout="changeImage(packages[0])" onmouseover="changeImage(packages[4])">Plantation<br />
                    Life</a></li>
                  <li><a onmouseout="changeImage(packages[0])" onmouseover="changeImage(packages[5])">Rejuvenation</a></li>
    <img id="packpic" alt="" height="160" width="145" src="images/bg.gif" style="float: left;" /> 
              
        <div id="descrip" class="height1"> 
                <div id="vmarquee" style="position: absolute; width: 98%;"> 
    </div></div>
    and scrolling marquee code
    Code:
    var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
    var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=marqueespeed
    var pausespeed=(pauseit==0)? copyspeed: 0
    var actualheight=''
    
    function scrollmarquee(){
    if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    else
    cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    }
    
    function initializemarquee(){
    cross_marquee=document.getElementById("vmarquee")
    cross_marquee.style.top=0
    marqueeheight=document.getElementById("descrip").offsetHeight
    actualheight=cross_marquee.offsetHeight
    if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    cross_marquee.style.height=marqueeheight+"px"
    cross_marquee.style.overflow="scroll"
    return
    }
    setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initializemarquee, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initializemarquee)
    else if (document.getElementById)
    window.onload=initializemarquee
    Any help appreciated

    CathyM

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't really look into the code, but did you try to set the scrollable elements scrollTop value to 0?

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The scroll.top value in the function initializemarquee is set to zero, I tried making some adjustments to the the scrollmarquee function, but most either lead to the scroller not working, or doing weird things.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:
    Code:
    function changeImage(obj) {
      cross_marquee.style.top = '0';
      document.getElementById("vmarquee").innerHTML = obj.desc;
      document.getElementById("packpic").src = obj.img.src;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2006
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Worked like a charm.

    thx!!

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •