Grow your CSS skills. Land your dream job.

digwp expanding code box almost works, a little help?

  • # October 30, 2009 at 12:00 pm

    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
    });
    });
    # October 30, 2009 at 5:36 pm

    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.

    # October 30, 2009 at 10:03 pm

    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.

    # November 18, 2009 at 12:00 pm

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".