Menu icon Foundation

My Posts

No Content

My Comments

Jon Ewing commented on Keith Knowles's post over 5 years

I'd also like a good solution to this.

Short term workaround I would set #feature to a fixed height and hide the overflow:

feature {overflow:hidden;height:411px;}

Not great, but it'll work, I think.

Jon Ewing commented on Greg Blass's post over 5 years

This is an issue with Orbit, not with any particular implementation of it.

I took this screengrab of the Orbit page http://foundation.zurb.com/docs/components/orbit.html on the Foundation site:

https://dl.dropboxusercontent.com/u/15887147/orbit-screengrab.jpg

You can clearly see slide two loading simultaneously with slide one. The slider doesn't look right until both/all slides have finished loading.

A not particularly great workaround for this is to set a fixed height:

  .home-slider {overflow:hidden;height:350px;}  
    <div class="row home-slider">
  <ul class="example-orbit" data-orbit>    
  <li>
  <img src="xx1.jpg" width="960" height="380" alt="xyz1" /></li>
  <li>
  <img src="xx2.jpg" width="960" height="380" alt="xyz2" /></li>
  </ul>
    </div>

But of course you might need a different fixed height for each breakpoint, eg

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Large Displays: 1024px and up */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 64.063em) {
  .home-slider {overflow:hidden;height:415px;} 
}

I'm not saying this is a great solution.

It would be better if it just worked right to begin with, obviously.

Anyone got anything better?

Posts Followed

  • 5
    Replies
  • Orbit jumps around on load

    By Greg Blass

    Orbit

    I'm on chrome on OSX 10.9, and the orbit slider jumps around on a page load. You can see each individual slide for a split second with <li> bullets to the left of them before the javascript executes on the example page (and the same thing is happening for... (continued)

    Last Reply by Clement over 5 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Keith Knowles's post over 5 years

I'd also like a good solution to this.

Short term workaround I would set #feature to a fixed height and hide the overflow:

feature {overflow:hidden;height:411px;}

Not great, but it'll work, I think.

You commented on Greg Blass's post over 5 years

This is an issue with Orbit, not with any particular implementation of it.

I took this screengrab of the Orbit page http://foundation.zurb.com/docs/components/orbit.html on the Foundation site:

https://dl.dropboxusercontent.com/u/15887147/orbit-screengrab.jpg

You can clearly see slide two loading simultaneously with slide one. The slider doesn't look right until both/all slides have finished loading.

A not particularly great workaround for this is to set a fixed height:

  .home-slider {overflow:hidden;height:350px;}  
    <div class="row home-slider">
  <ul class="example-orbit" data-orbit>    
  <li>
  <img src="xx1.jpg" width="960" height="380" alt="xyz1" /></li>
  <li>
  <img src="xx2.jpg" width="960" height="380" alt="xyz2" /></li>
  </ul>
    </div>

But of course you might need a different fixed height for each breakpoint, eg

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Large Displays: 1024px and up */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 64.063em) {
  .home-slider {overflow:hidden;height:415px;} 
}

I'm not saying this is a great solution.

It would be better if it just worked right to begin with, obviously.

Anyone got anything better?

Posts Followed


Following

  • No Content

Followers

  • No Content