CODEWITHSUNDEEP
jquery
Morris Zieve
Morris Zieve

Reputation: 73

I would like to intergrade overflow hidden with the clicking outside the div function

Whenever I add the overflow visible to the event targets, the overflow hidden and visible will not work on the other overlay. There are two overlay pop ups and the code works fine until I add any overflow information to the event targets. I would like to hide overflow on body when clicking the overlay pop ups and have it re-appear when you click outside the overlay or on the close button. Also, all my divs are in relative position.

JQUERY

$(document).ready(function()
{

    $MainHeadline = $("#MainHeadline, #mainHeadlineLink");
    $MainHeadlineClose = $(".closeMain");
    $SideHeadline = $("#SideHeadlineOne, #SideOneLink");
    $SideHeadlineClose = $(".closeSideMain");

    $MainHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden');
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $MainHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".MainHeadlineOverlay").fadeToggle("fast");
    });

    $SideHeadline.click(function(event)
    {
        event.preventDefault();
        $('html, body').css('overflowY', 'hidden'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $SideHeadlineClose.click(function(event)
    {
        $('html, body').css('overflowY', 'visible'); 
        $(".RightHeadlineOverlayOne").fadeToggle("fast");
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length)
        {
            $(".MainHeadlineOverlay").hide();
        }
    });

    $(this).click(function(event) 
    {
        if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length)
        {
            $(".RightHeadlineOverlayOne").hide();
        }
    });

});

HTML

<body>
<div class="Headlines">
<div class="mainheadline">
    <div class="headline">
        <a href="" id="MainHeadline"><img src="picture.jpg" width="100%" height="100%"></a>
        <div class="HeadlineTitle">
            <h1><a href="" id="mainHeadlineLink">Title</a></h1>
            <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
        </div>
    </div>
    <div class="sideheadline">
        <div class="sideheadlineOne">
            <div class="imageheadlineOne">
                <a href="" id="SideHeadlineOne"><img src="picture.jpg" height="100%;" width="100%"/></a>
                <div class="sideHeadingOne">
                    <h1><a href="" id="SideOneLink">Title</a></h1>
                    <p> by <a href="">Author Date</a><a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
        </div>
        <div class="sideheadlineTwo">
            <div class="imageheadlineTwo">
                <a href="" id="SideHeadlineTwo"><img src="picture.jpg" height="100%;" width="100%"/></a>
                <div class="sideHeadingTwo">
                    <h2><a href="" id="SideTwoLink">Title</a></h2>
                    <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
            <div class="imageheadlineThree">
                <a href="" id="SideHeadlineThree"><img src="picture.jpg" height="100%;" width="100%;"/></a>
                <div class="sideHeadingThree">
                    <h2><a href="" id="SideThreeLink">Title</a></h2>
                    <p> by Author Date <a href=""><image src="twitter.png" width="20px" height="20px"/></a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>

Link: https://jsfiddle.net/3pdod8cr/

Upvotes: 0

Views: 57

Answers (1)

user4639281
user4639281

Reputation:

First: There is no CSS property overflowY.

$('html, body').css('overflowY', 'hidden');

However, there are CSS properties named overflow-y, overflow-x and simply overflow. In this case there is no reason not to use the simplified overflow property.

$('html, body').css('overflow', 'hidden');

Second: You have to set overflow: visible again when the user clicks outside the modal.

$(this).click(function (event) {
    if (!$(event.target).closest('.MainHeadlineOverlay-wrapper, #MainHeadline').length) {
        $('html, body').css('overflow', 'visible');
        $(".MainHeadlineOverlay").hide();
    }
});

$(this).click(function (event) {
    if (!$(event.target).closest('.RightHeadlineOverlayOne-wrapper, #SideHeadlineOne').length) {
        $('html, body').css('overflowY', 'visible');
        $(".RightHeadlineOverlayOne").hide();
    }
});

There are much better ways of doing this, but that is beyond the scope of the question.

Third: For an element to have an overflow, it first has to have a set height. Simply setting the height to 100% will allow overflow: hidden to function as you want it to.

html, body {
    height: 100%;
}

Demo

Upvotes: 2

Related Questions