Slider - preloader - buttons aren't working after setting style="display: none"

user_14485185 0
Viewed 52

Could anyone have a look at this snippet of code?

I recreated another loader and included the last amount possible of code I could to show you the problem. Basically I have a div container, which is "all-page-container" which has an inline style="display: none" which makes it non visible until the loader is done (but also it makes it wait at least 2 seconds to show the actual page content).

But this also makes the js part of the code as

var s = $('.slider'),
        sWrapper = s.find('.slider-wrapper'),
        sItem = s.find('.slide'),
        btn = s.find('.slider-link'),
        sWidth = sItem.width(),
        sCount = sItem.length,
        slide_date = s.find('.slide-date'),
        slide_title = s.find('.slide-title'),
        slide_text = s.find('.slide-text'),
        slide_more = s.find('.slide-more'),
        slide_image = s.find('.slide-image img'),
        sTotalWidth = sCount * sWidth;

Not find the actual classes, because of the display:none, does anyone know how could I overcome this issue? I fixed it with a while loop which checks until a property is set to 0 to load the script, but obviously this isn't going to fix the major problem.

https://jsfiddle.net/boxxo/95ocxrb2/59/

if you remove the inline style="display:none", obviously the buttons are going to work ask expected and also the slider is going to work properly.

(The buttons are actually running, I added logs into the conditions and the "next" and "previous" are definitely executing correctly).

If anyone could help I would be grateful. Thanks everyone.

(I also checked other questions on the site, but couldn't find the solution to my issue, and also other guys are using display: none to hide the page content until the preloader is done loading).

frontend css html jquery
1 Answers

The problem is that width of the element that is not visible (display: none) is 0 same as height. If initially, the page is not visible (width display: none) your animation will not work.

Just add console.log({sWidth}); to see for yourself.

To solve the issue you can show the div before you start your code. Or use different CSS properties:

visibility: hidden;
visibility: visible;

This property works similarly to display: none but the width and height is not 0, the element still occupies the same space but it's not visible.

user_3871940
Related