Changing Page With Jquery

Discussion in 'CSS Forum' started by medicaxsas, Apr 10, 2013.

  1. medicaxsas

    medicaxsas New Member

    So I'm trying to use hashes to animate from page to page. The first page that loads (home) fades in and out perfectly, but the page I'm trying to get to, test (look at hash stuff), won't animate/load at all. Why is this?\[code\]<!DOCTYPE html><html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <title>Jack Cook</title> <style> #navbar ul { list-style-type: none; display: block; text-align: center; } #navbar ul li { display: inline-block; } #navbar img { width: 64px; height: 64px; padding: 0 10px 0 10px; } #navbar a img:hover { opacity: 0.4; } </style> <script type="text/javascript"> $(document).ready(function () { pages = { "home": ["Home", "This is my homepage!", "<p>Homepage</p>"], "test": ["Test", "This is a testing page", "<p>Testing</p>"] }; page = window.location.hash != "" ? window.location.hash.substr(3) : "home"; update(page); $(document).on("click", "a", function() { if ($(this).attr("href").substr(0, 4) != "http") { event.preventDefault(); window.location.hash = "!/" + $(this).attr("href"); } }); $(window).on("hashchange", function () { $("body").fadeOut(1000, function () { update(window.location.hash); }); }); }); function update(page) { $("body").css("display", "none"); $("#content").html(pages[page][2]); $("body").fadeIn(2000); } </script> </head> <body> <div id="navbar"> <ul> <li><a href="http://stackoverflow.com/questions/15915123/test"><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></a></li> <li><img src="http://cdn4.iconfinder.com/data/icons/devine_icons/128/PNG/Folder%20and%20Places/Home.png" /></li> </ul> </div> <div id="content"></div> </body></html>\[/code\]
     

Share This Page