Grow your CSS skills. Land your dream job.

Nesting logic help!

  • # May 24, 2013 at 12:29 am

    Howdy ya’ll, not really sure if this is a html question or css, OR BOTH!!

    I have a content area, sidebar, and an output area nested inside of content. I want to use jQuery UI’s resizable method and my output div works. My sidebar does not however. I think this could be related to me using display:table to create a “responsive” content area with a fixed sidebar. Im either lost or super tired, you guys know how it gets.

    Thanks for any responses, i will reply with any info or insight. Thanks guys/gals!

    FULLSCREEN: http://codepen.io/johnmotyljr/full/IGgrJ

    EDITOR: http://codepen.io/johnmotyljr/pen/IGgrJ

    # May 24, 2013 at 3:58 pm

    Hey, really busy, so I wasn’t able to get the horizontal resizing of the content and output to stop properly, but hopefully this will get you half way there:

    var $win = $(window),
    $side = $(‘#sidebar’),
    $content = $(‘#content’),
    $output = $(‘#output’),
    $ht = $(‘#main_wrap, #content’);

    $output
    .css(‘bottom’,’0′)
    .resizable({
    handles: ‘n’
    });

    $win.resize(function() {
    var _wh = $win.height();
    $ht.height(_wh – 78);
    }).resize();

    $content
    .bind(“resize”,function (event, ui) {
    var ww = $win.width();
    $output.width( ui.size.width );
    $side.width( ww – ui.size.width );
    })
    .resizable({ handles: ‘e’ });

    # May 24, 2013 at 5:43 pm

    @Mottie Hey man, thanks for the start… I am much more well rested this evening to start tackling my project. Since i made a bunch of mistakes i am restarting. Im marking solved for now but i will repost a link when im done if you wanna check it out.

    Thanks again for taking your time to help me out. It is really appreciated.

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

You must be logged in to reply to this topic.

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