$find not working in firefox. ASP.NET Slideshow Extender

Question

I have a asp.net ajax slideshow extender that I have hijacked and turned into a jquery like slide show control. It works wonderfully in every browser except for firefox. I have isolated the problem down to the $find call not working. Also I had to put in a setTimeout into the page to get pageLoad to call in firefox. This is also not necessary in chrome or IE.

Here is the code.

setTimeout ( pageLoad(), 250 );

 function pageLoad(){       
    var slider1;     

    slider1 = $find('<%= slExtender.BehaviorID %>');           
    slider1.add_slideChanging(onSlideChanging);          
} 

 function onSlideChanging(sender, args)
 {         
    currentSlideIndex = args.get_slideIndex();   
    //Do what you want using this index        

    var arr = <%= serializer.Serialize(linkArray) %>;        

    for(var i = 0; i < arr.length; i++)
    {
      if(i == currentSlideIndex)
      {
         var link = document.getElementById(arr[i]); 
         link.className += "hovered";
      }
      else
      {
         var link = document.getElementById(arr[i]); 
         link.className = "";
      }
    }

 } 

function SlideClicked(slID) {
    var ss = $find(slID);
    var arr = <%= serializer.Serialize(urlArray) %>; 

    window.location = arr[ss._currentIndex];
}

It seems that the $find is returning null in firefox. Also, does anyway know why I have to put a timeout on the page to get pageload to call?.

Also the $find in SlideClicked does work. slID is the slExtender.BehaviorID

Update

If I add

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

with the following javascript:

$(document).ready(function () { 
  pageLoad();
});

 function pageLoad(){      
    var slider1;         
    slider1 = $find('<%= slExtender.BehaviorID %>');           
    slider1.add_slideChanging(onSlideChanging);          
} 

 function onSlideChanging(sender, args)
 {         
    currentSlideIndex = args.get_slideIndex();   
    //Do what you want using this index        

    var arr = <%= serializer.Serialize(linkArray) %>;        

    for(var i = 0; i < arr.length; i++)
    {
      if(i == currentSlideIndex)
      {
         var link = document.getElementById(arr[i]); 
         link.className += "hovered";
      }
      else
      {
         var link = document.getElementById(arr[i]); 
         link.className = "";
      }
    }

 } 

function SlideClicked(slID) {
    var ss = $find(slID);
    var arr = <%= serializer.Serialize(urlArray) %>; 

    window.location = arr[ss._currentIndex];
}

To the page, everything works fine in firefox and no longer works in chrome or IE. I already have 1.4.1 included on the masterpage.

Answer 1

The window object has an event 'onload', but this only works as expected in some browsers. With this, you would attach a callback to this and then execute all of your code that relies on the DOM. This isn't the same across browsers (sometimes onload is fired before the DOM is ready for traversal, which leads to problems), so you have to be clever.

Fortunately you're using a framework that supports it. jQuery has a convenience function ready() . Here's a basic example of how to use it (use this same form everywhere, since most scripts need the DOM):

$(document).ready(function () {
    // execute your code here, like adding event listeners, doing find, etc
});

So, with your particular code, do something like this:

$(document).ready(function () {
    pageLoad();
});

I would recommend using this model always. Never call code in the global scope, but execute it when the DOM is ready. Even if you don't use the DOM, you probably will eventually, so it makes sense.

Answer 2

$find('<%= slExtender.BehaviorID %>');

In the above line, if "slExtender" is a control then you need to add #.

Make it like: $find('#<%= slExtender.BehaviorID %>');

Try this.

And for pageload problem try

$(function() { var slider1;

slider1 = $find('#<%= slExtender.BehaviorID %>');           
slider1.add_slideChanging(onSlideChanging); 

});