Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    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:
    Code:
    <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

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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:
    Code:
    function resizeScroller() {
    	if (ie) {
    		document.all.scrollingDiv.style.width =( document.body.clientWidth-500)+'px';
    	} else {
    		document.getElementById('scrollingDiv').style.width = (window.innerWidth-500)+'px';
    	}
    }
    Last edited by Kor; 06-20-2008 at 02:28 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Kor View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •