4

I am using Twitter's own Search Widget (Which can be seen here) on my site and it is contained in one of many switching tabs, basically consisting of divs that are hidden and shown according to which link is clicked.

There's no need for code here because it's a very simple situation to explain, basically the twitter feed is not being populated with new tweets when it is contained in a div which has display:none.

You can see this by going onto the twitter widget demo page and hiding it in your element inspector. Wait a few seconds and then show it again and you will be able to see that there are no new entries, just a pile of dotted borders.

How can I ensure the feed is being populated even when it is hidden?

Thanks.

igneosaur
  • 3,268
  • 3
  • 29
  • 44

2 Answers2

2

Why not use some jQuery to hide and show the widget... without resorting to altering the css? Something like..

$('#example-preview-widget').hide();
$('#example-preview-widget').show();

This worked for me in the console with the issues you mentioned.

EDIT

After more testing, I can see that the above doesn't work. I did find a fix (I think)...

Instead of using hide() and show() or display:none, try to position the div off the screen using 

position:absolute;
left:5000px;

or something similar. Then you can toggle it back in position.

When tested in the console, this keeps the tweets loading.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
  • -1: `$(".derp").hide();` changes the css anyway, applying the css `display: none;`. http://docs.jquery.com/Hide – ANeves Jul 04 '11 at 15:02
  • @ANeves Thanks. I understand that. But without any code AND assuming the OP set the `display:none;` in his CSS and that was causing the problem, I suggested the above...which, when tested in the console, does not cause his problem. – Jason Gennaro Jul 04 '11 at 15:05
  • I see no difference, in FF5+firebug. I get the same results: adding `display: none;` to his element for a while and putting it back shows the contents as they were; and using `$('.twtr-widget').hide();` and then `.show();` after a while has the same behaviour. But you seem to be getting a different behaviour? Odd. – ANeves Jul 04 '11 at 15:12
  • @ANeves Well, there's no code because it is the twitter widget. Go to [http://twitter.com/about/resources/widgets/widget_search] and type in `$('.twtr-widget').hide();` into your console. Wait a couple minutes to make sure feeds would definitely be going in, then go back and type `$('.twtr-widget').show();` into your console. You should see a pile of dotted borders as if the new tweets borders have gone in but not the actual content. – igneosaur Jul 04 '11 at 15:35
  • I was doing that in Chrome @igneosaur. Originally, I didn't see the problem. Since then I did. However, check out the revised answer. – Jason Gennaro Jul 04 '11 at 15:37
1

Shrink the div down to nothing, hiding the overflow:

#your-div {
  height: 0;
  overflow: hidden;
}
scronide
  • 12,012
  • 3
  • 28
  • 33