Page layout changes slightly, no style changes
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 embed them, as well as what is currently going on. Everything works in all existing browsers (except IE, but I'll be working on that in the future).
However, in my nav menu, on the first (and only first) page change, a strange step appears. After the page has changed once, the distance between the navs remains the same.
- Loading the page
- After clicking the link
When a link is clicked, the navigation section of the new page is set to replace the current navigation, since each link has a data offset attribute that is computed on the server, so javascript knows which direction and how far to move the elements when clicked.
The way I am doing it now is either [content width] or - [content width].
However, the menu structure never changes and the stylesheet is completely static. I have checked all these elements in Firebug and nothing changes on page load.
I linked the site, http://next.randolphwebdevelopment.com above, but I'll copy some of the relevant Javascript here to give an idea of what's going on.
Will pull the entire page down so that the link is redirected (if not 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 landing page (all that really changes is the data offset attribute for each link):
//insert the new navigation
$('#header-content nav').html(next_page.find('#header-content nav').html());
$('#header-content nav a').click( navigation_clickHandler );
It really is. There's a bunch of code in there for inserting new content and pasting it in, and changing the page title, setting history states, etc., but that's the only code that touches the navigation menu, and there isn't any code that touches any stylesheets.
I am open to any suggestions that fix the problem and / or improve the design of the code.
source to share