dem divs

March 16, 2012 1:20 PM

I've implemented a streaming twitter widget into the site I manage. However, for some weird reason the script is creating a div or something that is overlaying the entire sidebar, making links above it unclickable.

No idea what's going on here. Any ideas?

The site is frenchbroadchocolates.com. The twitter widget is on the right side, near the bottom. It's creating its own overlay (i can see it in chrome inspector) that is making it impossible to select or click on stuff beneath it.

Here's the code for the widget below (I changed the script tags to have brackets so they would show up in this post):





[script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"][/script]

[script]


new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 230,
height: 170,
theme: {
shell: {
background: '#c4e4ff',
color: '#0d0d0d'
},
tweets: {
background: '#c4e4ff',
color: '#0d0d0d',
links: '#df2f6d'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
behavior: 'all'
}
}).render().setUser('chocolatelounge').start();

[/script]





posted by lazaruslong to computers & internet (10 answers total)

I can get it to display properly by setting the following CSS properties on the DIV containing the twitter widget:

overflow: auto; /*or hidden would work too*/
width: 230px;
height: 295px;
posted by axiom at 1:34 PM on March 16, 2012 [1 favorite]

Excellent. Would you mind treating me like an idiot and walking me through how I would do that?
posted by lazaruslong at 1:37 PM on March 16, 2012

Nevermind. I figured it out based on your help, and now it's working. 4 hours on stackoverflow vs 20 mins on MetaFilter. Shoulda known to come here first.
posted by lazaruslong at 1:43 PM on March 16, 2012

Not at all (though I'll try to refrain from treating you like an idiot). Looking at the structure of that page in Chrome dev tools, there's an area for the sidebar (a div with id="sidebar") which seems to contain 5 items (in order):

1) a div with id="sidebar_search" [incidentally, this is getting buried under the "spring chocolates available" picture, see below]
2) a div with id="sidebar_social_media_menu" [like button, etc.]
3) a div with id="sidebar_articles" [articles area]
4) a div with id="sidebar_events" [events area]
5) a div with no id, but which (in the rendered page) contains the html generated by the twitter plugin. This is the one to which you need to add the aforementioned attributes (actually, height is unnecessary), like so:

<div style="overflow: hidden; width: 230px;">

Up there in #1 I mentioned the search form div is getting buried under the "spring chocolates" pic, I think because you're using float:right and then just setting some padding on the #sidebar CSS class to offset the actual content to fall below the "spring chocolates" image. You probably want to reorganize the content area so that there's the header pic in its own div, then another div containing everything below that (into which the sidebar goes, sans 255px of padding).
posted by axiom at 1:48 PM on March 16, 2012

I would also add a "clear:both" to #twitter_widget. Your other divs in id="sidebar" are float:lefts and the Twitter widget is currently showing up to the right of those divs in Firefox
posted by FreezBoy at 1:57 PM on March 16, 2012

axiom: I did that totally differently I think. What I did was name the div twitter_widget and then edit the layout.css file to include a css rule with the parameters you specified. Should I undo that and do it the way you just said? Does it matter?

FreezBoy: THANK YOU!!! Gawd, I didn't even notice that. I added it, so hopefully that fixes the display error in FF. Gonna check that soon. Also, it fixed an issue I hadn't noticed before. The "Join the Conversation" link on the widget was unclickable until I added the clear: both to the css rule, and now it is fixed too!
posted by lazaruslong at 2:25 PM on March 16, 2012

Should I undo that and do it the way you just said? Does it matter?

No, the way you did it is fine too (probably better in terms of maintainability, but I was shooting more for "dirt simple").

FreezeBoy makes an excellent point about the magic of introducing a div with just clear:both as its style when using floating blocks. You may also want to consider whether you can achieve your desired behavior without using float (as far as I can tell, with this page, you definitely can), as I tend to think float is rarely the best answer for achieving the layout you want. But worry about that once you get it working (or come across an insurmountable problem), the perfect is the enemy of the good.
posted by axiom at 2:34 PM on March 16, 2012 [1 favorite]

re: search form / cleanup, the search form is actually turned off. it was broken as hell as a deliverable, and I don't know how to fix it, so I just turned it off. I don't remember how I did that either.

Re: organizing, yeah there's a ton of sloppiness and cruft in the codebase. I'm holding it together with both hands until we replace our external coding resource. As you can probably tell, I am an enthusiastic amateur in this area. =)
posted by lazaruslong at 2:36 PM on March 16, 2012

awww man, you can't see it at all in IE! wtf?
posted by lazaruslong at 2:54 PM on March 16, 2012

nevermind, just didn't load the first time.
posted by lazaruslong at 2:54 PM on March 16, 2012