digwp expanding code box almost works, a little help?

[rgregory]

I followed the instructions from
http://digwp.com/2009/07/making-an-expanding-code-box/
and came up with this
http://www.greenermountain.com/test/numberone/
the expanding code box works, but is hidden when it expands? Can anyone help me, I have tried to play with the z-index and can’t get resolution. I have also tried various combinations of overflow on the various divs to no avail.

You can see the code box expand, but you can’t see past the .content div when it expands past this div.

Thanks for any help, this is the jqueary used

Code:

$j(“pre”).hover(function() {
var codeInnerWidth = $j(“code”, this).width() + 10;
if (codeInnerWidth > 563) {
$j(this)
.stop(true, false)
.css({
zIndex: “100”,
position: “relative”
})
.animate({
width: codeInnerWidth + “px”
});
}
}, function() {
$j(this).stop(true, false).animate({
width: 563
});
});

[Chris Coyier]

There is overflow: hidden; on about four differnet parent elements of that pre block, which is why it cuts off. Can’t have that if you want it to expand beyond the border.

[rgregory]

Thank you so much, I thought it was that, but I guess I didn’t look deep enough. I’ve set them to overflow: visible, I don’t think there will be any repercussions for that.

I’d like to package this up as a plug-in if you don’t mind Chris? I would give all kinds of credit of course, but I think it would be nice to do as I really enjoy it and I think I can make it happen for others. Let me know, I won’t go ahead without your approval.

I was thinking that the WP visual editor has <pre> tags but not code. I could add the code tags with jQuery append and prepend and make it work from the visual editor.

[rgregory]

Chris, I waited a while for a response, but since my topic slipped off the front page, I thought it wasn’t going to get answered.

I went ahead and created the plugin and am hosting it on my blog with a couple of posts containing video tutorials on how I created it.

http://www.greenermountain.com/2009/11/ … es-plugin/

Let me know if you have a problem with this, I tried to give you credit where ever I could.

Rusti

[Author]

Posts