SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chrome Jquery Fade In Issue

    Hi All,

    Has anyone else noticed how scrollbars within a page turn black when doing a jquery fadein in chrome? Or does anyone have a solution. Here's an example:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    
    <script type="text/javascript"> 
     
    $(document).ready(function(){
      $("#container").hide(0).fadeIn(1500);
    });
    </script> 
    
    </head>
    <body>
    
    
    
    <div id="container" style="width:800px; margin: 0 auto;">
    
    	<div id="scroller" style="height: 200px; overflow:scroll;background-color:#ffffff;">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel scelerisque magna. Pellentesque eu nibh vel sem gravida tempor. Curabitur posuere diam sed ligula dictum eget porttitor lectus fermentum. Quisque quis neque nunc, eget semper magna. Proin posuere condimentum dignissim. Integer pharetra rhoncus magna ac mollis. Pellentesque faucibus venenatis sodales. Phasellus consectetur quam ut est consequat non tempor lectus lacinia. Vestibulum eros dolor, sollicitudin a laoreet a, feugiat eu mi. Maecenas at egestas erat. Etiam feugiat porta risus, sed pretium lorem lacinia viverra. Etiam turpis libero, ultrices ut suscipit non, vestibulum a orci. Nulla volutpat pellentesque nulla pharetra vehicula. Donec eget massa at diam sagittis luctus. Nullam turpis arcu, volutpat viverra fringilla et,  sollicitudin sit amet tortor. Aliquam ut malesuada lorem. Fusce nulla mauris, porttitor ornare vestibulum et, tempus ut diam. Aliquam sodales iaculis dapibus. Donec blandit facilisis augue non pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel scelerisque magna. Pellentesque eu nibh vel sem gravida tempor. Curabitur posuere diam sed ligula dictum eget porttitor lectus fermentum. Quisque quis neque nunc, eget semper magna. Proin posuere condimentum dignissim. Integer pharetra rhoncus magna ac mollis. Pellentesque faucibus venenatis sodales. Phasellus consectetur quam ut est consequat non tempor lectus lacinia.</p>
    	</div>
    
    </div>
    
    
    </body>
    </html>
    Many thanks,
    cph

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Try setting the css overflow-y to hidden for the fadein, then back to auto afterwards.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion, pmw.

    I tried this

    HTML Code:
    <script type="text/javascript"> 
     
    $(document).ready(function(){
      $("#scroller").css("overflowY", "hidden");
      $("#container").hide(0).fadeIn(1500);
      $("#scroller").css("overflowY", "auto");
    });
    </script>
    which doesn't seem to work (but maybe I'm doing something wrong).

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    The auto part is currently occurring immediately. As you need it to occur after the fade in, you will need to place it in the fadeIn's callback function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •