SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Problem running two 'addLoadEvent' calls in IE < 9

    I've been using the well-loved 'addLoadEvent' function to run JS functions on page load for some years, without any problems at all. In a new site I'm trying to run TWO functions on load:
    Code:
    <script >
    	addLoadEvent(setSlideLinks('img/'));
    	addLoadEvent(setDivBg('main','orangebg'));
    </script>
    No problem in Firefox8, but I've got a problem in IE7 (and IE8, but not IE9). IE7 will run whichever of those functions I place first, and ignore the second.

    'setDivBg' sets a coloured background on the included contents. It's different for every page as I want my client to see some alternatives. It's preferable that it runs before 'setSlideLinks' which is setting up eventhandlers for the slide-shows. But I need both to work.

    Two things are different from my normal practice:
    1. For the first time (for me) I've put parameters into the function calls in 'addLoadEvent', and
    2. The script is placed at the bottom of an included 'page contents' file because the parameters for the 'setDivBg' function vary from page to page. Normally I place 'addLoadEvent' in the template header.
    The 'addloadEvent' function is completely standard:
    Code:
    	function addLoadEvent(func) {
    		var oldonload = window.onload;
    		if (typeof window.onload != 'function') {
    			window.onload = func;
    		} else {
    			window.onload = function() {
    				oldonload();
    				func();
    			}
    		}
    	}
    The site (still in development) may be seen here
    I can't see why this should make IE7 choke, and I am continuing to investigate; maybe it's just one of those things about IE. Can anyone help here, please ?
    Tim Dawson
    Isle of Mull, Scotland

  2. #2
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I have now found a solution, not quite so elegant, but it appears to work (subject, as always, to further testing). The following goes at the bottom of the pages (I've left the original code, pro tem, commented out):
    Code:
    <script >
    //	addLoadEvent(setSlideLinks('img/'));
    //	addLoadEvent(setDivBg('main','orangebg'));
    
    	addLoadEvent(doOnloadStuff);
    
    	function doOnloadStuff() {
    		setDivBg('main','orangebg');
    		setSlideLinks('img/');
    	}
    </script>
    This doesn't seem to have any serious disadvantages, and if there is any problem with parameters in 'addLoadEvent' it gets around that. I haven't uploaded that change to the link in my original posting yet. If anyone can throw light on why the original failed, I'd be most grateful.
    Tim Dawson
    Isle of Mull, Scotland

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,497
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function Init(){
    	addLoadEvent(setSlideLinks('img/'));
    	addLoadEvent(setDivBg('main','orangebg'));
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }

  4. #4
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vwphillips View Post
    Code:
    function Init(){
    	addLoadEvent(setSlideLinks('img/'));
    	addLoadEvent(setDivBg('main','orangebg'));
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    There is no point in using the load event to call addLoadEvent. It appears to work because the parameters being passed to addLoadEvent are incorrect. addLoadEvent expects a function reference as a parameter, not a return value from a function call.
    Tab-indentation is a crime against humanity.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Vic, thank you for your reply.

    Your suggestion addresses the difference between IE and other browsers in the way that they set event listeners, but that's not the problem. My 'setSlideLinks' function runs in both Firefox and IE7 already. It sets a link with straightforward onclick event handler on the thumbnail images (so that an enlarged image pops up when the thumbnail is clicked).
    'setDivBg' changes the className of a division to change the background colour. It has nothing to do with event handlers.

    The problem is that IE7 won't run the two 'addLoadEvent' instances. It will always run whichever's first. So either I get the background I want, or the slideshow works. But not both.

    This still happens when I use the code you've suggested. So for now I'm sticking with using 'addLoadEvent' to run once and call another function (doOnloadStuff) which can then run both the required functions in the right order.

    I still don't understand why IE7 won't run two instances of 'addLoadEvent', as I'd always thought that was half the point of the function. So maybe it's the parameters I've added.
    Tim Dawson
    Isle of Mull, Scotland

  6. #6
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ramasaig View Post
    I still don't understand why IE7 won't run two instances of 'addLoadEvent', as I'd always thought that was half the point of the function. So maybe it's the parameters I've added.
    As I mentioned in my previous post, you must pass a function reference, otherwise the functions are being called instantly, making the result unpredictable.

    Code:
    addLoadEvent( function(){ setSlideLinks('img/') } );
    addLoadEvent( function(){ setDivBg('main','orangebg') } );
    Tab-indentation is a crime against humanity.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Location
    Fionnphort, Isle of Mull, Scotland
    Posts
    349
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Logic Ali, thank you for your reply.

    I was struggling a bit over how to pass a funtion reference with parameters, but you have made it all clear to me now. It works perfectly. I did start out with:
    Code:
            addLoadEvent(setSlideLinks);
    	addLoadEvent(setDivBg);
    but then I needed to add the parameters, and that's where they ceased to be function references and became functions.
    I'm glad to have learnt the correct way to do it. Thanks again.
    Tim Dawson
    Isle of Mull, Scotland


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •