Dynamic Page Replacing Content

[heyes]

As a non-coder, I’ve been reading the article at https://css-tricks.com/rethinking-dynamic-page-replacing-content/.

Much of it is beyond my understanding, and I’m wondering if anyone can help with a simplified variant which simply changes the content within a named div and doesn’t have the fancy effects.

Please, thanks, etc.

[Shikkediel]

Should this content come from an external source or could it be placed on the same web page already (but hidden)?

[heyes]

The content is onsite.
If my understanding is correct, rather than load content which is progressively revealed, I want to load fresh content/pages into a specific div, rather than having the browser refresh everything.

The reason for this is that it’s for a radio site, and thus a player can be pinned to the foot of the viewport and continue playing with page-changes rather than be interrupted.

[Shikkediel]

This sounds like something to be approached with Ajax. It can load web content and insert it without refreshing the page. You’d need to add jQuery to the page for that, the most basic form of this behaviour is .load(). Say you have a parent div #parentand an external file called newstuff.html. Then it would be something like :

$('#somebutton').click(function() {

    $('#parent').load('newstuff.html');
});

http://api.jquery.com/load/

[heyes]

Thanks.

I need to look at this when I have time.

What I like about the original example at at https://css-tricks.com/rethinking-dynamic-page-replacing-content/ is that the url and back buttons all work as if it was a straight link.

[Shikkediel]

Those are perks that could be added (although it’s tricky) but the .load() method is the actual basis of it all…

[Author]

Posts