Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Hi,

    I have some jquery triggers and I want to know if they run faster in my body (above </body) or in the head. Or is it faster to put it in a .js file and reference it? The triggers I'm adding are a bunch of on hover animations for my website. I tried searching for the answer on google, but could not find a definite answer.

    Also, why is it that something like this can't be put in the header?

    Code:
    <script>
    $("#wrap #content .entry-content .wp-caption").hover(
    function() {
        $(this).find('div').stop().fadeTo("800",1);
        $(this).find('img').stop().fadeTo("800", .8);
    },
    function() {
        $(this).find('div').stop().fadeTo("200",0);
        $(this).find('img').stop().fadeTo("200", 1);
    });
    </script>
    -R

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It can be put in the header, it just has to come after your jQuery import.

    To me, it really depends on what's going on. For instance, I just finished a site where I needed the width of the nav menu items to be recalculated based on how many there are. That way, if the owner added or removed items, they'd still take up a proportionate amount of space. The CSS defaults to 20%, obviously for 5 items. So, if I had put the script at the bottom of the HTML, you would see it at 20% until the DOM recalculated the styles after the browser downloaded and ran the script. None of that calculation would happen until everything else was downloaded and displayed already. On the other hand, putting it in the head makes sure it's downloading the script first and running it as soon as it can.

    Point is, do whatever works for you at the time. Also, always call scripts from an external file. It makes for cleaner code, and a lighter HTML file. That'll reduce load time.
    AlphaMare likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Senior Member RDesignista's Avatar
    Join Date
    Feb 2012
    Location
    Coconut Tree City
    Posts
    822
    Member #
    30921
    Liked
    123 times
    Ronald,

    Thanks for the answers. I'm really wanting to know the most efficient ways to use jquery, because I've noticed that it can really slow down my browser (esp. in Firefox). Despite all the web work I've done, I still don't know a lot of basic things about Jquery. I can't even write an animate function without referencing the jquery website. Ugh. I will have to take a couple days to devote strictly to jquery education.

    -R

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If you don't already, it'd be better to spend time learning regular Javascript. It'll help you understand a lot more of what's going on with the jQuery
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com