Geek Answers Handbook

Loading jquery content in div and magicline

First post here. Hope you guys can help. It would be very grateful, and I am sure that I will learn something. Also, if you see any other problems related to my problems below, feel free to rip me new information about encoding methods. I need to learn as much as I can. About the problems!

I have two separate scenarios that I have halfway, but I cannot make them function perfectly.

First of all, this is the "magic line" script. This animates the line below the navigation based on the page you are going to.

What I can’t understand: 1) How to eliminate the extra line width caused by the addition of the margin-left:: field to free the navigation elements.

Secondly, load the contents of the page using jquery. I would like to be able to load 4 separate pages simply by invoking content from the sub pages section. There are currently two problems. One of them, no matter which page you click on, reloads the same content again and again. In addition, although the URL is being updated on the corresponding page, the colored navigation marker "Current Page" should not be.

To make this much easier to understand, I have a demo here: http://www.youngsaye.net/v2/

Any help would be greatly appreciated.

Thanks!

+4
source share
2 answers

Looking at the page here, what I see:

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

Since this is all javascript. You will want to configure the bindings / links in the menu to contain javascript that will update the current_page_item class to the selected element and remove it from the previous one. This should also update your highlighting problem, as it seems that CSS is created.

The main 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 will have onClick, which looks like this:

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

2) I do not fully follow the main question of your second question. The navigator looks at the right content when I experience 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 that you are still having problems so that the magic line ignores your width, what you need to do is that while the snap button is pressed, the same math should be done that you applied at boot time.

The updated js magic line should look like this:

 // 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();

});

+1
source

For your first problem, we need to do a little extra math in magic so as not to include margin.

 // get the left margin of current page item var marg = parseInt($(".current_page_item a").css("marginLeft")); $magicLine .width($(".current_page_item").width() - marg) .css("left", $(".current_page_item a").position().left + marg)

We simply subtract the margin from the width and add the margin to the left offset so that it still lines up. You need to either make it reusable (that is, put it in a function and call it when you click on your elements), or change the code in the click event to do the same. (I recommend the first, for no real reason, to have the same code in two places)

The logic you want to follow is (something):

  • Page loading: add a magic position.
  • Line of magic with .current_page_item
  • Bind #topnav li a click
    • Animate the magic line for the clicked element a .
    • Remove all instances of .current_page_item .
    • Add the current_page_item class to the clicked element a .
+1
source

More articles:


All Articles