New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flash of Unstyled Content for the Orbit plugin #1707

Closed
EduardoBautista opened this Issue Mar 5, 2013 · 14 comments

Comments

Projects
None yet
@EduardoBautista

EduardoBautista commented Mar 5, 2013

http://foundation.zurb.com/docs/components/orbit.html

You can view the issue there and just keep refreshing the page and you should see it.

@smaboshe

This comment has been minimized.

Show comment
Hide comment
@smaboshe

smaboshe Mar 7, 2013

I'm experiencing the same issue using Foundation 4.0.4:- An unstyled list of components in the slider visibly load and then collapse into the styled version when loading is complete.

This seems to have been an issue in older versions of Orbit as well. The stand-alone version (before Foundation) suggests a fix (see the "Achieving Perfection" tab):
http://www.zurb.com/playground/orbit-jquery-image-slider

The fix is almost exactly what I'd like to use but it does not seem to work with Orbit in Foundation 4.0.4. When I tried, it hid the slider entirely. Also, the fixed width and height won't work now that Orbit is responsive.

Is there a fix someone is currently using? It may be useful to have a section in the Orbit docs for this.

smaboshe commented Mar 7, 2013

I'm experiencing the same issue using Foundation 4.0.4:- An unstyled list of components in the slider visibly load and then collapse into the styled version when loading is complete.

This seems to have been an issue in older versions of Orbit as well. The stand-alone version (before Foundation) suggests a fix (see the "Achieving Perfection" tab):
http://www.zurb.com/playground/orbit-jquery-image-slider

The fix is almost exactly what I'd like to use but it does not seem to work with Orbit in Foundation 4.0.4. When I tried, it hid the slider entirely. Also, the fixed width and height won't work now that Orbit is responsive.

Is there a fix someone is currently using? It may be useful to have a section in the Orbit docs for this.

@EduardoBautista

This comment has been minimized.

Show comment
Hide comment
@EduardoBautista

EduardoBautista Mar 9, 2013

@smaboshe Yeah, and the version of the orbit slider you linked to is deprecated. It makes no sense why that feature is not in the new slider or it's just that I can't find the right documentation for it.

EduardoBautista commented Mar 9, 2013

@smaboshe Yeah, and the version of the orbit slider you linked to is deprecated. It makes no sense why that feature is not in the new slider or it's just that I can't find the right documentation for it.

@ghost ghost assigned mhayes Mar 15, 2013

@smaboshe

This comment has been minimized.

Show comment
Hide comment
@smaboshe

smaboshe Mar 23, 2013

After poking around the Interwebs:

The official fix for this in Foundation 3 is to use the "Graceful Orbit Loading State" documentation:

The reason it works in Foundation 3 is because a class called "orbit" is added when Orbit is completely loaded.
https://github.com/zurb/foundation/blob/3-2-stable/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js#L140

Orbit has changed quite a bit from Foundation 3 to Foundation 4. I do not see a similar "orbit" class being added.

@smileyj68 or @mhayes is there a recommended "Graceful Orbit Loading State" approach for Foundation 4?

smaboshe commented Mar 23, 2013

After poking around the Interwebs:

The official fix for this in Foundation 3 is to use the "Graceful Orbit Loading State" documentation:

The reason it works in Foundation 3 is because a class called "orbit" is added when Orbit is completely loaded.
https://github.com/zurb/foundation/blob/3-2-stable/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js#L140

Orbit has changed quite a bit from Foundation 3 to Foundation 4. I do not see a similar "orbit" class being added.

@smileyj68 or @mhayes is there a recommended "Graceful Orbit Loading State" approach for Foundation 4?

@smaboshe

This comment has been minimized.

Show comment
Hide comment
@smaboshe

smaboshe Mar 23, 2013

After doing some tinkering and referring to the Foundation 4 Orbit documentation (http://foundation.zurb.com/docs/components/orbit.html) the following CSS seems to give me what I need.

My <ul data-orbit>...</ul> is wrapped in a DIV called #featured. Replace "featured" with whatever ID you use to contain your Orbit slides. You'll need to have your own "spinner.gif".

#featured {
  /* Pre-loading animation */
  background: url(loading.gif) center center no-repeat;
}

#featured ul {
  /* Prevent bullets showing before .orbit-container is loaded */
  list-style-type: none;
}

#featured img {
  /* Hide images before .orbit-container is loaded */
  display: none;
}

#featured .orbit-container img {
  /* Show images when .orbit-container is loaded */
  display: block;
}

This is a quick-and-dirty fix. If you have something more elegant, I'm happy to use that instead.

smaboshe commented Mar 23, 2013

