Fade in different section with static header and footer using javascript?

Question

i was wondering how to create a dynamic website where the page layout is as follows: header, section, footer

The header and footer would always be static and when the user clicks a part of the nav e.g About Us (within the header) the section in the middle dynamically changes and fades in the About Us section.

I would like to use pure javascript if possible and without it being part server-side, I assume you would give the sections ID's and in the javascript "onClick" of the nav link, the one section would display:none and another section would display in replace of it.

I found a similar example on this website: http://www.templatemonster.com/demo/44858.html

What is the easiest way to create this effect? I have a VERY brief idea but how could you go about this?

If anyone could include a jsfiddle example, would be much apprieciated

I am not really familiar with php as i am abit of a beginner in creating less static websites. Would this not be possible using pure javascript? — Ned, Jun 24 '13 at 13:15

Hippocrates · Answer 1 · 2013-06-24T13:53:28.683

What you are looking to do is called pjax. Pjax uses XML Http requests(ajax) to load a specific piece of content into a placeholder like you are trying to do.

Someone clicks to a new page. Javascript requests this page from the server. Once loaded, optionally fade out the old content. Replace with the new content and optionally fade it in. Use pushstate to add a state to the browser history. This allows the back and forward buttons to work.

Here is a pjax library that is handy for doing this easily across new and old browsers and has a good explanation: https://github.com/defunkt/jquery-pjax

It would not be a good idea to include all of the content on one page with display:none because then it will still need to be downloaded by the browser even if the user never views it. Nevertheless, here is a JSfiddle showing this approach which is close to what you described:

http://jsfiddle.net/Tb4eQ/

//Wait for html to be loaded
$(document).ready(function(){
    //Store reference to frame to load content into in a var, as well as the content to load in.
    var $content = $('#div_1');
    var $frame = $('#my_frame');
    //Bind an event handler to the click event of something
    $('#press').on('click', function(){
        //fade out the frame, swap in the new content, and fade it back in.
        $frame.fadeOut('fast', function(){
            $frame.html($content.html()).fadeIn('fast');
        })
    });
});

Thanks for the jsfiddle! I just found this http://jsfiddle.net/bUjx7/101/ Do you know how i would make it load with the About already there? I am a complete newbie at this! trying to learn — Ned, Jun 24 '13 at 14:10

jherax · Answer 2 · 2015-04-04T01:21:16.340

You can use the jQuery method .load() which loads data from the server and place the returned HTML into the matched elements. Also the .toggle() method allows you display or hide elements.

Consider the following example: Suppose we have a page named index.html ...

<header>
  <nav>
    <ul><li id="nav-about">About us</li></ul>
  </nav>
</header>

<section>
  <article id="dynamic-viewer">
    Dynamic content will be placed here!
  </article>
</section>

<aside>
  <div id="loader" style="display:none">
    <img src="http://www.ajaxload.info/images/exemples/24.gif" />
  </div>
</aside>

... and we have another file named about.html which is just a view:

<div>
  <h2>About us</h2>
  <p>This content is placed dynamically into #dynamic-viewer</p>
</div>

Now, I will load the content of about.html into the content wrapper in index.html using the jQuery.load() method.

//Click handler to load the "about" view
$(document).on("click.about", '#nav-about', function() {
    fnShowLoading(true);

    //Loads the content dynamically
    $('#dynamic-viewer').load('views/about.html', function() {
        fnShowLoading(false);
    });
});

//Shows or hides the loading indicator
function fnShowLoading (show) {
    $('#loader').toggle(!!show);
}

Actually, the only lines that matters here are:

//loads the content dynamically
$('#dynamic-viewer').load('views/about.html', function() { });

//shows or hides the loader section
$('#loader').toggle(!!show);

score 0 · Accepted Answer · answered Jun 24 '13 at 13:16

0

You could try to use Ajax calls to partially refresh parts of the page or just load the whole thing and let jQuery handle the hiding and showing of elements on click events.

http://www.w3schools.com/ajax/

http://api.jquery.com/hide/

answered Jun 24 '13 at 13:16

Wouter van der Houven

448
3
9

Do you know how you could do this with pure javascript rather than jquery – Ned Jun 24 '13 at 13:34
You can target the element and give it a class. http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element Then use css to hide elements by that class or show them. But I have to say @Hippocrates is right about it not being smart to load content that is not being shown. – Wouter van der Houven Jun 24 '13 at 13:42
Tricky thing about using only javascript instead of jQuery is that you can have compatibility issues where jQuery is a library that already deals with those. – Wouter van der Houven Jun 24 '13 at 13:43
Thanks your right but i just found this which does it http://jsfiddle.net/bUjx7/101/ Do you know how i'd make it load with About already showing? Please please help – Ned Jun 24 '13 at 14:19
Just add: $('.infozone').fadeIn(); if targets the elements of class "infozone" and fades them in. – Wouter van der Houven Jun 24 '13 at 14:27

Fade in different section with static header and footer using javascript?

3 Answers3