Tuesday, September 10, 2013

Load content with no page refresh while chaning the URL

Load content with no page refresh while chaning the URL

I would like so help with a problem that I am having. I have a website
that I built and below the text on the menu I would like to have a slider.
Like this: DEMO (I didn't write this code and I don't remember where I
found it.)
The Javascript code.
$('li').click( function() {
$('.active').removeClass('active');
$(this).addClass('active');
var top = $(this).offset().top + $(this).height() + 10;
var left = $(this).offset().left;
$('#marker').stop().animate( { top: top, left: left }, 400 );
});
$('li:first').trigger('mouseover');
$('#marker').fadeIn();
That is just a rough idea of what I the navigation menu would look like.
The problem I am having is that I want to have the slider on my website
(but I'll make it so it looks better) and the problem is that when you
click one of the links (e.g. the home button) it will load the new HTML
file and that will couse the slider to not slider smoothly. You won't see
the sliding animation just that the slider change place when you are on
the different pages.
I tried to solve this problem with frameset (frameset) and it worked but
the problem is that frameset couses the URL to not update, and I hate that
so that's not the way I'll solve this problem.
The help I need from you guys is how I could solve this problem. I have
been looking around for a solution but I haven't found any, but I think
that I need to use either JQuery or Javascript.
If you don't have the time to read:
I want a solution on how to make a website that loads content when you
click the menu buttons and not re-loading the whole page, only re-loading
the section where you load in new content. All that and it updates the URL
(e.g. if you're on the home page it would say /home.php and if you're on
the about page it says /about.php and so on and so forth).
Thanks in advance. // DeeLaY

No comments:

Post a Comment