SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Need help to move a button location on a JS created Marquee

    If you look at this page: http://easydigging.com/Garden_Tool/home1.html
    You will see an image Marquee that scrolls automatically, pauses on mouseover, and has Begin/Stop buttons to allow those using phones to control the Marquee.

    We need to move the Begin/Stop button from above the Marquee to below the Marquee. That's where I need your help.

    I really don't know JS, but I am great at cutting and pasting if you tell me what old lines to replace with what new lines

    I left the JS file in the Head of the page so you can see it easily. I will paste it in below also. Thanks!

    <script type="text/javascript">
    var mqAry1=['../images-new/wheel-hoe-icon.jpg','../images-new/seeder-icon.jpg','../images-new/broadforks-icon.jpg','../images-new/grub-hoe-icon.jpg','../images-new/grape-hoe-icon.jpg','../images-new/garden-hoes-icon.jpg','../images-new/hand-hoes-icon.jpg','../images-new/catalog-icon.jpg'];

    function start()
    { new mq('m1',mqAry1,300);
    mqRotate(mqr); // must come last
    }

    window.onload = start;

    // Continuous Image Marquee with stop/start button
    // copyright 24th July 2008, 20th March 2010 by Stephen Chapman
    // http://javascript.about.com
    // permission to use this Javascript on your web page is granted
    // provided that all of the code below in this script (including these
    // comments) is used without any alteration

    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);
    }

    function startstopchange(m,txt)
    {for (var j=m.length - 1; j > -1; j--) document.getElementById('ss'+m[j].id).value = txt;
    }
    function startstop(m,n) {
    var ss = document.createElement('form');
    var sd = document.createElement('div');
    ss.appendChild(sd);
    var sb = document.createElement('input');
    sb.type='button';
    sd.appendChild(sb);
    sb.id = 'ss'+n.id;sb.value = 'Stop Scrolling';
    sb.onclick = function()
    {if (this.value == 'Stop Scrolling')
    {clearTimeout(m[0].TO); startstopchange(m,'Begin Scrolling');
    }
    else {mqRotate(m); startstopchange(m,'Stop Scrolling');
    }
    };
    n.parentNode.insertBefore(ss,n);
    }

    var mqr = [];
    function mq(id,ary,wid)
    {this.mqo=document.getElementById(id);
    var heit = this.mqo.style.height;
    this.mqo.onmouseout=function()
    {mqRotate(mqr);startstopchange(mqr,'Stop Scrolling');
    };
    this.mqo.onmouseover=function()
    {clearTimeout(mqr[0].TO);startstopchange(mqr,'Begin Scrolling');
    };
    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;
    this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
    startstop(mqr,this.mqo);
    }
    </script>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var mqAry1=['http://easydigging.com/Garden_Tool/../images-new/wheel-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/seeder-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/broadforks-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grub-hoe-icon.jpg','../images-new/grape-hoe-icon.jpg','../images-new/garden-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/hand-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/catalog-icon.jpg'];
    
    function start()
      { new mq('m1',mqAry1,300,305); // additional parameter for the top position of the button
        mqRotate(mqr); // must come last
       }
    
    window.onload = start;
    
    // Continuous Image Marquee with stop/start button
    // copyright 24th July 2008, 20th March 2010 by Stephen Chapman
    // http://javascript.about.com
    // permission to use this Javascript on your web page is granted
    // provided that all of the code below in this script (including these
    // comments) is used without any alteration
    
    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);
    }
    
    function startstopchange(m,txt)
    {for (var j=m.length - 1; j > -1; j--) document.getElementById('ss'+m[j].id).value = txt;
    }
    
    function startstop(m,n,h) {
     var ss = document.createElement('form');
     var sd = document.createElement('div');
     ss.appendChild(sd);
     var sb = document.createElement('input');
     sb.type='button';
     sb.id = 'ss'+n.id;sb.value = 'Stop Scrolling';
     n.parentNode.appendChild(sb);
     sb.style.position='relative';
     sb.style.top=h+'px';
     sb.onclick = function(){
      if (this.value == 'Stop Scrolling'){
       clearTimeout(m[0].TO);
       startstopchange(m,'Begin Scrolling');
      }
      else {
       mqRotate(m); startstopchange(m,'Stop Scrolling');
      }
     };
     n.parentNode.insertBefore(ss,n);
    }
    
    var mqr = [];
    
    function mq(id,ary,wid,h)
    {this.mqo=document.getElementById(id);
    var heit = this.mqo.style.height;
    this.mqo.onmouseout=function()
    {mqRotate(mqr);startstopchange(mqr,'Stop Scrolling');
    };
    this.mqo.onmouseover=function()
    {clearTimeout(mqr[0].TO);startstopchange(mqr,'Begin Scrolling');
    };
    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;
    this.mqo.appendChild(this.mqo.ary[i]);
    }
    mqr.push(this.mqo);
    startstop(mqr,this.mqo,h);
    }

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much Vic!

    I did change the "305" in this section:
    function start()
    { new mq('m1',mqAry1,300,305); // additional parameter for the top position of the button
    mqRotate(mqr); // must come last
    }
    to "-13" because the 305 put the way to far below the marquee. The -13 centers it on the bottom line of the marquee and looks real nice.
    You can see the new layout here: http://easydigging.com/Garden_Tool/home2.html

    I looked around your http://www.vicsjavascripts.org.uk/ website. There is some cool stuff there It's going to take me awhile to check out all you have created...

    Couple other questions I hope you can help with:

    1) where in the code can I adjust the speed?

    2) the documentation for this scrolling marquee says that all the images must be the same width. This is a bit limiting. I can easily make all the heights the same, but it would really be great to allow a mix of thin, medium, and wide images. How should be changed to allow more variety in image width?

    Thanks again!

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem is that the images are in an array and take time to load

    try this

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    
    <style type="text/css">
    /*<![CDATA[*/
    .marquee {
      position:relative;height:300px;text-Align:left;
    }
    
    .marquee IMG {
      height:300px;
    }
    
    .marquee2 {
      position:relative;height:200px;text-Align:left;
    }
    
    .marquee2 IMG {
    
    }
    
    .marquee3 {
      position:relative;width:200px;height:400px;text-Align:left;
    }
    
    .marquee3 IMG {
      width:200px;height:200px;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    var mqAry1=['http://easydigging.com/Garden_Tool/../images-new/wheel-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/seeder-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/broadforks-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grub-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/grape-hoe-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/garden-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/hand-hoes-icon.jpg','http://easydigging.com/Garden_Tool/../images-new/catalog-icon.jpg'];
    var mqAry2=['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif'];
    
    function zxcMarquee(id,ud,ary,mde,b){
     var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
     if (!o&&obj&&ary){
      var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
      obj.style.overflow='hidden';
      slide.style.position='absolute';
      slide.style.left='0px';
      slide.style.top='0px';
      slide.style[mde[3]]='3000px';
      obj.appendChild(slide);
      ary=ary.concat();
      for (var z0=0;z0<ary.length;z0++){
       imgs[z0]=new Image();
       imgs[z0].src=ary[z0];
      }
      oop={
       mde:mde,
       id:id,
       obj:obj,
       slide:slide,
       lft:0,
       ud:ud,
       b:b,
       lstud:ud
      }
      zxcLoad(oop,imgs)
     }
     if (o){
      clearTimeout(o.to);
      o.lstud=ud;
      o.lft+=ud;
      if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
       o.lft+=o.sz*(ud<0?1:-1);
      }
      if (ud!=0){
       o.ud=ud;
      }
      if (o.b){
       o.b.value=ud==0?'Start Scroll':'Stop Scroll';
      }
      o.slide.style[o.mde]=o.lft+'px';
      o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
     }
    }
    
    function zxcLoad(o,ary){
     var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
     for (var z0=0;z0<ary.length;z0++){
      if (ary[z0].width<40){
       o.to=setTimeout(function(){ zxcLoad(o,ary); },50);
       return;
      }
     }
     for (;z1<ary.length;z1++){
      img=document.createElement('IMG');
      img.src=ary[z1].src;
      o.slide.appendChild(img);
      ary[z1]=img
     }
      sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
      o.slide.style[o.mde[3]]=sz+5+'px';
      clone=o.slide.cloneNode(true);
      nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
      for (;z2<nu;z2++){
       clone=clone.cloneNode(true);
       clone.style[o.mde[0]]=sz*z2+'px';
       o.slide.appendChild(clone);
      }
      o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
      o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
      if (o.b){
       o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
      }
      o.mde=o.mde[0];
      o.sz=sz;
      zxcMarquee['zxc'+o.id]=o;
      zxcMarquee(o.id,o.ud);
    }
    
    function start(){
     // parameter 0 = the unique ID name of the parent DIV.                                    (string)
     // parameter 1 = (optional) the speed and direction of the scroll.                        (number, default = -1 = anti clockwise)
     // parameter 2 = (optional) the mode of execution, 'H' = horizontal, 'V' = vertical.      (string, default = 'H' = horizontal)
     // parameter 3 = (optional) the unique ID name of the INPUT button to control the scroll. (string, default = in line event calls)
     zxcMarquee('m1',-1,mqAry1,'H','b1');
     zxcMarquee('m2',4,mqAry2,'H','b2');
     zxcMarquee('m3',1,mqAry1,'V','b3');
     // for inline event calls call: zxcMarquee('m1',-1);
    }
    
    window.onload = start;
    
    /*]]>*/
    </script></head>
    
    <body>
     <div >
      <div id="m1" class="marquee" ></div>
      <input id="b1" type="button" name="" value="Stop Scroll" />
     </div>
    
     <div >
      <div id="m2" class="marquee2" ></div>
      <input id="b2" type="button" name="" value="Stop Scroll" />
     </div>
    
     <div >
      <div id="m3" class="marquee3" ></div>
      <input id="b3" type="button" name="" value="Stop Scroll" />
     </div>
    
    
    </body>
    
    </html>
    Last edited by vwphillips; Nov 25, 2012 at 10:39. Reason: added notes

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Vic,

    I used the new code you sent, and it does work for images of varying width.

    But it only shows the first 5 images, even though I have loaded 23 images...

    Here is the test page: http://easydigging.com/Garden_Tool/marquee2.html

    The pictures below the marquee are the 1st and the 23rd in the string.

    It's so close, please help. Maybe it times out or the physical width is set too short?

    Thanks!

    Also I noticed that if it can not retrieve any one of the image files it shuts down completely (doesn't show anything but the button). Is there any way to allow it to ignore a file it can't quickly retrieve? (this not nearly important as the problem above...)

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I missed your reply, hence the delay

    I never imagined you would use so many images but easily cured(see line in red) I have added another 0

    Code:
    function zxcMarquee(id,ud,ary,mde,b){
     var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
     if (!o&&obj&&ary){
      var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
      obj.style.overflow='hidden';
      slide.style.position='absolute';
      slide.style.left='0px';
      slide.style.top='0px';
      slide.style[mde[3]]='30000px';
      obj.appendChild(slide);
      ary=ary.concat();
      for (var z0=0;z0<ary.length;z0++){
       imgs[z0]=new Image();
       imgs[z0].src=ary[z0];
      }
      oop={
       mde:mde,
       id:id,
       obj:obj,
       slide:slide,
       lft:0,
       ud:ud,
       b:b,
       lstud:ud
      }
      zxcLoad(oop,imgs)
     }
     if (o){
      clearTimeout(o.to);
      o.lstud=ud;
      o.lft+=ud;
      if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
       o.lft+=o.sz*(ud<0?1:-1);
      }
      if (ud!=0){
       o.ud=ud;
      }
      if (o.b){
       o.b.value=ud==0?'Begin Scroll':'Stop Scroll';
      }
      o.slide.style[o.mde]=o.lft+'px';
      o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
     }
    }
    have you considered clicking the images to stop the scroll instead of a button,

    Code:
    function zxcLoad(o,ary){
     var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
     for (var z0=0;z0<ary.length;z0++){
      if (ary[z0].width<40){
       o.to=setTimeout(function(){ zxcLoad(o,ary); },50);
       return;
      }
     }
     for (;z1<ary.length;z1++){
      img=document.createElement('IMG');
      img.src=ary[z1].src;
      o.slide.appendChild(img);
      ary[z1]=img
     }
      sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
      o.slide.style[o.mde[3]]=sz+5+'px';
      clone=o.slide.cloneNode(true);
      nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
      for (;z2<nu;z2++){
       clone=clone.cloneNode(true);
       clone.style[o.mde[0]]=sz*z2+'px';
       o.slide.appendChild(clone);
      }
      o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
      o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
      o.obj.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
      if (o.b){
       o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
      }
      o.mde=o.mde[0];
      o.sz=sz;
      zxcMarquee['zxc'+o.id]=o;
      zxcMarquee(o.id,o.ud);
    }

  7. #7
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you again Vic. You have been a world of help

    I tried changing 3000 to 30000 as you suggested. That didn't work. But changing it to 7600 did.

    Also the absolute positioning was putting the marquee in the wrong place on the page. So I changed this:
    slide.style.position='absolute';
    slide.style.left='0px';
    slide.style.top='0px';
    to just this:
    slide.style.position='relative';
    You can see how it all works on the page here: http://easydigging.com/Garden_Tool/home2.html

    There is only one problem remaining:
    The last image in the marquee wants to clear the whole screen before starting up again with the first. Since this is a responsive webpage, that doesn't take long on an iPhone, but it seems to take forever on a large desktop display. Is there any way to get the first image to follow right behind the last?

    Here is what the last image looks like: http://easydigging.com/images-new/23-u-bar.jpg

    Maybe it was something related to changing from absolute to relative? If you (or anybody) can tell me how to fix this last glitch, I would sure appreciate it

  8. #8
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem was that the slider DIV was inheriting text-align:center

    the slide.style.position must be 'absolute'

    Code:
    function zxcMarquee(id,ud,ary,mde,b){
     var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud:-1;
     if (!o&&obj&&ary){
      var oop,b=document.getElementById(b),mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),imgs=[],z0=0;
      obj.style.overflow='hidden';
      slide.style.position='absolute';
      slide.style.left='0px';
      slide.style.top='0px';
      slide.style[mde[3]]='30000px';
      slide.style.textAlign='left';
      obj.appendChild(slide);
      ary=ary.concat();
      for (var z0=0;z0<ary.length;z0++){
       imgs[z0]=new Image();
       imgs[z0].src=ary[z0];
      }
      oop={
       mde:mde,
       id:id,
       obj:obj,
       slide:slide,
       lft:0,
       ud:ud,
       b:b,
       lstud:ud
      }
      zxcLoad(oop,imgs)
     }
     if (o){
      clearTimeout(o.to);
      o.lstud=ud;
      o.lft+=ud;
      if ((ud<0&&o.lft<-o.sz)||(ud>0&&o.lft>0)){
       o.lft+=o.sz*(ud<0?1:-1);
      }
      if (ud!=0){
       o.ud=ud;
      }
      if (o.b){
       o.b.value=ud==0?'Begin Scroll':'Stop Scroll';
      }
      o.slide.style[o.mde]=o.lft+'px';
      o.to=setTimeout(function(){ zxcMarquee(id,ud); },50);
     }
    }
    
    function zxcLoad(o,ary){
     var img=document.createElement('IMG'),sz,nu,clone,z0=0,z1=0,z2=1;
     for (var z0=0;z0<ary.length;z0++){
      if (ary[z0].width<40){
       o.to=setTimeout(function(){ zxcLoad(o,ary); },250);
       return;
      }
     }
     for (;z1<ary.length;z1++){
      img=document.createElement('IMG');
      img.src=ary[z1].src;
      o.slide.appendChild(img);
      ary[z1]=img
     }
      sz=ary[z1-1][o.mde[1]]+ary[z1-1][o.mde[2]];
      o.slide.style[o.mde[3]]=sz+5+'px';
      clone=o.slide.cloneNode(true);
      clone.style.border='solid red 1px';
      nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
      for (;z2<nu;z2++){
       clone=clone.cloneNode(true);
       clone.style[o.mde[0]]=sz*z2+'px';
       o.slide.appendChild(clone);
      }
      o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
      o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
      if (o.b){
       o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
      }
      o.mde=o.mde[0];
      o.sz=sz;
      zxcMarquee['zxc'+o.id]=o;
      zxcMarquee(o.id,o.ud);
    }

  9. #9
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yea!!! That fixed it! Here is the repaired marquee: http://easydigging.com/Garden_Tool/home2.html

    I also took a few pictures out. Didn't need to decrease the marquee width at all.

    Last Question:
    I like the current speed, but it is a little jittery. All the files in the marquee are about 65 KB. Would it be smoother and less jittery if all the file sizes were about half that size?

    Thanks again for all you help Vic. If you're curious why I wanted a marquee so much (they aren't used much anymore), here's what I think the advantages are for this site:
    1) It is a responsive site (built on Twitter Bootstrap), so it transforms to fit the whole variety - and a big wide static image just wouldn't work on a phone.
    2) We sell a variety of tools, and don't have a big broad image that shows them all.
    3) Even on a phone, you can see all the images at a reasonable size (I will probably set the CSS to transform the marquee to only 200px tall for phones)
    4) These were the only pictures we had that included humans - and evidently people want to see people using something before they buy it
    5) The Stop/Start button is there for those using small devices that do not include the "mouseover" feature. And if anybody is annoyed by the scroll, it makes it obvious how to stop it.

  10. #10
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Vic and all,

    Any thoughts on this question?
    Last Question:
    I like the current speed, but it is a little jittery. All the files in the marquee are about 65 KB. Would it be smoother and less jittery if all the file sizes were about half that size?

  11. #11
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have added more options including a XBrowser scroll speed

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    
    .marquee1 {
      position:relative;height:300px;width:500px;border:solid red 1px;text-Align:left;
    }
    
    .marquee1 IMG {
      height:300px;
    }
    
    .marquee2 {
      position:relative;height:200px;text-Align:left;
    }
    
    .marquee2 IMG {
    
    }
    
    .marquee3 {
      position:relative;width:200px;height:400px;text-Align:left;
    }
    
    .marquee3 IMG {
      width:200px;height:200px;
    }
    
    
    </style>
    <script type="text/javascript">
    
    var mqAry1=['http://www.easydigging.com/images-new/1-garden.jpg','http://www.easydigging.com/images-new/2-tool.jpg','http://www.easydigging.com/images-new/3-hoss.jpg','http://www.easydigging.com/images-new/4-u-bar.jpg','http://www.easydigging.com/images-new/5-seeder.jpg','http://www.easydigging.com/images-new/6-tool.jpg','http://www.easydigging.com/images-new/7-u-bar.jpg','http://www.easydigging.com/images-new/8-tool.jpg','http://www.easydigging.com/images-new/9-hoss.jpg','http://www.easydigging.com/images-new/10-garden.jpg','http://www.easydigging.com/images-new/11-pick.jpg','http://www.easydigging.com/images-new/12-hoss.jpg','http://www.easydigging.com/images-new/13-tool.jpg','http://www.easydigging.com/images-new/14-u-bar.jpg','http://www.easydigging.com/images-new/15-tool.jpg','http://www.easydigging.com/images-new/16-seeder.jpg','http://www.easydigging.com/images-new/17-tool.jpg','http://www.easydigging.com/images-new/18-hoss.jpg','http://www.easydigging.com/images-new/19-tool.jpg','http://www.easydigging.com/images-new/20-u-bar.jpg','http://www.easydigging.com/images-new/21-tool.jpg','http://www.easydigging.com/images-new/22-hoss.jpg','http://www.easydigging.com/images-new/23-u-bar.jpg'];
    
    var mqAry2=[
    ['http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1','http://www.vicsjavascripts.org.uk/StdImages/One.gif','Image 1'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','Image 2'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','Image 3']
    ];
    
    function zxcMarquee(id,ud,options){
     var obj=document.getElementById(id),o=zxcMarquee['zxc'+id],ud=typeof(ud)=='number'?ud>0?1:ud<0?-1:0:0;
     if (!o&&typeof(options)=='object'){
      var oop=options,b=document.getElementById(oop.StopStartID),ary=oop.ImageArray,ld=oop.LoadDuration,mde=oop.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height']:['left','offsetLeft','offsetWidth','width'],slide=document.createElement('DIV'),img,z0=0;
      if (typeof(ary)=='object'&&ary.constructor==Array){
       obj.style.overflow='hidden';
       slide.style.position='absolute';
       slide.style.left='0px';
       slide.style.top='0px';
       slide.style[mde[3]]='30000px';
       slide.style.textAlign='left';
       obj.appendChild(slide);
       ary=ary.concat();
       for (var z0=0;z0<ary.length;z0++){
        img=new Image();
        img.src=ary[z0][0];
        ary[z0][0]=img;
       }
       oop={
        mde:mde,
        id:id,
        obj:obj,
        slide:slide,
        ms:oop.SlideDuration,
        ld:typeof(ld)=='number'&&ld>1?ld*1000:5000,
        now:0,
        ud:ud,
        b:b,
        lstud:ud
       }
       zxcLoad(oop,ary,new Date());
      }
     }
     if (o){
      clearTimeout(o.dly);
      o.lstud=ud;
      if (ud!=0){
       o.ud=ud;
      }
      if (o.b){
       o.b[o.b.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=ud==0?'Begin Scroll':'Stop Scroll';
      }
      if (ud!=0){
       zxcScroll(o,o.now,o.sz*ud,new Date(),o.ms*Math.abs((o.now-o.sz*ud)/o.sz)+10,ud);
      }
     }
    }
    
    function zxcScroll(o,f,t,srt,mS,ud){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       o.now=now;
       o.slide.style[o.mde]=now+'px';
      }
      if (ms<mS){
       o.dly=setTimeout(function(){ zxcScroll(o,f,t,srt,mS,ud); },10);
      }
      else {
       o.now=0;
       o.slide.style[o.mde]=t+'px';
       zxcMarquee(o.id,ud);
      }
     }
    
    function zxcLoad(o,ary,d){
     var img=document.createElement('IMG'),sz=0,nu,clone,a,z0=0,z1=0,z2=1;
     for (var z0=0;z0<ary.length;z0++){
      if (ary[z0][0].width<40&&new Date()-d<o.ld){
       o.to=setTimeout(function(){ zxcLoad(o,ary,d); },250);
       return;
      }
     }
     for (;z1<ary.length;z1++){
      if (ary[z1][0].width>40){
       a=document.createElement('A');
       o.slide.appendChild(a);
       img=document.createElement('IMG');
       img.src=ary[z1][0].src;
       img.style.borderWidth='0px';
       a.appendChild(img);
       if (ary[z1][1]){
        img.title=ary[z1][1];
       }
       if (ary[z1][2]){
        a.href=ary[z1][2];
       }
       ary[z1]=img
       sz+=img[o.mde[3]];
      }
     }
     if (sz>0){
      o.slide.style[o.mde[3]]=sz+5+'px';
      clone=o.slide.cloneNode(true);
      clone.style.border='solid red 1px';
      nu=Math.ceil(o.obj[o.mde[2]]/sz)+1;
      for (;z2<nu;z2++){
       clone=clone.cloneNode(true);
       clone.style[o.mde[0]]=sz*z2+'px';
       o.slide.appendChild(clone);
      }
      o.obj.onmouseover=function(){ zxcMarquee(o.id,0);  }
      o.obj.onmouseout=function(){ zxcMarquee(o.id,o.ud);  }
      if (o.b){
       o.b.onmouseup=function(){ zxcMarquee(o.id,o.lstud==0?o.ud:0);  }
      }
      o.mde=o.mde[0];
      o.sz=sz;
      o.ms=typeof(o.ms)=='number'&&o.ms>100?o.ms:sz*10;
      zxcMarquee['zxc'+o.id]=o;
      zxcMarquee(o.id,o.ud);
     }
    }
    
    function start(){
     // parameter 0 = the unique ID name of the parent DIV.                          (string)
     // parameter 1 = (optional) the direction of the scroll.                        (number, default = 0, <0 = anti clockwise, >0 = clockwise, 0 = pause)
     // parameter 2 =  an object defining the script instance options as an object.  (object)
                       //   ImageArray:mqAry2,  // an array of arrays defining the image srcs, titles and links.           (array)
                                                 // field 0 = the image src.                  (string)
                                                 // field 1 = (optional) the image title.     (string)
                                                 // field 2 = (optional) the image link href. (string)
                       //   Mode:'H',           //(optional) the mode of execution, 'H' = horizontal, 'V' = vertical.      (string, default = 'H' = horizontal)
                       //   SlideDuration:5000, //(optional) the time to scroll the images in milliseconds.                (number, default = the width of the images*10)
                       //   LoadDuration:5,     //(optional) the time allowed to load the images in seconds.               (number, default = 5)
                       //   StopStartID:'b1'    //(optional) the unique ID name of the element to control the scroll.      (string, default = in line event calls)
     zxcMarquee('m1',-1,{ImageArray:mqAry2,Mode:'H',SlideDuration:5000,LoadDuration:5,StopStartID:'b1'});
     // for inline event calls call: zxcMarquee('m1',-1);
    }
    
    window.onload = start;
    
    
    </script>
    </head>
    
    <body>
     <div style=text-align:center; >
      <div id="m1" class="marquee1" ></div>
      <input id="b1" type="button" name="" value="Stop Scroll" />
      <div onmouseup="zxcMarquee('m1',0);" >Stop Scroll</div>
      Use any element type for the button
     </div>
    
    </body>
    
    </html>

  12. #12
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    137
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sorry Vic, but I can't get it to work with my images

    I tried altering the few settings I learned from you over the last few days, but still nothing displays for marquee1
    (marquee2 did work)

    Since I can barely understand the one linked in my recent posts above, it may be best for me to stick with that...

    Any thoughts on if the working one will run noticeably smoother with 30 KB files instead of the current 60 KB files?

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    reducing the file size will aid the browser rendering the images


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
  •