After doing some tinkering and referring to the Foundation 4 Orbit documentation (http://foundation.zurb.com/docs/components/orbit.html) the following CSS seems to give me what I need.

My <ul data-orbit>...</ul> is wrapped in a DIV called #featured. Replace "featured" with whatever ID you use to contain your Orbit slides. You'll need to have your own "spinner.gif".

#featured {
  /* Pre-loading animation */
  background: url(loading.gif) center center no-repeat;
}

#featured ul {
  /* Prevent bullets showing before .orbit-container is loaded */
  list-style-type: none;
}

#featured img {
  /* Hide images before .orbit-container is loaded */
  display: none;
}

#featured .orbit-container img {
  /* Show images when .orbit-container is loaded */
  display: block;
}

This is a quick-and-dirty fix. If you have something more elegant, I'm happy to use that instead.

@andywillis

This comment has been minimized.

Show comment
Hide comment
@andywillis

andywillis Apr 12, 2013

This manages to fix the problem and while maintaining the dimensions of the div.

Add the class 'orbit-slides-container' to the <ul>. This gets added automatically by the JS, but it doesn't get duplicated if it's already there, Adding it to the template means that we can prevent the unflashed style without adding extra divs or ids. It also means that it will affect all orbits if there's more than one on a page.

Then add this to the stylesheet:

.orbit-slides-container li { visibility: hidden; }

