CODEWITHSUNDEEP
jqueryhtml
Forb3s
Forb3s

Reputation: 37

Assistance with better Jquery Navigation

I've been trying to use Jquery as a means of site navigation, but I'm having some trouble attaching page references to the url. I had two main goals in mind when deciding to use Jquery...

Goal 1: I'd like to have a single index.html page which uses Jquery to hide & show different elements when triggered (via a link). - done (over-engineered...but done none the less).

Goal 2: I'd also like those different pages to be attached to the URL so they can be directly linked to (or when a refresh happens it does not default to the initial page).

Here is a JSFiddle example that shows how I'm currently implementing my Jquery for the different pages. I was hoping someone might be able to lend some insight into how I get the pages (represented as multiple divs) to attach to the URL.

Example of my code:

HTML

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>


<div id="wrapper">

<div id="nav">
    <ul>
        <li><a href="#" id="projects-link">Projects</a></li>
        <li><a href="#" id="about-link">About</a></li>
        <li><a href="#" id="contact-link">Contact</a></li>

    </ul>


</div>


<div id="main-area">  


    <!-- Content 1 page -->    

    <div id="content-1" class="content-area">

    Content 1 - Main content


    </div>


    <!-- Content 2 page -->

    <div id="content-2" class="content-area">

        Content 2

    </div>


    <!-- Projects page -->
    <div id="projects" class="content-area">
        Projects
    </div>


    <!-- About page -->
    <div id="about" class="content-area">
        About
    </div>

    <!-- Contact page -->
    <div id="contact" class="content-area">
        Contact
    </div>



</div>

Javascript

$(document).ready(function() {
$(".content-area").hide();
$("#content-1").show();

$("#projects-link").click(function() {
    $(".content-area").hide();
    $("#projects").show();
});

$("#about-link").click(function() {
    $(".content-area").hide();
    $("#about").show();
});

$("#contact-link").click(function() {
    $(".content-area").hide();
    $("#contact").show();
});

});

Upvotes: 0

Views: 141

Answers (2)

lsuarez
lsuarez

Reputation: 4992

I'd recommend restructuring how you handle the entire scenario a little bit. First of all, you've got your links all set to empty hashes. How about setting them to the ID of the content you'd like to display? Turns out location.hash will make a convenient selector for you once you do. You can bind to the window's hashchange event and trigger it manually on first-load to display the content you're looking for like so:

$(window).on("hashchange", function(e) {
    $(location.hash.length > 1 ? location.hash : "#home").siblings().hide().end().show();
}).trigger("hashchange");

You'll notice that if the hash actually has a length longer than "#" I attempt to find the element with the matching ID (otherwise I find the element with ID "home"), hide its siblings, then display the requested content.

Check out this fork of your fiddle and notice the changes to the URL in the anchors and how they correlate to the IDs of your content elements. The benefit of forcing the hashchange event to fire once on page load is that if someone navigates in to the page at index.html#contact, the event handler will immediately evaluate and find that the container with ID "contact" should be displayed.

Upvotes: 1

r043v
r043v

Reputation: 1869

for the url change have a look at "location.hash" you can write it on page change and read it on page load also you can check it with change event (or timer for old nav) for manage previous next buttons

for your jquery code, try write it more global, exemple :

$("#nav a").click(function(event)
{    var id = $(this).attr("id");
     var content = $("#content-"+id);
     $("#main-area > div").not(content).hide();
     content.show();
     event.preventDefault(); // no real click please
});

not forget the event.preventDefault, else your location.hash will be overwrited with the # of the link

Upvotes: 0

Related Questions