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
    Layout differences
  • 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.

+3


source to share


1 answer


First loaded nav

from the server without php. I bet you wrote this html by hand with intent etc.

After any click, js will recreate nav

but now without empty text nodes. Simple <a>link1</a><a>link2</a>

.



Add spaces or remove them from the original html.

0


source







All Articles