Default "element style" interfering with JS and custom CSS

[Arzy]

Hi everyone!

I run into this issue where the display:none; should be “! important” to have my footer hidden after the js clearTimeout.

Code is simple. It’s just that if I set the footer to not visible it’s not showing up at all and when it’s visible after the clearTimeout it reappears…

Any solution to set this up?

I use this JS

Thanks!

[julienallard1]

If you unchecked the element’s This element is visible on page load checkbox, then Bubble won’t, indeed, load the element at all to save CPU/RAM resources (which is a very good thing). So from my understanding, your timeout script fires before the element is created.

The quickest solution you could try is to check the box that makes it visible on load and add a condition to hide it immediately…

[Arzy]

Thanks for the quick reply.

I tried many conditions but still the same; either it’s visible after timeout or it’s totally invisible…

[julienallard1]

it’s hard to tell from here…

You must keep in mind that Bubble uses the attribute to show/hide element. If you want to hide an element made visible by Bubble, must have a class that says display:none. But if you want to force the showing of an element Bubble hid, you need to override that “display:none” in the style attribute either with a class that says “display: block !important” or by literally removing the “display:none” in the attribute with javascript.

In all cases, when you manually change the visibility of elements, Bubble doesn’t know since the registered state of elements is saved elsewhere in some JS variable.

a good solution could be to use a “Javascript to Bubble” element from Toolbox plugin. So you configure it with a function name like “bubble_fn_showFooter” that publishes data of type “yes/no” and you make your footer’s visibility to depend on that JS to Bubble “yes/no”. Then with javascript, simply call bubble_fn_showFooter(true) / bubble_fn_showFooter(false) to show hide it

[Arzy]

Fixed… I removed the ! important on both display in the css!

Thanks anyway

[Arzy]

@julienallard1

I decided to change the style of this footer animation and really I don’t understand. It’s working when I go full html without Bubble but on Bubble something is goes wrong…

That’s the code I want for the footer and that I use now for the header which works on bubble :

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.querySelector(".header").style.top = "0";
  } else {
     document.querySelector(".header").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

I have 2 lines of code that I’m trying but none of them work:

var element = document.getElementById("footer").classList.remove("foot");

var element = document.querySelector(".foot").style.bottom = "0";  }

I’m probably missing something. I don’t see them working even if I remove the !important from CSS:
/* footer */
.foot {
position: fixed ! important;
z-index: 99999 ! important;
bottom: -70px ! important ;
width: 100% ! important;
top: auto ! important;
transition: top 0.2s ease-in-out ! important;
}
#footer {
position: fixed ! important;
z-index: 99999 ! important;
bottom: 0px ;
width: 100% ! important;
top: auto ! important;
transition: top 0.2s ease-in-out ! important;
}
That’s the script:

/* footer animation */

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    var element = document.getElementById("footer").classList.remove("foot");

  } else {
    var element = document.querySelector(".foot").style.bottom = "0";  }
  prevScrollpos = currentScrollPos;
}

</script>

Well I spent 6h today on this

There is an issue with Bubble obviously since it’s working when I try on HTML alone.

I found out that I cannot run both functions in the same time. Geez I should learn the basics… Still trying to solve this.

Never mind I got it right!