hide div hidden:overflow issue

Question

I have 2 divs a & b as well as an close and open button (open is not displayed until click close). When I click close div a is hidden and the width of div b is animated to 100%. This works as expected until I add html,body{height:100%} which I need in order for everything to take up 100% of available browser height. When I click close div b "flashes" because jQuery animate is adding overflow:hidden to it. If I add overflow:visible !important to the element it removes the flash but doesn't animate the way that I want (remove height:100% from #content div to see desired result). How can I get my animation to not do the flash and still achieve the desired result?

HTML

    <div id="content" style="height:100%">
    <div id="openBtn" style="background:aquamarine;display:none;top:0;position:absolute;left:0">Open</div>
    <div id="titleVidNavContainer" style="float:left;width:20%;position:relative;height:100%">
        <div id="videoTitleNav" style="min-height:100%; height:500px;background:purple;white-space: nowrap;">&nbsp;</div>       
        <div id="hideBtn" style="background:aquamarine; position:absolute;top:0;right:-35px;display:inline-block">Close</div>
    </div>
    <div id="videoContent" style="background:aqua;height:500px;width:80%;float:left;height:100%">&nbsp;</div>       
</div>

CSS

html,body{height:100%}

jQuery

         $("#hideBtn").click(function () {
            $(this).hide("slide", { direction: 'left' }, 200);
            setTimeout(function() {
                $("#titleVidNavContainer").animate({ width: '0' });
                $("#videoContent").animate({ width: '100%' }).css({ 'float': 'none' });
                $("#openBtn").show("slide", { direction: 'left' }, 500);
            },300);
        });

        $("#openBtn").click(function () {
            $(this).hide();
            $("#titleVidNavContainer").animate({ width: '20%' },400);
            setTimeout(function() { $("#hideBtn").show("slide", { direction: 'left' }, 200); },500);
            //setTimeout(function() { $("#videoContent").animate({ width: '80%' }).css('float', 'left'); },1000);
            $("#videoContent").css('float', 'left').animate({ width: '80%' });
        });

EDIT: I originally choose not to inlcude the jsFiddle for this, because it wasn't replicating the problem as the way I see it. No matter it might help - jsfiddle.net/comatoseduck/KstHH

EDIT 2: This is as close to a fix as I have gotten so far, though it still doesn't give me the desired result - jQuery .animate() forces style “overflow:hidden”

You will get better results if you show it live on jsfiddle.net — user1786283
– user1786283, Commented Mar 22, 2013 at 19:15
I do have a fiddle for this, it's just not replicating the problem the way I see it so I chose not to include it...but if you think it would help jsfiddle.net/comatoseduck/KstHH — MorningStar
– MorningStar, Commented Mar 25, 2013 at 14:09

isherwood · Accepted Answer · 2013-03-22 19:17:34Z

1

Try

html,body{margin: 0; padding: 0;}

instead of

html,body{height:100%}

answered Mar 22, 2013 at 19:17

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1467267 Over a year ago

Might as well keep the margin: 0px; ;)

MorningStar Over a year ago

Sure this fixes my problem with the "flash", but div a & b are no longer taking up the height of the entire available area :/

isherwood Over a year ago

Style them accordingly. Open a new question with code and a demo if you need help.

MorningStar Over a year ago

Why would I open a new question when I stated that the requirements of this issue were for the height of div a & b be 100% of available browser height?

Collectives™ on Stack Overflow

hide div hidden:overflow issue

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related