SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need some help with simple image scrolling marquee. Only works after mouseover...

    Hi guys,

    I am pretty new to Javascript. I pulled some code of a tutorial website to make a scrolling marquee, then adjusted it to the size of my images. It seems to work OK.

    The only problem is, it only starts working when you put your mouse over it. I need to start scrolling automatically when the page is loaded.

    Does anyone know how I need to alter the script to make this happen?

    I put up the site on:

    djpsyguy.com/marqueetest
    djpsyguy.com/marqueetest - that's the javascipt.
    djpsyguy.com/marqueetest/test.zip - the test site complete with images, if you feel like messing around...


    Any help would be much appreciated.

    Thanks!!
    G

  2. #2
    SitePoint Enthusiast ZefQ's Avatar
    Join Date
    Nov 2008
    Location
    Sweden
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    put this on the top of function start

    setTimeout('mqRotate(mqr)',10);

    and remove the line

    mqRotate(mqr); // must come last

    it should look like this

    Code JavaScript:
    function start() {
         setTimeout('mqRotate(mqr)',10);
         new mq('m1',mqAry1,160);
         new mq('m2',mqAry2,160);// repeat for as many fuields as required
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked it worked it worked!!

    Thanks ZefQ!

  4. #4
    SitePoint Enthusiast ZefQ's Avatar
    Join Date
    Nov 2008
    Location
    Sweden
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah but it is not the optimal solution cuz it causes an error

  5. #5
    SitePoint Enthusiast ZefQ's Avatar
    Join Date
    Nov 2008
    Location
    Sweden
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the script was to compact so i codent think

    here is what the function start should look like

    Code JavaScript:
    function start() {
       new mq('m1',mqAry1,160);
       mqRotate(mqr);
    }

    you dont have a secound element so this
    new mq('m2',mqAry2,160);// repeat for as many fuields as required

    has should not be there

    this dosent causes any errors

  6. #6
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it!

    Thanks....

  7. #7
    SitePoint Enthusiast ZefQ's Avatar
    Join Date
    Nov 2008
    Location
    Sweden
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    infact there are more errors the img height dosent work for firefox
    here is the full script as it shold look like.

    Code JavaScript:
    window.onload = start;
    var mqr = []; 
     
    var mqAry1=['scrolling/img0.jpg','scrolling/img1.jpg','scrolling/img2.jpg','scrolling/img3.jpg','scrolling/img4.jpg','scrolling/img5.jpg','scrolling/img6.jpg','scrolling/img7.jpg','scrolling/img8.jpg','scrolling/img9.jpg','scrolling/img10.jpg','scrolling/img11.jpg','scrolling/img12.jpg','scrolling/img13.jpg','scrolling/img14.jpg'];
     
     
    function start() {
       new mq('m1',mqAry1,160);
       mqRotate(mqr);
    }
    function mq(id,ary,wid){
    	this.mqo=document.getElementById(id); 
    	var heit = this.mqo.offsetHeight; 
    	this.mqo.onmouseout=function() {mqRotate(mqr);}; 
    	this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; 
    	this.mqo.ary=[]; 
    	var maxw = ary.length; 
    	for (var i=0;i<maxw;i++){
    		this.mqo.ary[i]=document.createElement('img'); 
    		this.mqo.ary[i].src=ary[i]; 
    		this.mqo.ary[i].style.position = 'absolute'; 
    		this.mqo.ary[i].style.left = (wid*i)+'px'; 
    		this.mqo.ary[i].style.width = wid+'px'; 
    		this.mqo.ary[i].style.height = heit+'px'; 
    		this.mqo.appendChild(this.mqo.ary[i]);
    	} 
    	mqr.push(this.mqo);
    } 
    function mqRotate(mqr){
    	if (!mqr) 
    		return; 
     
    	for (var j=mqr.length - 1; j > -1; j--) {
    		maxa = mqr[j].ary.length; 
    		for (var i=0;i<maxa;i++){
    			var x = mqr[j].ary[i].style;  
    			x.left=(parseInt(x.left,10)-1)+'px';
    		} 
    	var y = mqr[j].ary[0].style; 
    	if (parseInt(y.left,10)+parseInt(y.width,10)<0) {
    		var z = mqr[j].ary.shift(); 
    		z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; 
    		mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);
    }

  8. #8
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uploading the correct version for anyone wanting to use this in the future...

    djpsyguy.com/marqueetest_fixed

    Any idea how to slow it down and speed it up? Just out of interest...

  9. #9
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by ZefQ View Post
    infact there are more errors the img height dosent work for firefox
    here is the full script as it shold look like, still one image that dosent have the right height but im out of time good luck

    Code JavaScript:
    window.onload = start;
    var mqr = []; 
     
    var mqAry1=['scrolling/img0.jpg','scrolling/img1.jpg','scrolling/img2.jpg','scrolling/img3.jpg','scrolling/img4.jpg','scrolling/img5.jpg','scrolling/img6.jpg','scrolling/img7.jpg','scrolling/img8.jpg','scrolling/img9.jpg','scrolling/img10.jpg','scrolling/img11.jpg','scrolling/img12.jpg','scrolling/img13.jpg','scrolling/img14.jpg'];
     
     
    function start() {
       new mq('m1',mqAry1,160);
       mqRotate(mqr);
    }
    function mq(id,ary,wid){
    	this.mqo=document.getElementById(id); 
    	var heit = this.mqo.offsetHeight; 
    	this.mqo.onmouseout=function() {mqRotate(mqr);}; 
    	this.mqo.onmouseover=function() {clearTimeout(mqr[0].TO);}; 
    	this.mqo.ary=[]; 
    	var maxw = ary.length; 
    	for (var i=0;i<maxw;i++){
    		this.mqo.ary[i]=document.createElement('img'); 
    		this.mqo.ary[i].src=ary[i]; 
    		this.mqo.ary[i].style.position = 'absolute'; 
    		this.mqo.ary[i].style.left = (wid*i)+'px'; 
    		this.mqo.ary[i].style.width = wid+'px'; 
    		this.mqo.ary[i].style.height = heit+'px'; 
    		this.mqo.appendChild(this.mqo.ary[i]);
    	} 
    	mqr.push(this.mqo);
    } 
    function mqRotate(mqr){
    	if (!mqr) 
    		return; 
     
    	for (var j=mqr.length - 1; j > -1; j--) {
    		maxa = mqr[j].ary.length; 
    		for (var i=0;i<maxa;i++){
    			var x = mqr[j].ary[i].style;  
    			x.left=(parseInt(x.left,10)-1)+'px';
    		} 
    	var y = mqr[j].ary[0].style; 
    	if (parseInt(y.left,10)+parseInt(y.width,10)<0) {
    		var z = mqr[j].ary.shift(); 
    		z.style.left = (parseInt(z.style.left) + parseInt(z.style.width)*maxa) + 'px'; 
    		mqr[j].ary.push(z);}} mqr[0].TO=setTimeout('mqRotate(mqr)',10);
    }
    Yeh, those images are not properly sized. I just threw some in there... Will resize them properly later. Thanks for tidying up the code for me!

  10. #10
    SitePoint Member
    Join Date
    Nov 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One more time:

    With image size fix by ZefQ and cleaner code...

    djpsyguy.com/marqueetest_image_size_fixed

    Thanks again!

  11. #11
    SitePoint Enthusiast ZefQ's Avatar
    Join Date
    Nov 2008
    Location
    Sweden
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    to slowdown or speed up, at the last line of code

    mqr[0].TO=setTimeout('mqRotate(mqr)',10);

    the 10 is the speed in millesecounds <10 faster >10 slower
    but i dont know if it goes faster den 10millesec

    this line
    x.left=(parseInt(x.left,10)-1)+'px';

    -1 there is how many px it should move if you change that to -5 it will go mutch faster change it to +1 and it will go slide the other way but then you have to change other things to


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
  •