Question

First post here. Hoping you guys can help. It would be much appreciated and I’m sure I’ll learn something. Also, if you see any other redundancies ontop of my problems below, feel free to rip me a new one on coding practices. I need to learn as much as I can asap. On to the problems!

I have two separate scripts that I have half-way there, but I can’t get them to function perfectly.

Up first is the “magicline” script. This animates a line underneath the nav based on what page you navigate to.

What I cannot figure out:
1) How to eliminate the extra line width caused by adding a margin-left:”” to space out the nav items.

Second, loading page content with jquery. I’d love to be able to load my 4 separate pages by just calling the content from the supporting pages section. As of right now, there are two problems. One being, regardless of what page you click on, it reloads the same content over and over. Also, even though the URL updates to the proper page, the navigation “current page” color marker doesnt follow.

To make this much easier to understand, I’ve got a live demo running here:
http://www.youngsaye.net/v2/

Any help will be greatly appreciated.

Thanks!

Answer 1

In looking over the page here’s what I’m seeing:

1) The magic line script determines the width of the underline based on the element that has the class “current_page_item”.

Since this is all javascript. You’ll want to set up your menu anchors/links to contain javascript that will update the current_page_item class to the selected item and remove it from the previous one. That should also update your highlighting issue, since it seems that’s css styled.

A basic script for this would look like this:

function updateCurrent(e) {
  $('.current_page_item').removeClass('current_page_item');
  $(e).parent('li').addClass('current_page_item');
}

And all your anchors would have an onClick that looks like:

<a href="print.html" onclick="updateCurrent(this);">Print</a>

2) I’m not fully following on the main point of your second question. Navigation looks to point to the proper content when I’m going through it.

EDIT for my added comment below:

$('#topnav li a').click(function(){
    // Update the current item.
    $('.current_page_item').removeClass('current_page_item');
    $(this).parent('li').addClass('current_page_item');

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

EDIT Part 2:
I see you’re still having issues getting the magic line to disregard your width, what you need to do is while the anchor’s are clicked, the same math you applied on initial load should be done as well.

Updated magic line js should look like:

// DOM Ready
$(function() {

$("#topnav").append("<li id='magic-line'></li>");

// get the left margin of current page item
var marg = parseInt($(".current_page_item a").css("marginLeft"));


/* Cache it */
var $magicLine = $("#magic-line");

$magicLine
    .width($(".current_page_item a").width())
    .css("left", $(".current_page_item a").position().left + marg)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

$("#topnav li").find("a").click(
    $el = $(this);
    // Do the math for each click
    leftPos = $el.position().left + marg;  
    newWidth = $el.parent().width() - marg;

    $magicLine.stop().animate({
        left: leftPos,
        width: newWidth
    });
}, function() {
    $magicLine.stop().animate({
        left: $magicLine.data("origLeft"),
        width: $magicLine.data("origWidth")
    });    
});

/* Kick IE into gear */
$(".current_page_item_two a").mouseenter();

});