Grow your CSS skills. Land your dream job.

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

  • # May 18, 2012 at 10:29 pm

    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.

    # May 18, 2012 at 10:40 pm

    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');​
    # May 19, 2012 at 1:30 am

    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*

    # May 19, 2012 at 1:56 am

    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.

    # May 19, 2012 at 4:44 pm

    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.

    # May 19, 2012 at 5:14 pm

    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.

    # May 19, 2012 at 6:42 pm

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".