Timeline Widget Vanishes with JQuery "Hide/Show"


#1

My website can be found here: ollie-odonnell.com

As you can see, I have a neat JavaScript/JQuery function to allow the user to “slide” between pages. That means that it uses JQuery Hide and JQuery Show. When the page opens directly to the “about” page, the widget loads, but as soon as it is hidden and re-shown, the widget refuses to load. What can I do to fix this?


#2

Hi Ollie,

At present the embedded Tweet and embedded Timeline widgets use <iframe> elements to sandbox Twitter content within your page, and prevent the styles of your page bleeding through unexpectedly. Unfortunately there’s also a weird behavior with iframes in the DOM, whereby removing an iframe from the DOM and reappending it will cause it to reload: For a regular iframe with remote content, this requests the src URL and re-renders (you can see this when your Google Calendar widget blinks after navigating between pages), but with a sourceless iframe (which we create locally), it simply reinitializes as an empty document, with the timeline content lost.

That’s the cause of your problem. We’re aware of the issue, but it’s not a priority for us to build a complex workaround for it. The best way you can avoid the problem is to slightly adjust your transition script, and not remove the home page content from DOM after your page changes. Changing CSS display or visibility properties should be OK, and not destroy the frame state, but moving (or removing) the DOM subtree will.

Hope that helps,

Ben


#3

Thank you for the quick response! The solution didn’t work for me right away, but in any case, I’m just happy that it’s a known bug, and that if I ever choose to scrap the transitions, it’ll go away.


#4