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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple jQuery problem with fading In/Out

    I have two buttons at the bottom of my page that are supposed to fade in two different content areas.

    In firefox, It won't fade in the second area, and it wont fade back to the first area either. So pretty much, none of it works in Firefox.

    In Internet Explorer, the first area cuts away before the second area fades in. Also, after the second area fades away again, the first area just cuts back in. It seems as though the fade settings don't work on the first content area.

    I hope you can help me out!

    I have posted the page at: http://www.idea-palette.com/testfolder/pagetest3c.html

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    It would be easier if you posted the code pertaining to this so no one has to go digging.

  • #3
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's my jQuery to fade in the different content areas:

    Code:
    $(document).ready(function() {
    
         $("#areatwo").hide();
         
         $("#button2").click(function() {
               $("#areaone").fadeOut(1500,function(){
                   $("#areatwo").fadeIn(1500);
               });
         });
    
         $("#button1").click(function() {
               $("#areatwo").fadeOut(1500,function(){
                   $("#areaone").fadeIn(1500);
               });
         });
    
    });
    This is my body content that is affected by the jQuery. Here's the two content areas that fade in when the appropriate buttons are pushed:

    Code:
    <div id="areaone">     
            <div id="slideshow" class="fadeincontent">
                    <div id="fadetest">
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb1b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb2b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb3b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb4b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                            <a href="images/poster.gif" rel="shadowbox" title="How to Drive a Stickshift Instructional Poster"><img src="images/poster_thumb5b.gif" width="425" height="166" alt="How to Drive a Stickshift Instructional Poster"/></a>
                    </div>                                           
                   <div id="slidenav" class="nav">
                            <a id="prev2" href="#"> <span>Back</span></a>                          
                            <a id="next2" href="#"> <span>Forward</span> </a>
                            <span style="position:relative; left: 90px; top:7px; font-weight:500; font-size:11px;">
                                Click on Slideshow to Launch
                            </span>
                    </div>
             </div>
    </div> 
    
    <div id="areatwo" class="fadeincontent">
            <img src="images/poster_thumb3b.gif" />
    </div>
    Here are the buttons that make the fading happen when clicked on:

    Code:
    <div id="buttonstofade">
                    <center><span class="fadebutton"><a id="button1" href="#">First
            Content Area</a></span></center>
                    <center><span class="fadebutton"><a id="button2" href="#">Second
            Content Area</a></span></center>
    </div>

  • #4
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    I was able to use your code and create a test page. It seems to work fine.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            
            <title>Untitled Document</title>
            
            <!--jQuery 1.3-->
            <script src="js/jquery/jquery-1.3.min.js" type="text/javascript"></script>
            
            <!--jQuery UI 1.6rc4-->
            <script src="js/jquery/jquery-ui-1.6rc4.min.js" type="text/javascript"></script>
            
            <style>
    			div#areaone {
    				background-color:#FF0000;
    				color:#ffffff;
    			}
    		
    			div#areatwo {
    				background-color:#000000;
    				color:#ffffff;
    			}
    		</style> 
            
            <script>
    			$(function() {
    				 $("#areatwo").hide();
    				 
    				 $("#button2").click(function() {
    					   $("#areaone").fadeOut(1500,function(){
    						   $("#areatwo").fadeIn(1500);
    					   });
    				 });
    			
    				 $("#button1").click(function() {
    					   $("#areatwo").fadeOut(1500,function(){
    						   $("#areaone").fadeIn(1500);
    					   });
    				 });
    
    			});
    		</script>                 
        
        </head>
        
        <body>
            	
            <div id="areaone">
                This is area one<br/> 
                This is area one<br/>
                This is area one<br/>
                This is area one<br/>
                This is area one<br/>
                This is area one<br/>
                This is area one<br/>                                                         
            </div>
            
            <div id="areatwo">
            	This is area two<br/>
                This is area two<br/>
                This is area two<br/>
                This is area two<br/>
                This is area two<br/>
                This is area two<br/>
                This is area two<br/>
            </div>
            
            <a id="button1" href="#">First Content Area</a><br/>
            <a id="button2" href="#">Second Content Area</a>
        
        </body>
    </html>
    I noticed you have a slideshow in the first content area. Maybe there is a conflict?

  • #5
    New to the CF scene
    Join Date
    Jan 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think that is exactly the problem, but I'm not sure how the slideshow, which is using the jQuery Cycle Plugin, is conflicting with the fadeIn and fadeOut functions.



    Quote Originally Posted by bgallegos View Post
    I was able to use your code and create a test page. It seems to work fine.

    I noticed you have a slideshow in the first content area. Maybe there is a conflict?


  •  

    Posting Permissions

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