...

View Full Version : Scrolling div: works in IE/FF2, not FF3/Safari



chris.hardwick
06-19-2008, 05:28 PM
Hello,

I'm displaying content inside a div. Its style is set to overflow:hidden and Javascript controls scrolling and also sizes the width of the div to fit the pagewidth (minus a certain amount) at onLoad and onResize. However, it does not not hide/resize in FireFox 3 or Safari (both mac and pc); it stays at 100% of content width. It works correctly (at least well enough for what I need) in FF2 and IE6+. Here is a link to an example I created: http://www.pokerxfactor.com/divscrolltest.htm

The Javascript I used is:

window.onDomReady = DomReady;

function DomReady(fn) {
//W3C
if(document.addEventListener) {
document.addEventListener("DOMContentLoaded", fn, false);
}
//IE
else {
document.onreadystatechange = function(){readyState(fn)}
}
}

//IE execute function
function readyState(fn) {
//dom is ready for interaction
if(document.readyState == "interactive" || document.readyState == "complete") {
fn();
}
}

// resize scroll divs
var ie = (document.all) ? 1 : 0;

function resizeScroller() {
if (ie) {
document.all.scrollingDiv.style.width = document.body.clientWidth-500;
} else {
document.getElementById('scrollingDiv').style.width = window.innerWidth-500;
}
}

function doLoad() {
resizeScroller();
window.onresize = resizeScroller;
}

window.onDomReady(doLoad);


// auto scroll code
scrollStep=2;

timerLeft="";
timerRight="";

function toLeft(id){
document.getElementById(id).scrollLeft=0;
}

function scrollDivLeft(id){
clearTimeout(timerRight) ;
document.getElementById(id).scrollLeft+=scrollStep;
timerRight=setTimeout("scrollDivLeft('"+id+"')",10);
}

function scrollDivRight(id){
clearTimeout(timerLeft);
document.getElementById(id).scrollLeft-=scrollStep;
timerLeft=setTimeout("scrollDivRight('"+id+"')",10);
}

function toRight(id){
document.getElementById(id).scrollLeft=document.getElementById(id).scrollWidth;
}

function stopMe(){
clearTimeout(timerRight) ;
clearTimeout(timerLeft);
}



</script>


and the HTML is here:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-right:10px"><img src="/Images/leftscroll.png" alt="left scroll" onmouseover="scrollDivRight('scrollingDiv')" onmouseout="stopMe()" /></td>
<td>
<div id="scrollingDiv" style="overflow:hidden">
<!--content here-->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
<td><img src="/Images/testgraphic.png" width="189" height="101" alt="s" /></td>
</tr>
</table>
<!-- end content-->
</div>
</td>
<td style="padding-left:10px"><img src="/Images/rightscroll.png" alt="right scroll" onmouseover="scrollDivLeft('scrollingDiv')" onmouseout="stopMe()" /></td>
</tr>
</table>

What tweaks might have to be made for FF3/ Safari? I actually thought it would work fine in these browsers, since they talk of being so standards compliant. The JS checks out fine in my debugger.

Any help would be appreciated. Thanks!

Chris

Kor
06-20-2008, 10:58 AM
At a first glance:

I doubt it works in FF of any version. Full DOM compliant browsers need measurements units when setting the width/height style CSS attributes:


function resizeScroller() {
if (ie) {
document.all.scrollingDiv.style.width =( document.body.clientWidth-500)+'px';
} else {
document.getElementById('scrollingDiv').style.width = (window.innerWidth-500)+'px';
}
}

chris.hardwick
06-20-2008, 01:41 PM
Full DOM compliant browsers needs measurements units when setting the width/height style CSS attributes

Thank you, Kor! This is a perfect demonstration of the disconnect I have when I mix JS with CSS (or CSS and HTML for that matter when I first started doing it) ... I don't know either one well enough to tweeze out the syntax. Seems so obvious now that you point it out. Thanks again!

Chris



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum