Document ready function - Not loading the code first

Question

I have a function that works on the body onload="" but I need it to load before other elements of the page and I'm trying to add the document ready function in the header but it just doesn't seem to work.

f1menu() {
    $('.menuH').hover(
        function() {
            $('.menuC').stop().animate({width: '90px'},333)
        }, 
        function() {
            $('.menuC').stop().animate({width: '-0'}, 333)
        }
    );
}

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

So the onload function that works is just this one below:

onload="$('.menuH').hover(function() {$('.menuC').stop().animate({width: '90px'}, 333)}, function() {$('.menuC').stop().animate({width: '-0'}, 333)});"

Please post your code so that it's properly formatted/indented for readability and easier to troubleshoot. Edited. — Sparky, Mar 09 '16 at 16:58
so how do i load it before anything else? I thought that was the purpose of document ready vs window.load — brigitte18, Mar 09 '16 at 17:08
No, that's not the purpose of document ready. If you just want your code to run before anything else, just execute it in the script tags without an event handler, but you won't be able to access any DOM elements at that point. — Scott Marcus, Mar 09 '16 at 17:09
Also, are you sure that the target element exits on the page when the page loads and is not in fact added some time after, that matters A LOT — Wesley Smith, Mar 09 '16 at 17:10

Scott Marcus · Accepted Answer · 2016-03-09T17:17:31.567

3

Note that the following answer was provided before the OP changed the question.

You should write:

  function f1menu(){}

not,

  f1menu(){}

In addition, you can streamline your document.ready code by simply passing the function that you want called when the document is ready, directly to jQuery:

$(function() {
     $('.menuH').hover(
         function() {
            $('.menuC').stop().animate({width: '90px'}, 333);
         }, 
         function() {
            $('.menuC').stop().animate({width: '-0'}, 333);
         }
     );
});

UPDATE:

After OP revised the question, the solution (not a recommended approach by the way) would be to just insert the script into the body of the page, but AFTER any elements that the function references, such as:

 <body>

     <!-- elements that the code references must come before the code -->
     <script>
        // .menuH and .menuC elements must have already been loaded into DOM
        $('.menuH').hover(
           function() {
               $('.menuC').stop().animate({width: '90px'},333)
           }, 
           function() {
               $('.menuC').stop().animate({width: '-0'}, 333)
           }
        );
     </script>

     <!-- Rest of HTML -->
 </body>

edited Mar 09 '16 at 17:17

answered Mar 09 '16 at 16:44

Scott Marcus

64,069
6
49
71

Explain "doesn't work". Are you getting an error? Have you added a console.log into f1menu to see if it is being called? – Scott Marcus Mar 09 '16 at 16:47
Doesnt work as in it still gets loaded after the page is finished by the onload event rather then document ready – brigitte18 Mar 09 '16 at 16:54
How are you making that determination? The only difference between the load event and the document ready (which is really the DOMContentLoaded event) is that load waits until all page resources have been fully loaded and ready fires just after the DOM tree is built. Make sure you are trying this code with your browser cache cleared out. – Scott Marcus Mar 09 '16 at 16:56
When i load the page the menu does not animate when i hover over it until the entire page is finished loading. i also tried to copy paste the code directly into the document ready which also did not work instead of making a function and calling it. – brigitte18 Mar 09 '16 at 17:05
1

OP doesn't seem to understand how $(document).ready works. It will run the contained code *after the entire DOM has been loaded* that's its purpose – Wesley Smith Mar 09 '16 at 17:06
This is not the use for document ready or the load event for that matter. Both of these events trigger AFTER all the elements on the page have been generated. If you want to do something WHILE the DOM is being constructed, you'd need to insert your code into the body of the page at the point where you want the work done, which is NOT a best practice, by the way. – Scott Marcus Mar 09 '16 at 17:07
I thought document ready works first aposed to window.load which waits for the page to load. So the answer would be insert after tag. I can award the question if you create the answer – brigitte18 Mar 09 '16 at 17:10
You would insert the code within your f1menu function into the page AFTER the elements referenced by the function have been parsed into the DOM. Since you haven't shown ALL your code, I can't be more specific than this. – Scott Marcus Mar 09 '16 at 17:11
**FYI** - the OP did not *"change the question"*. I simply added line breaks and indentations to the OP's original code and fixed some spelling/grammar. – Sparky Mar 09 '16 at 17:21
@Sparky You edited the question, but as the comments progressed it became clear that the OP wants something different than the question title says. – Scott Marcus Mar 09 '16 at 17:24
Yes, I see. Perhaps clarify that you're referring to the OP's comments in your answer. – Sparky Mar 09 '16 at 17:26

DCruz22 · Answer 2 · 2016-03-09T20:44:15.487

-1

It doesnt know f1menu is a function since you didnt declare it as one. Try this:

function f1menu(){ //logic }

edited Mar 09 '16 at 20:44

answered Mar 09 '16 at 16:50

DCruz22

806
1
9
18

Document ready function - Not loading the code first

2 Answers2