Notify pulldown (top)

by slolife

HTML

<div id="notifycenter">
    <div id="notifyhandle">
        <div class="line"></div>
        <div class="line"></div>
    </div>
    <div id="notifyzone" style="display:none">
        <ul id="notifications">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>
</div>
<div id="content">
    <p>
        Features:
        <ul>
            <li>Adjusts to window resizing</li>
            <li>Hovers over content</li>
            <li>Adjusts to content in notification zone</li>
            <li>Stays visible until handle is clicked or click outside of notify center</li>
        </ul>
    </p>
<p id="actions" style="text-align:center">
    <a href="#" id="add">Add notificaiton</a>
    |     
    <a href="#" id="remove">Remove notificaiton</a>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

<p>Curabitur sodales ligula in libero. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. <b>Fusce...

CSS

body {
    font-family:Segoe UI, Tahoma, Verdana, Helvetica, Sans-Serif;
}

#notifycenter {
    height:0;
}

#notifyhandle {
    z-index: 9999;
    position: fixed;
    left: 50%;
    top:0;
    width: 50px;
    height: 15px;
    background-color: #888;
    display: block;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
}

#notifyzone {
    z-index: 9999;
    position: fixed;
    left: 50%;
    top: 0;
    width: 250px;
    background-color: #888;
    color:white;
    display: block;
    border-radius: 0 0 3px 3px;
}
#notifyhandle .line {
    position: relative;
    border-bottom: 1px solid #C4C4C4;
    margin: 4px 5px 0;
}
ul {
    list-style: none;
    font-size: 0.7em;
    padding: 0 1em;
}
li {
    padding:.25em
}

JavaScript

var $notifyzone = $('#notifyzone')
var $notifyhandle = $('#notifyhandle');
var nextNotification = 7;

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) {
      uniqueId = "Don't call this twice without a uniqueId";
    }
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

function centerAcross($el) {
    var ww = $(window).width();
    var ew = $el.width();
    var nl = (ww / 2) - (ew / 2);

    $el.css("left", nl);
}

function pinNotifyHandle() {
    var notifyheight = $notifyzone.height();
    centerAcross($notifyhandle);
    $notifyhandle.css("top", notifyheight);
}

function handleNotifyHandleClick() {
    if ($notifyhandle.hasClass('dropped')) {
        $notifyhandle.css("top", 0);
        $notifyzone.slideUp("fast");

        $notifyhandle.removeClass('dropped');
    } else {
        $notifyzone.slideDown("fast", function() {
            pinNotifyHandle();
        });

        $notifyhandle.addClass('dropped');
    }
}

function handleRemove() {
    $("#notifications").find('li:first').remove();
    if($notifyhandle.hasClass('dropped')) {
        pinNotifyHandle();
    }
    
    return false;
}

function handleAdd() {
    $("#notifications").append('<li>Item ' + nextNotification.toString() + '</li>');
    if($notifyhandle.hasClass('dropped')) {
        pinNotifyHandle();
    }
    
    nextNotification += 1;
    return false;
}

function handleResize() {
    centerAcross($notifyhandle);
    centerAcross($notifyzone);
}

/* setup */
$notifyhandle.click(handleNotifyHandleClick);
$('#add').click(handleAdd);
$('#remove').click(handleRemove);
$(window).resize(function () {
    waitForFinalEvent(handleResize, 500, "handleResize");
});

$(document).click(function(event) { 
    if($(event.target).parents().index($('#notifycenter')) == -1) {
        if($notifyhandle.hasClass('dropped')) {
           ...