Javascript alterations

Question

i am wanting to adjust the following javascript from a mouseover event to a page load event, however my attempts to do so have so far failed. So to clarify, when the page loads i want the script to activate. here is the code:

$(function() {
 $('#sdt_menu2 > li').bind('mouseenter',function(){
 var $elem = $(this);
 $elem.find('img')
 .stop(true)
 .andSelf()
 .find('.sdt_wrap')
 .stop(true)
 .andSelf()
 .find('.sdt_active')
 .stop(true)
 .animate({'height':'45px'},300,function(){
 var $sub_menu = $elem.find('.sdt_box');
 if($sub_menu.length){ 
 } 
 });

• JJmason: Also on a side note, if any one knows how to force the animate line to accept percentage values, that would be a huge help
• elclanrs: Try $(window).load or $(document).ready
• Johannes H.: Actually $(...) is a shortcut for $(document).ready(...).
• elclanrs: Right didn't see that, @JJmason just remove the bind event. You should be using on instead in any case, bind has long been deprecated.
• elclanrs: @JohannesH. I had the same thought once upon a time, but I found this stackoverflow.com/questions/205853/…, and I'm using $ ever since, it's a convention.

Answer 1

If I understood the quesiton correct, it's as easy as

$(function(){
 var $elem = $(this);
 $elem.find('img')
 .stop(true)
 .andSelf()
 .find('.sdt_wrap')
 .stop(true)
 .andSelf()
 .find('.sdt_active')
 .stop(true)
 .animate({'height':'45px'},300,function(){
 var $sub_menu = $elem.find('.sdt_box');
 if($sub_menu.length){ 
 } 
 });

$(handler) (that you used already) actually is a shortcut for $(document).ready(handler).
From the jQuery Documentation on .ready():

All three of the following syntaxes are equivalent:
$( document ).ready( handler )
$().ready( handler ) (this is not recommended)
$( handler )

[Edit]: If the function should still work on $('#sdt_menu2 > li'), the $elem (is this even a valid name? Oo) has to be set to that, of course. So if that'S what you want, substitute

var $elem = $(this);

by

var $elem = $('#sdt_menu2 > li')`

• Johannes H.: True. BUt I don'T see what else this shoudl be referring to. The OP wanted to convert the action that was previously done by the mouseenter event tob e done at document.load. Of course this must be substitude by something, but I have no clue by WHAT ;)
• elclanrs: var $elems = $('#sdt_menu2 > li'); $elems.each(function(){ //previous code }
• Johannes H.: as $elem is only used with jQuery functions, that work with entire collections at once, there is no real need for the .each(). So the changes I added to my post should be enough - unless of course the OP wants to add something here that requires dealing with each element on its own.
• elclanrs: Yes, but he's using $elem in .animate. I'm not sure all those andSelf are necessary though, seems like caching involves less LOC but +1 form me. Although I think the edit should go first, since the first piece of code won't work.
• JJmason: Sorry i didn't notice this answer until now, your answer has worked absolutely perfectly. Thank you very much, you wouldn't also know how to change this line to accept percentage values do you? .animate({'height':'45px'},300,function(){

Answer 2

$(function(){

 var $elem = $(this);
 $elem.find('img')
 .stop(true)
 .andSelf()
 .find('.sdt_wrap')
 .stop(true)
 .andSelf()
 .find('.sdt_active')
 .stop(true)
 .animate({'height':'45px'},300,function(){
 var $sub_menu = $elem.find('.sdt_box');
 if($sub_menu.length){ 
 } 
 });

• ruud: Code only answers are not much appreciated here. It is easy to get more appreciation for your answer by adding a brief explanation about what your code does. And by formatting it properly....