SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Scroller Fails To Resize Properly In Browser With Resolution & Magnfication Changes

    Hi,

    I've created a scrolling banner with a set width (see http://www.hsartest.hsarepair.com/index5i_revolver.html). This works perfectly (i.e., no side scroll bar) on my 1920x1080 res monitor), but unfortunately does not work fine (i.e., the scroller either does not reach across the entire browser window and/or the bottom scroll bar comes into play and offsets the web page out of its intended "centered" view) in any other resolutions or magnifications.

    Ultimately, I guess I'm wondering if there is any way to insure that, no matter the resolution o magnification, the scroller will span the entire width of the browser window, without either failing to reach the right side or employing a bottom scroll bar? I fear that the scroller script I used forces me to name a "set" width, while the div into which I have placed it obviously has much more flexibility when it comes to matching the browser width regardless of resolution and/or magnification.

    Any advice and/or direction would be immensely appreciated!

    Kind Regards,

    Jim

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2009
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to Sitepoint.

    I think that you have answered your own question: the script that you used demands a set width, for which its developer should be forced to sit in a corner for the rest of his pre-school class. Perhaps to be joined by people who use scrollers.... but that is just one accessibility developer's opinion.

    I cannot possibly know how much or little you know about JavaScript, but whenever you choose to use a 3rd party's code/plug-in, you need two things: an understanding of the plug-in and an understanding of JavaScript. Then you can fix these dumb problems that turn up in plug-ins or avoid the damn things altogether.

  3. #3
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You can try this on the table element:

    <table cellspacing="0" cellpadding="0" border="0" style="min-width: 100%;">

    or

    <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">

    and take the width off the div element:

    <div style="position: relative; height: 30px; overflow: hidden;">

    There may be needed other fixes, try and see if that.

    Code:
    <div class="logoslider">
      <div class="logosliderrotatorwide30pxhigh"><script type="text/javascript">
    
    //Specify the slider's width (in pixels)
    var sliderwidth="1899px"
    //Specify the slider's height
    var sliderheight="30px"
    //Specify the slider's slide speed (larger is faster 1-10)
    var slidespeed=1
    //configure background color:
    slidebgcolor="#EAEAEA"
    
    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    leftrightslide[0]='&lt;a href="http://"&gt;&lt;img src="img/jennair30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[1]='&lt;a href="http://"&gt;&lt;img src="img/kitchenaid30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[2]='&lt;a href="http://"&gt;&lt;img src="img/gaggenau30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[3]='&lt;a href="http://"&gt;&lt;img src="img/wolf30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[4]='&lt;a href="http://"&gt;&lt;img src="img/siemens30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[5]='&lt;a href="http://"&gt;&lt;img src="img/eurotech30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[6]='&lt;a href="http://"&gt;&lt;img src="img/liebherr30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[7]='&lt;a href="http://"&gt;&lt;img src="img/electrolux30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[8]='&lt;a href="http://"&gt;&lt;img src="img/frigidaire30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[9]='&lt;a href="http://"&gt;&lt;img src="img/fisherpaykel30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[10]='&lt;a href="http://"&gt;&lt;img src="img/thermador30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[11]='&lt;a href="http://"&gt;&lt;img src="img/bosch30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[12]='&lt;a href="http://"&gt;&lt;img src="img/westinghouse30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[13]='&lt;a href="http://"&gt;&lt;img src="img/hotpoint30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[14]='&lt;a href="http://"&gt;&lt;img src="img/danby30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[15]='&lt;a href="http://"&gt;&lt;img src="img/kenmore30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[16]='&lt;a href="http://"&gt;&lt;img src="img/roper30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[17]='&lt;a href="http://"&gt;&lt;img src="img/subzero30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[18]='&lt;a href="http://"&gt;&lt;img src="img/whilrpool30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[19]='&lt;a href="http://"&gt;&lt;img src="img/viking30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[20]='&lt;a href="http://"&gt;&lt;img src="img/samsung30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[21]='&lt;a href="http://"&gt;&lt;img src="img/amana30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[22]='&lt;a href="http://"&gt;&lt;img src="img/marve30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[23]='&lt;a href="http://"&gt;&lt;img src="img/uline30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[24]='&lt;a href="http://"&gt;&lt;img src="img/haier30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[25]='&lt;a href="http://"&gt;&lt;img src="img/maytag30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[26]='&lt;a href="http://"&gt;&lt;img src="img/hoshizaki30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[27]='&lt;a href="http://"&gt;&lt;img src="img/lg30.jpg" border=0&gt;&lt;/a&gt;'
    leftrightslide[28]='&lt;a href="http://"&gt;&lt;img src="img/ge30.jpg" border=0&gt;&lt;/a&gt;'
    
    //Specify gap between each image (use HTML):
    var imagegap=""
    
    //Specify pixels gap between each slideshow rotation (use integer):
    var slideshowgap=0
    
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var copyspeed=slidespeed
    leftrightslide='&lt;nobr&gt;'+leftrightslide.join(imagegap)+'&lt;/nobr&gt;'
    var iedom=document.all||document.getElementById
    if (iedom)
    document.write('&lt;span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px"&gt;'+leftrightslide+'&lt;/span&gt;')
    var actualwidth=''
    var cross_slide, ns_slide
    
    function fillup(){
    if (iedom){
    cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
    cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
    cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
    actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
    cross_slide2.style.left=actualwidth+slideshowgap+"px"
    }
    else if (document.layers){
    ns_slide=document.ns_slidemenu.document.ns_slidemenu2
    ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
    ns_slide.document.write(leftrightslide)
    ns_slide.document.close()
    actualwidth=ns_slide.document.width
    ns_slide2.left=actualwidth+slideshowgap
    ns_slide2.document.write(leftrightslide)
    ns_slide2.document.close()
    }
    lefttime=setInterval("slideleft()",30)
    }
    window.onload=fillup
    
    function slideleft(){
    if (iedom){
    if (parseInt(cross_slide.style.left)&gt;(actualwidth*(-1)+8))
    cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
    else
    cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
    
    if (parseInt(cross_slide2.style.left)&gt;(actualwidth*(-1)+8))
    cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
    else
    cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
    
    }
    else if (document.layers){
    if (ns_slide.left&gt;(actualwidth*(-1)+8))
    ns_slide.left-=copyspeed
    else
    ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
    
    if (ns_slide2.left&gt;(actualwidth*(-1)+8))
    ns_slide2.left-=copyspeed
    else
    ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
    }
    }
    
    
    if (iedom||document.layers){
    with (document){
    document.write('&lt;table border="0" cellspacing="0" cellpadding="0"&gt;&lt;td&gt;')
    if (iedom){
    write('&lt;div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden"&gt;')
    write('&lt;div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"&gt;')
    write('&lt;div id="test2" style="position:absolute;left:0px;top:0px"&gt;&lt;/div&gt;')
    write('&lt;div id="test3" style="position:absolute;left:-1000px;top:0px"&gt;&lt;/div&gt;')
    write('&lt;/div&gt;&lt;/div&gt;')
    }
    else if (document.layers){
    write('&lt;ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'&gt;')
    write('&lt;layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"&gt;&lt;/layer&gt;')
    write('&lt;layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"&gt;&lt;/layer&gt;')
    write('&lt;/ilayer&gt;')
    }
    document.write('&lt;/td&gt;&lt;/table&gt;')
    }
    }
    </script><span style="visibility:hidden;position:absolute;top:-100px;left:-9000px" id="temp"><nobr><a href="http://"><img border="0" src="img/jennair30.jpg"></a><a href="http://"><img border="0" src="img/kitchenaid30.jpg"></a><a href="http://"><img border="0" src="img/gaggenau30.jpg"></a><a href="http://"><img border="0" src="img/wolf30.jpg"></a><a href="http://"><img border="0" src="img/siemens30.jpg"></a><a href="http://"><img border="0" src="img/eurotech30.jpg"></a><a href="http://"><img border="0" src="img/liebherr30.jpg"></a><a href="http://"><img border="0" src="img/electrolux30.jpg"></a><a href="http://"><img border="0" src="img/frigidaire30.jpg"></a><a href="http://"><img border="0" src="img/fisherpaykel30.jpg"></a><a href="http://"><img border="0" src="img/thermador30.jpg"></a><a href="http://"><img border="0" src="img/bosch30.jpg"></a><a href="http://"><img border="0" src="img/westinghouse30.jpg"></a><a href="http://"><img border="0" src="img/hotpoint30.jpg"></a><a href="http://"><img border="0" src="img/danby30.jpg"></a><a href="http://"><img border="0" src="img/kenmore30.jpg"></a><a href="http://"><img border="0" src="img/roper30.jpg"></a><a href="http://"><img border="0" src="img/subzero30.jpg"></a><a href="http://"><img border="0" src="img/whilrpool30.jpg"></a><a href="http://"><img border="0" src="img/viking30.jpg"></a><a href="http://"><img border="0" src="img/samsung30.jpg"></a><a href="http://"><img border="0" src="img/amana30.jpg"></a><a href="http://"><img border="0" src="img/marve30.jpg"></a><a href="http://"><img border="0" src="img/uline30.jpg"></a><a href="http://"><img border="0" src="img/haier30.jpg"></a><a href="http://"><img border="0" src="img/maytag30.jpg"></a><a href="http://"><img border="0" src="img/hoshizaki30.jpg"></a><a href="http://"><img border="0" src="img/lg30.jpg"></a><a href="http://"><img border="0" src="img/ge30.jpg"></a></nobr></span><table cellspacing="0" cellpadding="0" border="0" style="min-width: 100%;"><tbody><tr><td><div style="position: relative; height: 30px; overflow: hidden;"><div onmouseout="copyspeed=slidespeed" onmouseover="copyspeed=0" style="position:absolute;width:1899px;height:30px;background-color:#EAEAEA"><div style="position: absolute; left: 1694px; top: 0px;" id="test2"><nobr><a href="http://"><img border="0" src="img/jennair30.jpg"></a><a href="http://"><img border="0" src="img/kitchenaid30.jpg"></a><a href="http://"><img border="0" src="img/gaggenau30.jpg"></a><a href="http://"><img border="0" src="img/wolf30.jpg"></a><a href="http://"><img border="0" src="img/siemens30.jpg"></a><a href="http://"><img border="0" src="img/eurotech30.jpg"></a><a href="http://"><img border="0" src="img/liebherr30.jpg"></a><a href="http://"><img border="0" src="img/electrolux30.jpg"></a><a href="http://"><img border="0" src="img/frigidaire30.jpg"></a><a href="http://"><img border="0" src="img/fisherpaykel30.jpg"></a><a href="http://"><img border="0" src="img/thermador30.jpg"></a><a href="http://"><img border="0" src="img/bosch30.jpg"></a><a href="http://"><img border="0" src="img/westinghouse30.jpg"></a><a href="http://"><img border="0" src="img/hotpoint30.jpg"></a><a href="http://"><img border="0" src="img/danby30.jpg"></a><a href="http://"><img border="0" src="img/kenmore30.jpg"></a><a href="http://"><img border="0" src="img/roper30.jpg"></a><a href="http://"><img border="0" src="img/subzero30.jpg"></a><a href="http://"><img border="0" src="img/whilrpool30.jpg"></a><a href="http://"><img border="0" src="img/viking30.jpg"></a><a href="http://"><img border="0" src="img/samsung30.jpg"></a><a href="http://"><img border="0" src="img/amana30.jpg"></a><a href="http://"><img border="0" src="img/marve30.jpg"></a><a href="http://"><img border="0" src="img/uline30.jpg"></a><a href="http://"><img border="0" src="img/haier30.jpg"></a><a href="http://"><img border="0" src="img/maytag30.jpg"></a><a href="http://"><img border="0" src="img/hoshizaki30.jpg"></a><a href="http://"><img border="0" src="img/lg30.jpg"></a><a href="http://"><img border="0" src="img/ge30.jpg"></a></nobr></div><div style="position: absolute; left: -1085px; top: 0px;" id="test3"><nobr><a href="http://"><img border="0" src="img/jennair30.jpg"></a><a href="http://"><img border="0" src="img/kitchenaid30.jpg"></a><a href="http://"><img border="0" src="img/gaggenau30.jpg"></a><a href="http://"><img border="0" src="img/wolf30.jpg"></a><a href="http://"><img border="0" src="img/siemens30.jpg"></a><a href="http://"><img border="0" src="img/eurotech30.jpg"></a><a href="http://"><img border="0" src="img/liebherr30.jpg"></a><a href="http://"><img border="0" src="img/electrolux30.jpg"></a><a href="http://"><img border="0" src="img/frigidaire30.jpg"></a><a href="http://"><img border="0" src="img/fisherpaykel30.jpg"></a><a href="http://"><img border="0" src="img/thermador30.jpg"></a><a href="http://"><img border="0" src="img/bosch30.jpg"></a><a href="http://"><img border="0" src="img/westinghouse30.jpg"></a><a href="http://"><img border="0" src="img/hotpoint30.jpg"></a><a href="http://"><img border="0" src="img/danby30.jpg"></a><a href="http://"><img border="0" src="img/kenmore30.jpg"></a><a href="http://"><img border="0" src="img/roper30.jpg"></a><a href="http://"><img border="0" src="img/subzero30.jpg"></a><a href="http://"><img border="0" src="img/whilrpool30.jpg"></a><a href="http://"><img border="0" src="img/viking30.jpg"></a><a href="http://"><img border="0" src="img/samsung30.jpg"></a><a href="http://"><img border="0" src="img/amana30.jpg"></a><a href="http://"><img border="0" src="img/marve30.jpg"></a><a href="http://"><img border="0" src="img/uline30.jpg"></a><a href="http://"><img border="0" src="img/haier30.jpg"></a><a href="http://"><img border="0" src="img/maytag30.jpg"></a><a href="http://"><img border="0" src="img/hoshizaki30.jpg"></a><a href="http://"><img border="0" src="img/lg30.jpg"></a><a href="http://"><img border="0" src="img/ge30.jpg"></a></nobr></div></div></div></td></tr></tbody></table>
         </div>
    </div>
    Table for layout is not a good thing, you should think about changing that. Costly scrollers also need to get "thinner", if possible. The important thing is that you started somewhere. You can only improve from now on.

  4. #4
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your assistance!


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
  •