Wait to load footer?

Discussion in 'JavaScript' started by mokimofiki, Sep 10, 2008.

0
  1. #1
    I have been looking through javascript tutorials and can't seem to figure out how to get all of my page to load and then wait a certain amount of time for the footer to load. Any help would be greatly appriciated?

    HEADER.PHP
    <html>
<head>
<title>pages title</title>
</head>
<body bgcolor="#FFFFFF" text="000000">
    Code (markup):
    BODY.PHP
    pages content....
    Code (markup):
    FOOTER.PHP
    //wait specified time then load below
<img src="footerimage.gif">
</body>
</html>
    Code (markup):
     
    mokimofiki, Sep 10, 2008 IP
  2. xlcho

    xlcho Guest

    Messages:
    532
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, you can use 

    
window.onload = function() 
{ 
   setTimeout("loadFooter()", 5000); //asuming you want to wait 5 seconds after the page has loaded
}
    Code (markup):
    Now about what loadFooter() does.. I'd do it with AJAX. Send a request for the file footer.php and then append it in the bottom of the page. Another way to do it is add the content of footer.php directly into loadFooter() (asuming the content is what you showed - plain HTML file, with no scripts or something..).
    Either way you must have something to append the content to. I suggest using a <div> at the end of the other code, which has the id 'footer'.

    Now here's the javascript example:

    
function loadFooter()
{
   document.getElementById('footer').innerHTML = '<img '+ 'src="footerimage.gif">'+
'</body>'+
'</html>';
}
    Code (markup):
    (Damn I hate concatenating javascript strings when posting :D )

    The AJAX way is something like that:
    
function loadFooter()
{
  //send the request, check the readystate, blah blah
  //and when you get the response do the fallowing
  document.getElementById('footer').innerHTML = xmlHttp.responseText; 
}
    Code (markup):
    Good luck ;)
     
    xlcho, Sep 10, 2008 IP
  3. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Or you could set the footer container's CSS visibility property to "hidden" . Then after certain number of seconds display it using your favorite library or your own JS.


    YUI example:
    
YAHOO.util.Event.onDOMReady(function() {

  var showFooter = function() {
    YAHOO.util.Dom.setStyle("footer_id", "visibility", "visible");
  };

  setTimeout("showFooter()", 5000) 
});
    Code (markup):
    Code is untested but should be at least close to working.
     
    LogicFlux, Sep 10, 2008 IP
  4. mokimofiki

    mokimofiki Well-Known Member

    Messages:
    444
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    130
    #4
    This seems to work ok for displaying the footer although I want it to wait to even run the scripts in the footer until after the designated time .... For Example:

    Page loads completly and displays then wait 10 seconds and add one page view to my database but if the visitor leaves before the 10 seconds then it will not count it as a visit.
     
    mokimofiki, Sep 11, 2008 IP
  5. LogicFlux

    LogicFlux Peon

    Messages:
    2,925
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Couldn't you just put an ajax call inside the function that gets run with settimeout after 10 seconds?

    It also depends on what the page being loaded means to you. Does every last file need to be loaded including images or does the DOM just need to be loaded and ready to manipulate, or does one particular area of the page need to be loaded?


    Here's an untested example that uses YUI and uses the event which is equivalent to window.onload, which means it will wait until everything is loaded.



    
YAHOO.util.Event.addListener(window, "load", function() {

  var addPageView = function() {

    var callback = 
    { 
      success: function () { alert('ajax successful!'); },

      failure: function () { alert('ajax UNsuccessful!'); }
    }; 

    YAHOO.util.Connect.asyncRequest('GET', 'http://www.mysite.com/setPageView.php', callback); 

  };

  setTimeout("addPageView()", 10000) 
});



Dependencies:

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js" ></script> 

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js" ></script>

<script src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
    Code (markup):
     
    LogicFlux, Sep 11, 2008 IP