1

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?

Anyways, 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...

Any help will be appriciated. Thanks

citizen556
  • 23
  • 2
  • 5
  • 2 things, load it in the tag, and are you sure the relative path for the jQuery file is correct? Try /js/app.js or js/app.js – BeerusDev Jun 07 '21 at 17:06

3 Answers3

1

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>
Kyle
  • 1,463
  • 1
  • 12
  • 18
  • This is the correct answer. If you run the fiddle, you aren't getting any more issues in the console. https://jsfiddle.net/bradberkobien/1c0y6grw/7/. This also involves putting the script import in the `head` tag – berkobienb Jun 07 '21 at 17:24
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

r043v
  • 1,859
  • 1
  • 15
  • 25
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.

Pure 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 libarary in the head tag first. And put script tag below that.

panox
  • 507
  • 4
  • 13