Getting a DIV to auto load with jQuery.

Question

I've scratched my previous attempts at changing an ID attribute. Is there a way I can make the content below auto load if the requests === 0? Rather than having a click function.

<script language="javascript">
var requests = 10;

function request(self)
{if(self.href != "#")
requests -= 1;

if(requests === 0)

var pageid = function () {
    var thisID = null;
    $('#step').click(function () {
        thisID = this.id;
        $('#content').animate({
            height: getPageHeight()
        },
        700, function () {
            $('#next-page').fadeIn(500);
            $('#content-' + thisID).fadeIn(500, function () {});
        });
        return false;
    });
};
$(window).load(pageid);
function getPageHeight() {
    var windowHeight;
    if (self.innerHeight) windowHeight = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) windowHeight = document.documentElement.clientHeight;
    else if (document.body) windowHeight = document.body.clientHeight;
    return windowHeight;
}}
</script>

Answer 1

Try wrapping all of the code in this:

$(document).ready(function() { 
    // your code
}

When the code just runs as the page is loaded, you run into situations where the content you're looking for just isn't ready to be used (and may not even be downloaded yet). So, make sure you wait until the page is loaded before you run your code.

Edit

It may be that "$(window).load(pageid);" is just the wrong code, but you'll have to be more specific about your goals if things still don't work.

Something like this:

<script language="javascript">
var requests = 10;

$(document).ready(function() { 
  // Your code here
  // $(window).load(pageid);
});

function request(self)
{if(self.href != "#")
requests -= 1;

if(requests === 0)

var pageid = function () {
    var thisID = null;
    $('#step').click(function () {
        thisID = this.id;
        $('#content').animate({
            height: getPageHeight()
        },
        700, function () {
            $('#next-page').fadeIn(500);
            $('#content-' + thisID).fadeIn(500, function () {});
        });
        return false;
    });
};

function getPageHeight() {
    var windowHeight;
    if (self.innerHeight) windowHeight = self.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) windowHeight = document.documentElement.clientHeight;
    else if (document.body) windowHeight = document.body.clientHeight;
    return windowHeight;
}}
</script>

Answer 2

Try to use anonymous function in your load event like this:

$(window).load(function() {
   if(requests === 0) 
      pageid(); // or whatever you need
});

But first remove if(requests === 0) condition from your code.