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){   
                    }   
                });

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 — JJmason, Nov 14 '13 at 00:13
Actually `$(...)` is a shortcut for `$(document).ready(...)`. — Johannes H., Nov 14 '13 at 00:17
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, Nov 14 '13 at 00:18
Would "mouseover" be more appropriate here? Nothing is jumping out at me as being clearly wrong. Also, with on syntax, maybe: `$('#sdt_menu2').on('mouseover', '> li', ..)` .. and the finds can be collapsed to `find('img, .sdt_wrap, .sdt_active')` .. posting a jsfiddle test-case showing the incorrect/"not working" behavior would be a good step forward. — user2864740, Nov 14 '13 at 00:25
Oh, and BTW: We're not in PHP here, so there is no real need to prefix all variable names with `$` :D — Johannes H., Nov 14 '13 at 00:29
@JohannesH. I had the same thought once upon a time, but I found this http://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign, and I'm using `$` ever since, it's a convention. — elclanrs, Nov 14 '13 at 00:33
@elclanrs: Oh, thanks! QUite interesting, never noticed that convention. NOt sure if I like it though - but it makes sense at least. — Johannes H., Nov 14 '13 at 00:34
Sorry guys, none of these suggestions have worked so far, and the collapsing of the find elements completely distorts the images. — JJmason, Nov 14 '13 at 10:25

Johannes H. · Accepted Answer · 2013-11-14T00:24:29.157

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')`

edited Nov 14 '13 at 00:24

answered Nov 14 '13 at 00:16

Johannes H.

5,875
1
20
40

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 ;) – Johannes H. Nov 14 '13 at 00:21
1

`var $elems = $('#sdt_menu2 > li'); $elems.each(function(){ //previous code }` – elclanrs Nov 14 '13 at 00:24
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. – Johannes H. Nov 14 '13 at 00:25
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. – elclanrs Nov 14 '13 at 00:28
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(){ – JJmason Nov 23 '13 at 00:06
height should always accept percentages. That's pure CSS there AFAIK. There was a bug in the past, but the latest jQuery version should be able to handle it again - haven't tried though. But note: In CSS, percentage values refer to the parent element - so setting this to 200% woudln't double its size, but making it twice as high as the parent (only mentioning this because I'm not sure what you want to archieve). – Johannes H. Nov 23 '13 at 18:44
When the menu drops down using the above code, it produces an image with a border. I can control the height of the image, but i cannot control the height of the border. As a result when the page is shown in a smaller resolution and the mouse moves over the parent image, the child image appears as it should, however with a border height of 45px, leaving a blank space below the image. – JJmason Nov 26 '13 at 13:42

Javascript alterations

1 Answers1