在方形空间（YUI）上重绘元素的问题

Question

This is a very, very peculiar case. The title before getting a solution was " Extreme force redraw element on jQuery ". All the rest below is unmodified.

Using Squarespace (has many YUI elements), I set the footer as display: none on Custom CSS. The footer has a gallery block (lots of scripts there).

Then I move the footer into another page element using prepend . All together is something on those lines:

 $yo = $('#yo'); $yo.parent().remove(); $('#here').prepend($yo); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <footer style="display: none"> delme <div id="yo">oi</div> </footer> <div id="here"> move here </div> 

That, of course, works with no problem here. But in my use case, it doesn't. If I remove the Custom CSS, it kind of works. There's still a bug in which it doesn't properly resize, and keeps the same size as the first parent, not the second as it should. So, the gallery is still not properly redraw! In fact, it's also not the CSS display 's fault.

The remove there is not the problem and makes no difference to be removed. I left it there just to give a glimpse of all the noise I'm trying to handle.

Even more, if I add this to the onLoad script:

$('footer').hide()

It works the same as expected. In fact, the later I leave to hide it, the better it will work, but never as perfect as it should. If I hide it on DOMready it will be half broken. And if I hide it on CSS, as I said earlier, it won't even show up ever. That is...

In all cases simply opening up the Console Window or manually resizing the window with the mouse, the gallery will show up exactly as it should, all fixed up properly, no issues whatsoever!

So, I supposed trying to force a redraw should make things work. Well, it doesn't. offsetHeight doesn't work and fiddling with css also do nothing. Of course I also tried trigger('resize') but no luck there! :( Tried for hours, nothing seem to work, even in the console!

I'll keep the bug here for a while. Right now, it shows the problem with hiding it at $(document).ready :

http://www.cregox.com/bugs/bannerify/

Is there a way to "simply" force that redraw so I won't have to keep digging up what in the bleep squarespace is doing with the CSS that does all this mess? I actually bet sqsp does a good job there, but at least in my head it is a big mess.

Answer 1

It seems I was right: Squarespaces' gallery component needs a heads-up that you have moved it into new quarters.

After your call to $('#here').prepend($yo) , add this line:

Y.one( $yo.get(0) ).simulate('resize');

Answer 2

如果手动调整大小有效，那么您可以尝试：

$(window).trigger('resize');