CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

On Chrome & Safari dosen't work animation and images showing too small and circular problem #62

Open umit86 opened 12 years ago

umit86 commented 12 years ago

Hello, the plugin is great and very usefull.

You can see the live example of my issues on here: http://www.umitkaraosmanoglu.com/works/yeni/index.html

This example works great on firefox, IE (all) and opera but on chrome and safari dosen't work animation and images showing too small.

And when I am circuling from last elemnt to first element dosen't work animaton.

Thanks, best regards, Umit

Mottie commented 12 years ago

Hi Umit!

The issue with Chrome and Safari is that, I think, it's firing off the document ready before it even starts loading the images. So there are no set dimensions. So to solve this, set the image dimensions within the image itself:

<img src="myimage.jpg" width="400" height="300">
umit86 commented 12 years ago

Hey Mottie,

I slove this small images problem just adding js codes in "document ready" and "window load" functions but the fisheye animation dosen't work!

http://www.umitkaraosmanoglu.com/works/yeni/index.html

Mottie commented 12 years ago

Hmm, I think most of the problems are due to the "mb-inner" div being absolutely positioned. It doesn't resize with the "mb-panel" so that's why it doesn't resize. When I have time, I'll have a closer look at how we can align the panels to the bottom instead of the top.

umit86 commented 12 years ago

Yes, I set the .mb-inside div position:absolute; and bottom:0; for aligning images to bottom, it works all other browsers (including ie7, ie8, ie9) but on webkit not working which I didn't understand why!

Thanks a lot, for helping me. Umit

neeethumohan commented 4 years ago

Hello,

In Mozilla and Internet explorer it didn't support for me .Images didn't moving.Please help how you resolve this issue

Mottie commented 4 years ago

Hi @neeethumohan!

The demo I'm sharing originally used jQuery edge, which breaks everything. Use jQuery v3.3.1 instead (updated demo).