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 2 of 2
  1. #1
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post

    Jquery fade - problem with text

    Hi,

    This must be a 1st.

    It works ok in IE...But not in Firefox?

    I need to use white text over a dark bg color or if possible over an image.
    The problem is in FF the white text distorts on fade

    The black text works ok when adding the white bg.

    See my test code below. (It can be copied straight in to test)

    If anyone could please take a quick look and give some pointers.

    Code:
     <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML DIR="LTR" LANG="en">
    <head>
    <title>Working-Test-Banner</title>
    <style type="text/css">
    #welcomebanner img {border: none;}
    #wrapper{position:relative;}
    #welcomebanner {margin: 0; padding: 0;  position:relative;background-color:color:#fff;}
    #welcomebanner ul, #welcomebanner li {margin: 0; padding: 0; list-style: none;}
    #welcomebanner li {display: none;}
    
    p{font-size:30px;background-color:purple;color:#fff;}
    
    h2{font-size:30px;background-color:#fff;color:#000;}
    
    </style>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript">
    	var $j = jQuery;
    	var welcomeBannerTimer;
    	
    	function nextSlide(){
    		var el = $j('#welcomebanner');
    		var slides = el.data('slides');
    		var c = el.data('slideIndex');
    		var n = ((c+1) >= slides.length)? 0 : c+1;
    		el.data('slideIndex', n);
    		$j(slides[c]).fadeOut(null, function(){
    			$j(slides[n]).fadeIn();
    			
    		});
    	}
    	
    	function over(){
    		clearInterval(welcomeBannerTimer);
    	}
    	
    	function out(){
    		welcomeBannerTimer = setInterval(nextSlide, 3000);
    	}
    	
    	$j(window).load(function() {
    		var el = $j('#welcomebanner');
    		var slides = $j('#welcomebanner>li');
    		if (slides.length < 2){
    			$j(slides[0]).show();
    			return;
    		}
    		el.data('slides', slides);
    		el.data('slideIndex', 0);
    		welcomeBannerTimer = setInterval(nextSlide, 3000);
    		el.bind('mouseenter', over).bind('mouseleave', out);
    		$j(slides[0]).show();
    		
    	});
    	
    	
    </script>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <ul id="welcomebanner">
    
      <li>
    
    	<h2>testing the text fade</h2>
    	<p>testing the text fade</p>
    
     </li>  
    
     <li>  
    
    <h2>Firefox and IE problems</h2>
    	<p>Firefox and IE problems</p>
    
     </li>  
       
    </ul>
    
    </div>
    </body>
    </html>
    Last edited by LE1; 11-19-2010 at 12:50 AM. Reason: updated code

  • #2
    LE1
    LE1 is offline
    New Coder
    Join Date
    Nov 2009
    Posts
    47
    Thanks
    4
    Thanked 1 Time in 1 Post
    Still searching for help on this Firefox problem?

    Just to make it clearer;

    The problem is I am using white text on a dark background,
    when it fades in/out the text distorts.

    The black text is ok.


  •  

    Posting Permissions

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