Why is my jQuery script not loading correctly first time?

Question

I'm using a jQuery script on this page https://dearvr.netlify.app/demo.html on bottom before the body ends like this:

 <script>
   $(document).ready(function(){
     var demomain = $(".demo-bg section");
     var demomainW = demomain.height()+ 150;
     $('head').append('<style>.demo-footer{top:'+ demomainW +'px !important;}</style>');
     console.log("HEIGHT --> "+demomain.height());
   });
 </script>
</body>

It is supposed to detect height of a section above footer so that footer can change its "top" css value accordingly. I obviously tried it without the script but I just can't get it to work. Is there a way I could do it without jQuery with just plain CSS?

Anyway, the script does not load properly the first time usually (tested on multiple devices). I have started the function with document ready so I really don't know what's causing the problem.

2 things, load it in the <head> tag, and are you sure the relative path for the jQuery file is correct? Try /js/app.js or js/app.js — BeerusDev
– BeerusDev, Commented Jun 7, 2021 at 17:06

Kyle · Accepted Answer · 2021-06-07 17:16:31Z

2

If that link you provided is the actual link with the issue - then just add that script tag below you're jquery script reference.

<!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
         var demomain = $(".demo-bg section");
         var demomainW = demomain.height()+ 150;
         $('head').append('<style>.demo-footer{top:'+ demomainW +'px 
      !important;}</style>');
         console.log("HEIGHT --> "+demomain.height());
       });
    </script>

answered Jun 7, 2021 at 17:16

Kyle

1,5031 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

berkobienb Over a year ago

This is the correct answer. If you run the fiddle, you aren't getting any more issues in the console. jsfiddle.net/bradberkobien/1c0y6grw/7. This also involves putting the script import in the head tag

r043v · Accepted Answer · 2021-06-07 17:17:44Z

0

your script load fine, but content pictures and other must not be fully loaded so script cannot compute real final size

on another touch drop all this position fixed/absolute stuff, you must never need to set footer position yourself by hand, just let the browser handle that himself using classic and normal block positioning

answered Jun 7, 2021 at 17:17

r043v

1,8691 gold badge15 silver badges25 bronze badges

Comments

marc_s · Accepted Answer · 2025-05-17 19:29:18Z

0

You are referencing the jQuery library before loading it. You have two options.

1# Load query library first

2# Make the on "document ready" function with pure Javascript

Vanilla JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

Personally I would go with #1. Load jQuery library in the head tag first. And put script tag below that.

edited May 17 at 19:29

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jun 7, 2021 at 17:31

panox

5751 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Why is my jQuery script not loading correctly first time?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related