search

zurb / orbit

454 stars 96 forks source link

Loading State CSS Broken #103

Open th3fallen opened 12 years ago

th3fallen commented 12 years ago

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?

benklocek commented 12 years ago

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.

jjhesk commented 12 years ago

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; }

th3fallen commented 12 years ago

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.

jjhesk commented 12 years ago

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.

th3fallen commented 12 years ago

Still have not found a viable solution for this what about any of you guys?

benklocek commented 12 years ago

@th3fallen Could you describe the issues you are experiencing again? I'm not sure I understand the issue from your first post.

th3fallen commented 12 years ago

@benklocek load http://testing.insp.com/ in ie8 and you'll see the loading state works but it never goes away.

th3fallen commented 12 years ago

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; }

keithdevon commented 12 years ago

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.

DESIGNfromWITHIN commented 12 years ago

Problem still here!