1

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.

cregox
  • 17,674
  • 15
  • 85
  • 116
  • Sounds to me as if the gallery where JS-created. If that's true, the way to go is probably to interact with the responsible script directly and force a refresh. Can we somehow take a look at the issue first hand? – janfoeh Mar 13 '15 at 16:01
  • @janfoeh it will work for a little while: https://kate-bosse-87i3.squarespace.com/shop-footer I'll try to replicate it in my end later on to leave a (more) permanent link on the question. I thought of trying to interact with the responsible script, but I didn't thought it would be the gallery... – cregox Mar 13 '15 at 16:03
  • If there is some non-jQuery handler attached to the `resize` event on the window (that performs resizing on the gallery element), it won't be triggered by `$(window).trigger`. For alternate approaches see this question: http://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript – radiaph Mar 13 '15 at 16:04
  • @phari I'm thinking this is more likely a CSS issue, in fact. – cregox Mar 13 '15 at 16:07
  • done replicating it: http://www.cregox.com/bugs/bannerify/ – cregox Mar 13 '15 at 16:20

2 Answers2

3

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');
janfoeh
  • 10,243
  • 2
  • 31
  • 56
  • Please teach me! How you've done that?! :P It worked, but I'll keep the bug there. I'm guessing used the [console debugging](https://developer.chrome.com/devtools/docs/javascript-debugging) (which I'm trying to learn more)... But anything else? How?! YUI info is way too scarce on the net for my taste. – cregox Mar 13 '15 at 16:38
  • 1
    @Cawas 1) Set a breakpoint after your `prepend` and reload 2) When debugger hits the breakpoint and pauses the script, right-click on one of the `
    ` in the Element inspector, add `Break on attribute modification` and unpause 3) debugger kicks in the next time the gallery changes the element and drops us right in the gallery code. 4) prettify the code to make it readable 5) see that it reacts to resize events 6) google the YUI equivalent to `$()` and how to synthesize the `resize` event 7) ..? 8) profit! :)
     – janfoeh Mar 13 '15 at 16:45
  • I'm so old school, I hardly ever used debuggers...This is a great debugger (despite being unable to *step back*) and I was already fiddling with "break on attribute" thing... But I'm not sure I'd come up with such ideas. Why adding a breakpoint after `prepend` to begin with? And I couldn't see it "reacting to resize event"... But don't worry, I got the idea. :-) You need to get in touch with me (because I couldn't easily find your contact info other than twitter and github), as I need to **thank you more properly**. Upvoting other stuff from you doesn't feel like enough (5 votes left now). ;-) – cregox Mar 13 '15 at 17:08
  • @Cawas I of course appreciate the sentiment, but there is really no need - it's been my pleasure! I've added a mail address to my SO profile. – janfoeh Mar 13 '15 at 18:03
0

If manual resizing works then you can just try:

$(window).trigger('resize');
boszlo
  • 1,144
  • 10
  • 14
  • Thanks so much for taking the time to look at this! ;) Yes, I was just editing the question as I forgot to include that note! Already tried, one of the first things. :( – cregox Mar 13 '15 at 15:30