0

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

DeeLaY
  • 33
  • 3
  • 7
  • onpopstate and pushState – Roko C. Buljan Sep 10 '13 at 17:40
  • window.location.href = "your new URL"; Reloads the whole page, but if you use the »hash« only than it works. – philipp Sep 10 '13 at 17:54
  • no, window.location will change the physical browser location. He wants ajax AND to update the url. Look into jquery .address. here is an example question: http://stackoverflow.com/questions/1955978/jquery-address-how-do-you-use-it – Kai Qing Sep 10 '13 at 17:56
  • " a solution on how to make a website that loads content when you click the menu buttons (...)" --> **Hire a coder dot com ?** – Milche Patern Sep 10 '13 at 18:00

2 Answers2

2

What you need is a combination of HTML5 History API (pushState) and AJAX.

Simple jQuery AJAX (GET): http://api.jquery.com/jQuery.get/ About manipulating history: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Here's a rough getting started tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/a-first-look-at-the-history-api/

And here's a working demo of what you're asking for: http://html5demos.com/history

Edit: Fixed last link.

Matt Kenefick
  • 1,173
  • 1
  • 13
  • 22
  • Thank you so much, I will dig into this when I have the time. And BTW demo that you linked doesn't work. And you said that I need AJAX, but when do I need it? The link you linked was only about HTML5 or am I wrong? – DeeLaY Sep 10 '13 at 18:10
  • I think you'll find it gets complicated to perfect, after reading your framesets comment. AJAX is used to fetch new content/HTML from the server. Usually that happens automatically when you click a link, but since you'll be preventing that in order to prevent the refresh, you have to fetch it somehow. As you've discovered, targeted iframes/frames work as well. A lot of people use AJAX calls to fetch/replace markup. – Matt Kenefick Sep 10 '13 at 18:39
  • With some Javascript bindings/listeners, you might be able to make the iframe targeting work with the history API. You'll just need to make sure you load the correct URL into the frame upon load of the site and listen for `popState` events in order to change the iframe when user hits the back button. – Matt Kenefick Sep 10 '13 at 18:41
-1

you can use a method that is present in jquery or just javascript( ajax) and load you page depending on the event that you want to associate it with example 

$("buttonX").click(function(){

    $('#container').load('pageX.html');
});
user1825286
  • 211
  • 1
  • 9