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
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery replaceWith

    I've set up two buttons to dynamically load in content. However for some reason the content only loads on the first time you click a button. The transition function does receive the correct variables however. The fade0ut animation also doesn't take affect whilst the replaceWith() function is inside the transition function. Can you help me out?

    HTML:
    Code:
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>Javascript Transition Test</title>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
        </head>
    
    	<body>
        	<div id="navbar">
            	<button name="Page1">Page1</button><button name="Page2">Page2</button>
            </div>
    		<div id="content">
            	<p>This is the content for the first page.</p>
    		</div>
            <script src="script.js"></script>
    	</body>
    </html>

    Javascript:
    Code:
    var page1 = "<p>This is the content for the first page.</p>";
    var page2 = "<p>This is the content for the second page.</p>";
    
    $("button[name=\"Page1\"]").click(function () {
    	transition(page1);
    });
    
    $("button[name=\"Page2\"]").click(function () {
    	transition(page2);
    });
    
    function transition(newPage) {
    	$("#content").fadeOut(1000, $("#content").replaceWith(newPage));
    	$("#content").fadeIn(1000);
    };

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    I posted a solution in your thread at sitepoint.

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jquery solution

    Code:
    var page1 = "<div id=\"content\" style=\"display: none;\"><p>This is the content for the first page.</p></div>";
    var page2 = "<div id=\"content\" style=\"display: none;\"><p>This is the content for the second page.</p></div>";
    
    $("button[name=\"Page1\"]").click(function () {
    	transition(page1);
    });
    
    $("button[name=\"Page2\"]").click(function () {
    	transition(page2);
    });
    
    function transition(newPage) {
    	$("#content").fadeOut(1000, function () {
    		$("#content").replaceWith(newPage)
    		$("#content").fadeIn(1000);
    	});
    	
    };


  •  

    Posting Permissions

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