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

Jimdan · March 29, 2012, 12:25am

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

Mat30 · March 29, 2012, 7:44pm

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.

system · March 29, 2012, 8:02pm

You can try this on the table element:

or

and take the width off the div element:

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


<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]='<a href="http://"><img src="img/jennair30.jpg" border=0></a>'
leftrightslide[1]='<a href="http://"><img src="img/kitchenaid30.jpg" border=0></a>'
leftrightslide[2]='<a href="http://"><img src="img/gaggenau30.jpg" border=0></a>'
leftrightslide[3]='<a href="http://"><img src="img/wolf30.jpg" border=0></a>'
leftrightslide[4]='<a href="http://"><img src="img/siemens30.jpg" border=0></a>'
leftrightslide[5]='<a href="http://"><img src="img/eurotech30.jpg" border=0></a>'
leftrightslide[6]='<a href="http://"><img src="img/liebherr30.jpg" border=0></a>'
leftrightslide[7]='<a href="http://"><img src="img/electrolux30.jpg" border=0></a>'
leftrightslide[8]='<a href="http://"><img src="img/frigidaire30.jpg" border=0></a>'
leftrightslide[9]='<a href="http://"><img src="img/fisherpaykel30.jpg" border=0></a>'
leftrightslide[10]='<a href="http://"><img src="img/thermador30.jpg" border=0></a>'
leftrightslide[11]='<a href="http://"><img src="img/bosch30.jpg" border=0></a>'
leftrightslide[12]='<a href="http://"><img src="img/westinghouse30.jpg" border=0></a>'
leftrightslide[13]='<a href="http://"><img src="img/hotpoint30.jpg" border=0></a>'
leftrightslide[14]='<a href="http://"><img src="img/danby30.jpg" border=0></a>'
leftrightslide[15]='<a href="http://"><img src="img/kenmore30.jpg" border=0></a>'
leftrightslide[16]='<a href="http://"><img src="img/roper30.jpg" border=0></a>'
leftrightslide[17]='<a href="http://"><img src="img/subzero30.jpg" border=0></a>'
leftrightslide[18]='<a href="http://"><img src="img/whilrpool30.jpg" border=0></a>'
leftrightslide[19]='<a href="http://"><img src="img/viking30.jpg" border=0></a>'
leftrightslide[20]='<a href="http://"><img src="img/samsung30.jpg" border=0></a>'
leftrightslide[21]='<a href="http://"><img src="img/amana30.jpg" border=0></a>'
leftrightslide[22]='<a href="http://"><img src="img/marve30.jpg" border=0></a>'
leftrightslide[23]='<a href="http://"><img src="img/uline30.jpg" border=0></a>'
leftrightslide[24]='<a href="http://"><img src="img/haier30.jpg" border=0></a>'
leftrightslide[25]='<a href="http://"><img src="img/maytag30.jpg" border=0></a>'
leftrightslide[26]='<a href="http://"><img src="img/hoshizaki30.jpg" border=0></a>'
leftrightslide[27]='<a href="http://"><img src="img/lg30.jpg" border=0></a>'
leftrightslide[28]='<a href="http://"><img src="img/ge30.jpg" border=0></a>'

//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='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
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)>(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)>(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>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</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.

Jimdan · March 29, 2012, 8:04pm

Thanks all for your assistance!