orbit
orbit copied to clipboard
zurb
Loading State CSS Broken
The css you provide for the "Glorious, Seamless Loading State" is not working in any browser i have modified it to this
featured-slider
{ height: 298px !important; background: #000000 url('../images/framework/orbit/loading.gif') no-repeat center center; overflow: hidden; z-index: 10; }
featured-slider>DIV
{ display: none; }
but this results in ie's loading image not going away when the images are loaded any fixes?
So you only added z-index: 10?
I found that if I use the loading state, Orbit fails responsively. It has a fixed height, which doesn't scale.
I got the same issue from different browser. Please refer to www.kingdragon.hk The slider works fine on FF but it doesnt work on Safari and Chrome. Please help.
I have been trying many ways and it doesn't work out.
I put those initially..
div#feat{
position:relative;
display:block;
margin: auto;
margin-top:60px;
margin-bottom:50px;
background: #000 url('orbital/orbit/loading.gif') no-repeat center center;
overflow: hidden;
width:940px;
height:280px !important;
z-index: 10;
}
#feat>img,
#feat>div,
#feat>a {
display: none;
}
if you look closer at the code ben i changed the z-index and the other rule for the divs inside the wrapper but still nothing.
I finally noticed that the code will break on Chrome if the pictures are first loading from the server,.. try many times on the official and my page too. It happens all the time.
Still have not found a viable solution for this what about any of you guys?
@th3fallen Could you describe the issues you are experiencing again? I'm not sure I understand the issue from your first post.
@benklocek load http://testing.insp.com/ in ie8 and you'll see the loading state works but it never goes away.
Also i've found this in foundation.css which seemed to help somewhat /* PUT IN YOUR SLIDER ID AND SIZE TO MAKE LOAD BEAUTIFULLY ================================================== */ #caseStudies { width: 1000px; height: 210px; background: #fff url('../images/framework/orbit/loading.gif') no-repeat center center; overflow: hidden; } #caseStudies>img, #caseStudies>div, #caseStudies>a { display: none; }
Was there ever a resolution to this? I'm having a similar issue.
I'm not sure what to change "#caseStudies" to. I've tried ".orbit-wrapper" and "#featured", but both just hide the slider.
I'm using WordPress and the Foundation theme.