and the following line to foundation.orbit.js in the callback for$(window).on('load.fndtn.orbit'... (line 129):

$slides_container.find('li').css('visibility', 'visible');

The line-before-last seems to provide the best effect.

andywillis commented Apr 12, 2013

This manages to fix the problem and while maintaining the dimensions of the div.

Add the class 'orbit-slides-container' to the <ul>. This gets added automatically by the JS, but it doesn't get duplicated if it's already there, Adding it to the template means that we can prevent the unflashed style without adding extra divs or ids. It also means that it will affect all orbits if there's more than one on a page.

Then add this to the stylesheet:

.orbit-slides-container li { visibility: hidden; }

and the following line to foundation.orbit.js in the callback for$(window).on('load.fndtn.orbit'... (line 129):

$slides_container.find('li').css('visibility', 'visible');

The line-before-last seems to provide the best effect.

@proimage

This comment has been minimized.

Show comment
Hide comment
@proimage

proimage May 13, 2013

Building on the solution @smaboshe provided, I came up with the following.

SCSS:

.slideshow-wrapper
{
    /* Pre-loading animation; try a base64 encoded animated gif for best results */
    background: url(loading.gif) center center no-repeat;

    ul
    {
        /* Prevent bullets showing before .orbit-container is loaded */
        list-style-type: none;
        margin: 0;
        /* Hide all list items... */
        li
        {
            display: none;
            .orbit-caption
            {
                /* ...and their captions... */
                display: none;
            }
        }
        /* ...except for the first one. */
        li:first-child
        {
            display: block;
        }
    }

    .orbit-container
    {
        /* Override default Foundation Orbit background color */
        background-color: transparent;
        li
        {
            /* Show images when .orbit-container is loaded */
            display: block;
            .orbit-caption
            {
                /* Show captions too */
                display: block;
            }
        }
    }
}

And the CSS if you're not using SCSS:

/* Pre-loading animation; try a base64 encoded animated gif for best results */
.slideshow
{
    background: url(loading.gif) center center no-repeat;
}

/* Prevent bullets showing before .orbit-container is loaded */
.slideshow ul
{
    list-style-type: none;
    margin: 0;
}

/* Hide all list items... */
.slideshow ul li
{
    display: none;
}

/* ...and their captions... */
.slideshow ul li .orbit-caption
{
    display: none;
}

/* ...except for the first one. */
.slideshow ul li:first-child
{
    display: block;
}

/* Override default Foundation Orbit background color */
.slideshow .orbit-container
{
    background-color: transparent;
}

/* Show list items when .orbit-container is loaded */
.slideshow .orbit-container li
{
    display: block;
}

/* Show captions too */
.slideshow .orbit-container li .orbit-caption
{
    display: block;
}

proimage commented May 13, 2013

Building on the solution @smaboshe provided, I came up with the following.

SCSS:

.slideshow-wrapper
{
    /* Pre-loading animation; try a base64 encoded animated gif for best results */
    background: url(loading.gif) center center no-repeat;

    ul
    {
        /* Prevent bullets showing before .orbit-container is loaded */
        list-style-type: none;
        margin: 0;
        /* Hide all list items... */
        li
        {
            display: none;
            .orbit-caption
            {
                /* ...and their captions... */
                display: none;
            }
        }
        /* ...except for the first one. */
        li:first-child
        {
            display: block;
        }
    }

    .orbit-container
    {
        /* Override default Foundation Orbit background color */
        background-color: transparent;
        li
        {
            /* Show images when .orbit-container is loaded */
            display: block;
            .orbit-caption
            {
                /* Show captions too */
                display: block;
            }
        }
    }
}

And the CSS if you're not using SCSS:

/* Pre-loading animation; try a base64 encoded animated gif for best results */
.slideshow
{
    background: url(loading.gif) center center no-repeat;
}

/* Prevent bullets showing before .orbit-container is loaded */
.slideshow ul
{
    list-style-type: none;
    margin: 0;
}

/* Hide all list items... */
.slideshow ul li
{
    display: none;
}

/* ...and their captions... */
.slideshow ul li .orbit-caption
{
    display: none;
}

/* ...except for the first one. */
.slideshow ul li:first-child
{
    display: block;
}

/* Override default Foundation Orbit background color */
.slideshow .orbit-container
{
    background-color: transparent;
}

/* Show list items when .orbit-container is loaded */
.slideshow .orbit-container li
{
    display: block;
}

/* Show captions too */
.slideshow .orbit-container li .orbit-caption
{
    display: block;
}
@hatefulcrawdad

This comment has been minimized.

Show comment
Hide comment
@hatefulcrawdad

hatefulcrawdad May 18, 2013

Thanks for the idea of including the slideshow-wrapper, worked great! We included a CSS3 loading animation inside an optional <div class="preloader"></div> with the option to change that class name in the SCSS variables.

hatefulcrawdad commented May 18, 2013

Thanks for the idea of including the slideshow-wrapper, worked great! We included a CSS3 loading animation inside an optional <div class="preloader"></div> with the option to change that class name in the SCSS variables.

@adion

This comment has been minimized.

Show comment
Hide comment
@adion

adion May 24, 2013

There are some issues with the code in 31f97a9 (wrong vendor prefixes on the transforms in the animations and the display logic for list items is too broad (bullets are being suppressed when they shouldn't)).

I found all I had to add to avoid the FOUC was the following:

ul[data-orbit] {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
    display: none;
}

/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }

/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
    display: block;
}

adion commented May 24, 2013

There are some issues with the code in 31f97a9 (wrong vendor prefixes on the transforms in the animations and the display logic for list items is too broad (bullets are being suppressed when they shouldn't)).

I found all I had to add to avoid the FOUC was the following:

ul[data-orbit] {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

/* initially, hide all slides... */
ul[data-orbit] li,
ul[data-orbit] .orbit-caption {
    display: none;
}

/* ...except for the first one */
ul[data-orbit] li:first-child { display: block; }

/* show slides once .orbit-container is loaded */
.orbit-container ul[data-orbit] li,
.orbit-container ul[data-orbit] .orbit-caption {
    display: block;
}
@dangraphicmill

This comment has been minimized.

Show comment
Hide comment
@dangraphicmill

dangraphicmill May 28, 2013

Thanks adion, that worked a treat.

dangraphicmill commented May 28, 2013

Thanks adion, that worked a treat.

@kmacdonell79

This comment has been minimized.

Show comment
Hide comment
@kmacdonell79

kmacdonell79 Nov 19, 2014

Thanks adion, that worked perfectly.

kmacdonell79 commented Nov 19, 2014

Thanks adion, that worked perfectly.

@jamzth

This comment has been minimized.

Show comment
Hide comment
@jamzth

jamzth Feb 25, 2015

adion, that's awesome. Thanks!

jamzth commented Feb 25, 2015

adion, that's awesome. Thanks!

@lkallday45

This comment has been minimized.

Show comment
Hide comment
@lkallday45

lkallday45 Jul 24, 2015

Great fix Adion - works beautifully!

lkallday45 commented Jul 24, 2015

Great fix Adion - works beautifully!

@Joseluisblom

This comment has been minimized.

Show comment
Hide comment
@Joseluisblom

Joseluisblom May 25, 2016

it doesn't work for me using flex grid, any idea?

Joseluisblom commented May 25, 2016

it doesn't work for me using flex grid, any idea?

@sidoneill

This comment has been minimized.

Show comment
Hide comment
@sidoneill

sidoneill Jun 2, 2016

This is what I'm doing (using flex grid)
div.orbit { opacity:0; -webkit-transition: opacity 0.2s ease-out; /* Safari */ transition: opacity 0.2s ease-out; } div.orbit:not([data-orbit='']) { opacity:1; }

sidoneill commented Jun 2, 2016

This is what I'm doing (using flex grid)
div.orbit { opacity:0; -webkit-transition: opacity 0.2s ease-out; /* Safari */ transition: opacity 0.2s ease-out; } div.orbit:not([data-orbit='']) { opacity:1; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment