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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery fadeOut not working.

    I can't seem to find what I'm doing wrong. I want the div named "numberedpagecontainer" to fade out when I click the image I gave the id "click", which brings me back to my index.html.

    HTML
    Code:
    <head>
    	<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    </head>
    
    <body>
    	<div id="backbutton">
    		<a href="index.html" title="back"><img src="images/arrowback.png" id="click" alt="back"></a>
    	</div>
    
    	<div id="numberedpagecontainer">
    		<p>
    		Lorem ipsum dolor sit amet
    		</p>	
    	</div>
    </body>
    jQuery
    Code:
    <script type="text/javascript">
    
    	$(document).ready(function(){
    		$('#click').click(function(){
    			$('#numberedpagecontainer').fadeOut(900);
    		});
    	});
    
    </script>
    Last edited by apotd; 12-12-2011 at 06:49 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The image is inside an anchor with an href attribute, and of course, clicking the link brings you to the link reference (in this case index.html). You need to assign the onclick event handler to the link and tell it to not perform the default action. You can do this with:
    Code:
    $(function(){
    	$('#backbutton a').click(function(e){
    		e.preventDefault();
    		$('#numberedpagecontainer').fadeOut(900);
    	});
    });
    No need to assign an ID to the image, by the way.

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, it works. Well, at least partially.

    When I click the link I do get the fadeOut effect, but it doesn't bring me to my homepage. I only see the 1.html page with only a grey background.

    Also, I have a little question, you say I have to tell it not to perform the default action by adding:

    Code:
    e.preventDefault();
    but I don't really understand why this exactly is.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    The default action of a link on click is to bring you to the referenced file (i. e. in your case to the index page). However, you didn’t specify that you actually wanted to fade out that div and then go to the page specified in the link. What happens is that when you click the link it loads the new page immediately so you never see the fade-out occur. What you want is the fade-out and after that’s done go to the specified page.

    Therefore your code needs to look something like this:
    Code:
    $(function(){
    	$('#backbutton a').click(function(e){
    		e.preventDefault();
    		$('#numberedpagecontainer').fadeOut(900, function() {
                         window.location = $(this).attr('href');
                    });
    	});
    });
    The code explained: When clicking the link it prevents the browser from loading the index page initially and just fades out the div. After that’s done it loads the page.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the explanation.

    I tried the code, and it goes to another page, which is not my index but an "undefined" page.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,695
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Ah, right, sorry. The this keyword refers to the #numberedpagecontainer. Try this:
    Code:
    $(function(){
    	$('#backbutton a').click(function(e){
    		var ref = $(this).attr('href');
    		e.preventDefault();
    		$('#numberedpagecontainer').fadeOut(900, function() {
                         window.location = ref;
                    });
    	});
    });

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much, this works perfectly!


  •  

    Posting Permissions

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