HTML5 loading a content into a main view wrapper?

Question

I am no stranger to front-end development, but I have come across a requirement by a client which I have never done before, and I would appreciate it if someone can point me int

Answer 1

I'm not clear about what part you're having trouble with. Are you able to use ajax to dynamically load the content? Something like this (http://api.jquery.com/jQuery.ajax/):

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('#mycontent').html(data);
  }
});

If you aren't allowed to use ajax, how about an iframe and using the target attribute on yoru links?

Or are you just having trouble with the CSS and getting the dynamic content to overflow correctly?

Answer 2

If you're populating all the section-s on your page you can try this - http://jsfiddle.net/Fyhm7/

HTML

<a href="#" data-section="#home">Home</a>
<a href="#" data-section="#products">Products</a>
<a href="#" data-section="#contact">Contact</a>

<section id="home">Home</section>
<section id="products">Products</section>
<section id="contact">Contact</section>

JS

$("a").on("click", function() {
    var id = $(this).data("section");

    $("section:visible").fadeOut(function() {
        $(id).fadeIn();
    });
});

Answer 3

Here's another suggestion, using CSS3 (I know this can be improved, but I'm just doing this quickly to give you the idea).

This assumes the content is already loaded. If you are loading through AJAX, I would do it differently.

HTML

<nav>
  <a href='#content1'>Content 1</a>
  ...
  <a href='#content7'>Content 7</a>
</nav>
<article id='main-content-wrapper'>
  <section id='content1'>content 1</section>
  ...
  <section id='content7'>content 7</section>
</article>

CSS

#main-content-wrapper{ 
  max-height: 30em; /* arbitrary for example only */ 
  overflow:auto; /* scroll if over max-height */
}
#main-content-wrapper section:not(:first-child){ display:none; }
#main-content-wrapper section:target{ display:block; }

JavaScript (if you don't want the CSS3 :target - I haven't tested this)

var id = location.hash.replace('#','');
if( id.length > 0 ){
  var sections = document.getElementById('main-content-wrapper').getElementsByTagName('section');
  for( var i = sections.length-1; i >= 0; i-- ){
    sections[i].style.display = 'none';
  }
  document.getElementById(id).style.display = 'block';
}

JQuery version

if( location.hash.length > 0 ){
  $('#main-content-wrapper content').hide();
  $(location.hash).show();
}