Grow your CSS skills. Land your dream job.

Dealing with AJAX content

  • # March 26, 2013 at 9:07 am

    Hey,

    I am in the process of building a website that uses AJAX to load a news item into an area of the page – see: http://oandg.co.uk.s156312.gridserver.com/

    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: http://oandg.co.uk.s156312.gridserver.com/newsitem4.php

    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() {

    if(Modernizr.history){

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

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

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

    function loadContent(href){
    $mainContent
    .find(“#guts”)
    .fadeOut(200, function() {
    $mainContent.hide().load(href + ” #guts”, function() {
    $mainContent.fadeIn(200, function() {
    $pageWrap.animate({
    height: baseHeight + $mainContent.height() + “px”
    });
    });
    $(“ul.news li a”).removeClass(“current”);
    console.log(href);
    $(“ul.news li a[href$="+href+"]“).addClass(“current”);
    });
    });
    }

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

    } // 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

    Bump.

    # 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.

*May or may not contain any actual "CSS" or "Tricks".