1

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 into the right direction.

I have 7 <section> tags within my index.html. Each section represents one of the site navigation link. so "Home" link will show "home section" and so on. And the requested section gets populated in the main-content view/wrapper.

Usually, I will employ a MVC framework to get this functionality going. However, I am asked not to implement MVC. My thoughts were to find out which navigation link was clicked and then load the particular section into the main-content-wrapper.

How can I make this happened so that main-content-wrapper's height is adjusted accordingly, and there is a browser scroll bar if needed? Because some sections have a lenghty content.

By the way, main-content-wrapper' overflow has been set to 'auto'.

j08691
  • 204,283
  • 31
  • 260
  • 272
Combustion007
  • 474
  • 1
  • 13
  • 30

3 Answers3

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();
    });
});
Zoltan Toth
  • 46,981
  • 12
  • 120
  • 134
  • @Zoltan--thank you for all your help. I appreciate the fiddle, it has helped a lot. What would I need to get this working on IE9? Thx a lot – Combustion007 Jul 27 '12 at 18:54
  • You might want to replace the `section` tags with `div`-s - http://jsfiddle.net/Fyhm7/1/ The JS should work as is – Zoltan Toth Jul 27 '12 at 18:56
  • thank you for your help. I will highly appreciate it if you can shed some light on this. Lets say I am on "products section", and I copy that url and email it to someone. And if that someone clicks on that link, will the be directed to the "production section"? Thx – Combustion007 Jul 27 '12 at 21:23
  • Nope, it won't work out of the box. But it's really easy to achieve - http://stackoverflow.com/q/1822598/1499781 – Zoltan Toth Jul 27 '12 at 22:15
0

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?

Nogwater
  • 2,777
  • 3
  • 28
  • 28
0

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();
}
Tom Pietrosanti
  • 4,184
  • 2
  • 24
  • 29