Home/ Questions/Q 7401881
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:35:42+00:00

My website structure is a header, content, footer. My goal is that every time

  • 0

My website structure is a header, content, footer. My goal is that every time the visitor clicks on the links, only the “content” part loads, everything else stays the same.

I don’t know what is the best practice to reach this effect I read a lot on the web, I found some examples for iFrames and or jquery/css/ajax, but I can’t make up my mind what to use.
(The content on the website, that would be changing, would be all sub pages of my website, hence I thought iFrames is not the tool I need, but correct me if I am wrong.)

The “content” of the page consist of a white background and a layer above it, that are pictures / text.

What I want to achieve is whenever the visitor clicks a link, the content layer of text / pictures “fades out”, the white background re sizes to a new size of the sub page, then the new content of the sub page fades in.

The “fade in, fade out” is implemented already:

$(document).ready(function() {
$("#valtozo").css("display", "none");
$("#valtozo").fadeIn(2000);
$("a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#valtozo").fadeOut(1000, redirectPage);
});
function redirectPage() {
    window.location = linkLocation;
}

});

“valtozo” is the id of the changing div.

For the smooth re-size of the transition of the white background I thought I use this:
jQuery Animation – Smooth Size Transition

I would like to hear your thoughts / ideas what to use to achieve frames like functionality while keeping all visual effects, mentioned above.

Sorry for long post, thanks in advance.

(Btw if u have better ideas, more compact or better, fire away, nothing is set in stone!)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use defunkt’s pjax.

    pjax loads HTML from your server into the current page without a full reload. It’s ajax with real permalinks, page titles, and a working back button that fully degrades.

    You will need to implement a server-side component that send you only the content of the page, without all the menus and stuff. Then it’ll work.

    Sample code

    Not fully tested, please comment whether or not it works. To test it, make sure it’s done over HTTP (not file://) – at least when using Chrome.

    Check the jsFiddle example with a fake request and alerts showing triggered events.

    In index.html 

    <html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js"></script>
    <script type="text/javascript" src="pjax-fade-click.js"></script>
  </head>

  <body>
    <div id="valtozo">
      This will be replaced.
    </div>

    <a href="news.html" data-pjax="#valtozo">Show news</a>
  </body>
</html>

    In news.html (should check for pjax to enable/disable menus) 

    <h1>News!</h1>

    In your pjax-fade-click.js

    $('a[data-pjax]').pjax();

$('body')
  .bind('pjax:start', function(event, xhr, options) { $(options.container).fadeOut("fast"); })
  .bind('pjax:end',   function(event, xhr, options) { $(options.container).fadeIn("fast"); });

    Then create all your html pages as you normally would, but don’t show menus when you receive the header 'X-PJAX' or querystring _pjax=true.

    javascript pjax

    Edit 1

    Didn’t double check the pjax version on the pjax demo site – turns out it was old. Now using the raw version of jquery.pjax.js straight from github, but it should be loaded from somewhere else. Also added the jsfiddle.

    • 0