-2

http://www.cincinnatiburgerweek.com/

http://www.cincinnatiburgerweek.com/#!drakes/oot2t

Based on these 2 links, how can you have your main page and then when you click on a restaurant it isn't a separate URL? It instead goes to an anchor link to the right of the main page. How is this possible using css to have the main page fit the width of a browser with this anchor location off to the the right?

Huangism
  • 16,278
  • 7
  • 48
  • 74
camdixon
  • 852
  • 2
  • 18
  • 33

2 Answers2

-1

You are looking for Single Page Applications (SPA).

The page does not reload at any point in the process, nor does control transfer to another page, although the location hash can be used to provide the perception and navigability of separate logical pages in the application, as can the HTML5 pushState() API.

To answer your question, basically, the steps are:

  1. Prevent page redirect.
  2. Update browser state (simulating the new page).
  3. Dynamically load the related content.

Superficially, should be like:

var linkAbout = document.querySelector('a[href="/about"]');

linkAbout.addEventListener('click', function (e) {
  // Prevent page redirect.
  e.preventDefault();
  // Update browser state.
  var stateObj = { foo: "bar" };
  history.pushState(stateObj, 'About page', '/about');
  // Dynamically load the related content. 
  // Here you will need to send some asynchronous (ajax) request 
  // to the server, get the content and put it on the current page.
  var container = document.querySelector('#container');
  var content = getContent('/about');
  container.innerHTML = content;
});

Obviously this is a summary and there are many things about this approach that was not mentioned here.

You can find many libraries and frameworks that can help to build web apps by using this modern approach.

Alexandre Thebaldi
  • 4,546
  • 6
  • 41
  • 55
  • If I wanted to try this, say for example do I need to use PHP as well or just HTML as a basic building block? Is there a framework / library for HTML or PHP that you particularly like to help you do this? – camdixon Jul 18 '16 at 18:44
  • 1
    Depends, if your website should be dynamic you will need to integrate the server-side (php) with front-end. The most famous framework is AngularJS but I recommend you look for that best fits your project. See http://stackoverflow.com/questions/14336450/javascript-spa-frameworks-single-page-application and http://noeticforce.com/best-Javascript-frameworks-for-single-page-modern-web-applications – Alexandre Thebaldi Jul 18 '16 at 19:17
-1

Basically, they are using JavaScript to...

  • capture the event [click, touch etc.]
  • locate the element with that #id selector (held in a data attribute in this case, compared to just placing the #id in the href)
  • smoothly transition to that location on the page (the element with that #id selector)

A simpler example...

https://css-tricks.com/snippets/jquery/smooth-scrolling/

Concerning positioning on the page, they are just using fixed positioning which removes the element from normal document flow and positions it relative to the window (viewport). They are using a handy little trick to center it vertically some call absolute centering.

Kenneth Stoddard
  • 1,409
  • 11
  • 13