Dynamic Content Swap via AJAX

Question

Only this much now: I'm creating a vcard design for myself. My motivation is to make it look as good as possible. I want to apply to a webdesign company with this vcard to get a professional education for webdesign.

I still have a lot to change till it completely fulfills in my requirements, but this is my current version of the design I just uploaded to get you an overview over the design.

So as you can see it's focused on retro, vintage, ribbons and scetch elements.

Right know I want to get rid of these jerking content refreshs. So I thought a dynamic content swap via ajax and jQuery would be the best way to do it.

I never did much with js or actually ajax.

I want to ask you guys about a solution you think benefits in my design. I was thinking about something smoothly.

The content which needs to be changed is placed in

<nav>
(...)
<ul class="ribbon s"><!--Following links got the class="ribbon b/p/l/k"-->
 <li class="ribbon-content"><a href="?content=main">Link</a></li>
 <!--
 ?content=blog
 ?content=portfolio
 ?content=lebenslauf
 ?content=kontakt
 -->
</ul>
(...)
</nav>
<section id="content">
 <div class="con clearfix">
 (...)
 </div><!--An empty div for possibly swapping without touching the vintage paper thing -->
</section>

http://robert-richter.com/boilerplate/

Answer 1

for example use jquery.

first add jquery to your html. within the domready-event you can register click events on your ribbon-menue. on each click you load the div-content from the given link-url in the html-part.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$.ready(function(){
    $(".ribbon-content a").on("click", function(event){
        event.preventDefault();
        $(".con").load($(event.target).attr("href"), function(){
            // add code after loading - for example change classes of menue
        })
    });
})
</script>

additionly you can the the browser-history to enable the prev- and next-buttons of the browser.