Grow your CSS skills. Land your dream job.

Dynamic Reload – current class not being added

  • # June 13, 2012 at 3:15 pm

    http://people.ysu.edu/~jtpenezich/lasik/#index.html

    Site I am working on. I changed the java script minimally so it uses the hide instead of fade animation because having multiple fade outs made things flash and look clunky. Site is coming along fine however the java script for the current page is not working correctly.

    $(function() {

    var newHash = "",
    $mainContent = $("#main-content"),
    $pageWrap = $("#page-wrap"),
    baseHeight = 0,
    $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
    });

    $(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
    $mainContent
    .find(" #guts, #eye, footer ")
    .hide(300, function() {
    $mainContent.hide().load(newHash + " #guts, #eye, footer ", function() {
    $mainContent.show(300, function() {
    $mainContent.animate({
    });
    });
    $("nav a").removeClass("current");
    $("nav a[href="+newHash+"]").addClass("current");
    });
    });
    };

    });

    $(window).trigger('hashchange');

    });

    I did not change it from the downloaded code, but if you open the site and click on the navigation, the class current does not get added. It does show when you click down on the mouse, but disappears as soon as you release. The css for .current is just a simple background change and color. I made sure spelling was correct, so not sure what I have to do to get it working.

    # June 14, 2012 at 12:44 pm

    Still haven’t figured this issue out if anyone can find what I did wrong.

    Edit: I think this is easily the most frustrated I’ve been. I see nothing wrong but it just wont work. Anyone who can solve it gets brownie points.

    # June 19, 2012 at 7:22 pm

    So I just tried switching the main-content with a wrap above it that wraps the nav with no success. Also tried adding “#page-wrap #main nav a” to the script for a more absolute path with no success. I also tried the original code with no changes with no luck either.

    Dont see anything apperently wrong with the HTML and I have the .current class set up in the CSS. The only thing that is currently activating what should be the “current” class is the “nav ul li a:active” line, which presents itself when you click down on the mouse.

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

You must be logged in to reply to this topic.

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