CODEWITHSUNDEEP
jqueryhtmlcss
Josh Potter
Josh Potter

Reputation: 1729

Positioning a div right below notification center

I'm trying replicate what many websites call a "notifications" center. YouTube has a fancy one set up where it positions the drop down perfectly below the icon and makes sure not to extend it too far or it will be off the page.

Here is what i'm working with: http://jsfiddle.net/rgt03mu4/19/

But it seems no matter what I do, I can't seem to get my dropdown menu to go directly below my bell. It's all because of this code:

.notification-popup-container-main {
position: absolute;
}

How can I change the positioning to make it go directly under the "notification-link" but not extend too far off the page? Everytime I came close to positioning it in the right direction, the alerts would extend off the page forcing the user to scroll to see them.

Upvotes: 1

Views: 1536

Answers (3)

Guest
Guest

Reputation: 51

Like this one here? I've forked ur fiddle.

http://jsfiddle.net/6j8g2jvf/1/

<div class='notification-popup-container-main'>
    <div class="div-right">
        <a id='notification-link' class='block' href='#'>
            <img src='http://docs.blackberry.com/en/smartphone_users/deliverables/50635/mwa1358788933767_lowres_en-us.png' alt='Notifications' />
        </a>
    </div>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 1</div>
        <div class="notification-popup-message">MESSAGE 1</div>
    </div>
</div>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 2</div>
        <div class="notification-popup-message">MESSAGE 2</div>
    </div>
</div>
<div class='notification-popup-container'>
    <div class='notification-popup-body'>
        <div class="notification-popup-title">TITLE 3</div>
        <div class="notification-popup-message">MESSAGE 3</div>
    </div>
</div>
</div>


.div-right {
    padding-top: 8px;
}

.div-right a {
    margin:0 auto;
}

.block {
    display:table;  
    padding: 3px;
}
.notification-popup-container-main {
position: absolute;
    right:0;
    top:50px;
}
.notification-popup-container {
    background-color: #fff;
    border: 1px solid rgba(100, 100, 100, .4);
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    overflow: visible;
    display: none;
}

.notification-popup-body {
    padding: 10px 0px 0px 0px !important;
}

$(function() {
    var nContainer = $(".notification-popup-container");

    //notification popup
    $("#notification-link").click(function() {
        nContainer.toggle();
        return false;
    });

    //page click to hide the popup
    $(document).click(function() {
        nContainer.hide();
    });

    //popup notification bubble on click
    nContainer.click(function() {
        return false;
    });
});

Upvotes: 0

thodic
thodic

Reputation: 2259

You probably want relative positioning to make it responsive:

.notification-popup-container-main {
    position: relative;
    float: right;
    top: 40px;
    right: -30px;
    width: 100px;
}

However, there are many ways to solve this, do try the other suggestions and find which works best for your application.

Upvotes: 1

pavel
pavel

Reputation: 27092

Add right and top coordinates.

.notification-popup-container-main {position: absolute; right: 0; top: 50px;}

http://jsfiddle.net/rgt03mu4/20/

Upvotes: 2

Related Questions