Question

I have a site that is utilizing full width background images as well as dynamically sized divs for single page smooth scrolling.

The link is http://teneo.telegraphbranding.com/.

I want to load about.php via ajax so that the sidebar doesn’t have to reload, but I’m not having any luck.

When you click on ‘About’ in the sidebar the about page is not rendering correctly. It seems like the containers are ignoring the jquery. They should butt up next to the side bar but not go past it, except for the underlying background image.

Im loading the page with this script:

$(document).ready(function () {
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        $('#index-wrap').load('about2.php');
    });
});
});

Also, it isn’t loading a couple of divs that don’t have any content but have background images and are supposed to fill the screen.

$(document).ready(function () {
var snapshotWrap = $('#snapshot-wrap');
var w = $(window);
w.bind('load resize',function() {
    snapshotWrap.css({ width:w.width(), height:w.height()});
});

});

$(document).ready(function () {
var snapshotContent = $('#snapshot-content');
var w = $(window);
w.bind('load resize',function() {
    snapshotContent.css({ width:w.width() - 205 });
});

});

Am I correctly using jquery/ajax to load the page?

Answer 1

When you load elements of a page with ajax, in order for jquery to use those elements, you have to attach event handlers to those new elements after they have loaded. Look up the documentation for .on() to see how to do this, it will be clear once you’ve read that page. If you get stuck again, be sure to make a new question.

So instead of using the .click() function you might say:

$("#object").on("click", function(event){
alert($(this).text());
});