Clever Geek Handbook

Loading new jQuery from html files when using history API

A few questions here ...

1. So, I created a site where all pages are loaded dynamically using the history API and Modernizr. I have this code stored in a file with the name main.js

I referenced in each of my HTML files. This is my code from the history API.

$(function() {

    if(Modernizr.history){

    var newHash      = "",
    $mainContent = $(".container"),
    $pageWrap    = $(".wrapper"),
    baseHeight   = 0,
    $el;

    $("nav").delegate("a", "click", function() {
    _link = $(this).attr("href");
    history.pushState(null, null, _link);
    loadContent(_link);
    return false;
    });

    function loadContent(href){
    $mainContent
            .fadeOut(500, function() {
                $mainContent.hide().load(href + "#content", function() {
                    $mainContent.fadeIn(500, function() {
                    });
                    $("nav a").removeClass("current");
                    console.log(href);
                    $("nav a[href$="+href+"]").addClass("current");
                });
            });
    }

    }

    });

And here is my basic markup for each of the HTML files.

<!DOCTYPE html>
<head>

<title>About</title>

<!-- stylesheets -->
<link rel="stylesheet" href="../css/style.css" type="text/css" media="all">
<!-- / stylesheets -->

<!-- scripts --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script>
<script type="text/javascript" src="../scripts/modernizr.js"></script>
<script type="text/javascript" src="../scripts/main.js"></script>
<!-- / scripts -->

</head>

<body>

<div class="wrapper">

<header>
<nav class="menu">
  <a href="../">Home</a>
  <a href="../about">About The Film</a>
  <a href="../videos">Videos</a>
  <a href="../photos">Photos</a>
  <a href="/" class="current">Featuring</a>
</nav><!-- / .menu -->

</header>

<section id="featuring" class="container">
</section><!-- / #featuring -->

</div><!-- / .wrapper -->  

<script id="page-script"></script>

</body>

</html>

I am storing jQuery in a footer with an id #page-script

and the problem I am having is this. When I load a new page, I need to add javascript to #page-script

the DOM. For example, one of the pages includes an image gallery running in a loop 2 plugin and the other is a video using a popup and I need the JS to update so the plugins can be triggered without conflicts when the user clicks on the nav to load new page. Does anyone know how to get it to work so that it removes the current #page-script

jQuery and adds new jQuery to the DOM for the plugins to work correctly?

2. The next question, when I load a new page, doubles the navigation menu. It won't be a big problem, but the navigation has a partially transparent background, and when it adds a new navigation, it makes the menu darker. Any thoughts on this as well?

I know a lot here, but everyone here is a ninja, so I know I can help.

Thanks in advance!

Jessie

+3


source to share


No one has answered this question yet

Check out similar questions:



More articles:


All Articles