Get a free trial // Grow your CSS skills // Land your dream job

Dealing with AJAX content

  • # March 26, 2013 at 9:07 am


    I am in the process of building a website that uses AJAX to load a news item into an area of the page – see:

    If you go to the news section and click a news item it successfully loads. It does however make the list of news items move to the left briefly which i’m not sure how to get rid of?

    I also would like to make it possible so that if the client gives someone a direct url to a news item it loads the website with the content inside it. At the moment if you go to a direct link it just goes to the page which holds the content:

    I’m not even sure if holding content for each news item in separate pages is the right way to go about things as this will eventually be controlled by a CMS. Help!

    # March 26, 2013 at 7:25 pm

    You can change the float:left; to float:right; on line 293 of style.css to stop the news menu sliding over on change,

    Could you post the UNMINIFIED contents of dynamicpage-ck.js so we can take a look at the other problem?

    # March 27, 2013 at 4:29 am

    Yeah sure its:

    $(function() {


    var newHash = “”,
    $mainContent = $(“#main-content”),
    $pageWrap = $(“#page-wrap”),
    baseHeight = 0,

    baseHeight = $pageWrap.height() – $mainContent.height();

    $(“ li”).delegate(“a”, “click”, function() {
    _link = $(this).attr(“href”);
    history.pushState(null, null, _link);
    return false;

    function loadContent(href){
    .fadeOut(200, function() {
    $mainContent.hide().load(href + ” #guts”, function() {
    $mainContent.fadeIn(200, function() {
    height: baseHeight + $mainContent.height() + “px”
    $(“ li a”).removeClass(“current”);
    $(“ li a[href$=”+href+”]”).addClass(“current”);

    $(window).bind(‘popstate’, function(){
    _link = location.pathname.replace(/^.*[\/]/, ”); //get filename only

    } // otherwise, history is not supported, so nothing fancy here.


    # March 27, 2013 at 10:47 am

    I have also noticed that it seems to reload the content every time you click the News section which is annoying!

    # March 28, 2013 at 10:00 am


    # March 28, 2013 at 12:35 pm

    You could handle the direct url’s but i’d be tempted to spend the time implimenting the CMS rather than fixing what is essentially going to be replaced ?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed