search

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

Vertical size wrong when loaded by ajax? #16

Closed ocgltd closed 13 years ago

ocgltd commented 13 years ago

I'm using movingboxes inside a tabbed page, where each tab is loaded by ajax (jquery tools tabs). The first time I go to the tab with the movingboxes, the height is often wrong (too narrow), cutting off the bottom of my text.

If I change tabs and go back, then the height is correct. I'm not a javascript guru so I can't explain it much better, other than to say it's not working right :)

You can see for youself at www.haast.ca and click Products | High Availability Asterisk and then click the screenshots tab.

Thanks!

ocgltd commented 13 years ago

Actually, there is a consistent horizontal size bug too. Notice on the web page above that on the left hand side of the movingboxes area there is unused whitespace? The entire movingboxes should extend another 30 pixels left.

I tried changing the width of the div holding the movingboxes, but the bug remains.

Mottie commented 13 years ago

Hi ocgltd!

I can't get to the web page you provided, all I see is a broken image and "Coming Soon...".

You could try adding CSS to define the height and width of the entire box and for the panels. In the latest version the overall box is "mb-slider" and the panel class is "mb-panel", in older versions it was "slider" and "panel" respectively.

If that doesn't work, then please provide an example or some way I can get to your site to help troubleshoot the problem :)

ocgltd commented 13 years ago

Sorry, to get to the page you have to start here: http://www.haast.ca/index.php

I'm using the latest version of movingboxes...thanks

Mottie commented 13 years ago

Hiya!

Ok, now that I've looked at it, loading the entire code via ajax seems really slow because it has to load it up each time I switch tabs.

Have you tried putting the whole thing is a hidden div on the page, then appending it to the tab when it gets clicked on. Honestly I don't think ajax loading is the best option for that because of the long initialization time. Having it preloaded might also resolve the issues you are having with the margins being off.

If that isn't an option, then try keeping the CSS loaded on the main page instead of loading each time because that make the delay more noticeable as well.

Edit Ahh, ok the height problem doesn't occur in Firefox, but in Chrome I see the it. I think that can be solved with putting the css on the main page. The width problem is because the "UL" being used has a 40px left padding which should be set to zero :)

ocgltd commented 13 years ago

I'm using the jquery tools UI plugin, which is handling the tabs and ajax loading for me, so I don't have the option of hiding/showing DIV's. Honestly, I hadn't event thought about (or noticed) delays yet - something I'll do when I start optimizing...

I'll try putting the CSS On the main page and report back...

ocgltd commented 13 years ago

Ok, 2 pieces of feedback:

  1. Where did you find the UL has 40px padding? I looked in my style sheets and can't find it!!
  2. Oops I misread your suggestion...I'll get back to you on the CSS loading.
ocgltd commented 13 years ago

Ok -you were right, moving the movingboxes CSS to the parent page seemed to fix it.

Now I just need to find those 40 px padding! Hopefully someone can find it...

Mottie commented 13 years ago

The 40px padding is the standard padding for a UL.Usually it gets set to zero with reset css, but I don't think it did in this case. Anyway, I saw the 40px padding when I targeted the div and looked at the layout in Firebug.