Forums

kgscott284

Essentially I am just trying to avoid using duplicate code over and over, I am trying to eliminate the need to do the following for each page on the site...I honestly don't HAVE to, but i really want to learn how.


$('.contentWrap').hide();
$('.navigation #home').click(function(e) {
    e.preventDefault();
    // some code here to hide the page if it is open...
    $('.contentWrap').load('home.html', function() {
        $(this).fadeIn('slow');
    });
});
$('.navigation #about').click(function(e) {
    e.preventDefault();
    // some code here to hide the page if it is open...
    $('.contentWrap').load('about.html', function() {
        $(this).fadeIn('slow');
    });
});

.....and so on and so on...

Thanks guys, i really wanna fix that garbage.

karlpcrowley

Instead of preventing the hashchanged why not listen for it?
that way people can link to the page

$(window).bind('hashchange',function() {
    if(window.location.hash) {
        var html = window.location.hash.substr(1) + ".html";
    } else {
        var html = "default.html";   
    }
    $('.contentWrap').load(html, function() {
        $(this).fadeIn('slow');
    });
}).trigger('hashchange');

kgscott284

I like the concept, however, i am having an issue implementing...apparently my basic understanding isn;t enough, I am also using the "supersized" full screen slider plugin, when i attempt to implement your code, it breaks itself and the slider...obviously, i am doing something wrong lol...not sure what *google searching*

Johnnyb

Couldn't you just grab the ID from whatever button's clicked like so...

$('.navigation a').click(function(e) {
    e.preventDefault();
    var $self = $(this);
    // some code here to hide the page if it is open...
    $('.contentWrap').load($self.attr('id') + '.html', function() {
        $(this).fadeIn('slow');
    });
});

So long as the anchor id matches the html file name then it should load in that file. I prefer Karl's method though so that you can link to that page directly.

kgscott284

I don't know wtf i did...I had a complete melt down over this last night and now my original code doesn't even work >:(

Can someone toss an example up of how to implement it? Like i said, when i try it makes me want to kill myself, the damn thing breaks the slider plugin every time...

*pulls out hair* thanks guys.

kgscott284

Okay, so, made a little progress, again it is in my understanding of implementation...I went through the jQuery documentation to no avail, I tried many different things to get to where i am, got my code all fixed, and figured out that the code @karlpcrowley gave me was breaking the jquery ( in the same doc i used .hide() to hide the contentWrap element...it worked without karl's code, then it broke with it...which brings me back to the original problem, I don;t know wtf i am doing wrong, but it is in the implementation.

here is what i tried




$(function() {
    $(".contentWrap").hide();
});
$(window).bind('hashchange',function() {
    if(window.location.hash) {
        var html = window.location.hash.substr(1) + ".html";
    } else {
        var html = "default.html";   
    }
    $('.contentWrap').load(html, function() {
        $(this).fadeIn('slow');
    });
}).trigger('hashchange');

and




$(function() {
    $(".contentWrap").hide();

$(window).bind('hashchange',function() {
    if(window.location.hash) {
        var html = window.location.hash.substr(1) + ".html";
    } else {
        var html = "default.html";   
    }
    $('.contentWrap').load(html, function() {
        $(this).fadeIn('slow');
    });
}).trigger('hashchange');
});

also, how would i set up my navigation anchors? would it be as i normally would? and i think i just realized that your code uses the hashchange plugin, as outlined in the loading dynamic content tutorial by @chriscoyier .....which i also tried to follow but am too mental to figure it out at this point and time.

kgscott284

Solved it on my own, thanks guys :) its amazing what a little patience will do.

treehouse : what would you like to learn today?

Forums

[Solved] How can i simplify my ugly jQuery? (code included lol)