7

HTML5 loading a section & lt; & Gt; contained in a main view envelope?

 3 years ago
source link: https://www.codesd.com/item/html5-loading-a-section-contained-in-a-main-view-envelope.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

HTML5 loading a section & lt; & Gt; contained in a main view envelope?

advertisements

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'.

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();
    });
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK