Question

I am redesigning my personal / development website, and trying to make it as user friendly as possible.

I wanted to load new pages with AJAX and slide them in, and that’s what’s currently happening.
Everything works in all current browsers (except IE, but I’ll work on that in the future).

However, there’s a strange spacing jump in my navigation menu on the first (and only first) page change. After the page changes once, the navigation spacing stays the same.

• On page load
  
• After a link is clicked

When a link is clicked, the navigation section from the new page is set to replace the current navigation, because each link has a data-offset attribute that’s calculated by the server backend so that the javascript knows which direction and how far to slide the elements when they are clicked.

The way I’m currently doing it, it’s either [the content width] or –[the content width].

However, the structure of the menu never changes, and the stylesheet is completely static. I have inspected all of these elements in Firebug, and nothing changes across page loads.

I linked the site, http://next.randolphwebdevelopment.com above, but I’ll copy some of the pertinent Javascript here to give an idea of what’s happening.

---

Pulls the entire page down that the link would redirect to (unless specified, all future code blocks are also inside this callback):

$.get( loc, function( data ){
    //delete the doctype declaration
    data = data.split("\n").slice(1).join("\n");
    next_page = $(data.replace(/(\r\n|\n|\r)/gm,"").replace(/>\s*</gm,'><'));

Replaces the navigation with the new navigation from the target page (all that really changes is the data-offset attribute on each link):

//insert the new navigation
$('#header-content nav').html(next_page.find('#header-content nav').html());
$('#header-content nav a').click( navigation_clickHandler );

---

That’s really it. There’s a bunch of code to insert the new content and slide it in, as well as changing the page title, setting history states, etc., but this is the only code that touches the navigation menu, and there’s no code that touches any stylesheets.

I’m open to any suggestions that fix the problem and/or improve the code design.

Answer 1

At first load nav is got from the server w/o php. I bet you wrote this html manually with intendation and so on.

After any click js recreates nav, but now w/o empty text nodes. Just <a>link1</a><a>link2</a>.

Add spaces or remove them from source html.