How to show a notification bar on Top after n seconds with transition from top to down?


Tags: javascript,jquery,css

Problem :

In lot of mobile sites, I see notification appear with animation from top to down after some seconds. Currently, I don't remember the sites. I was able to find how to show top notification, but unable to find how to animate this using CSS 3 transition or javscript/jquery. Here is the link which I found, http://www.red-team-design.com/cool-notification-messages-with-css3-jquery



Solution :

This is how I solve the issue,

<div class="notify-bar notify-bar-height" style="display: none">
            Intall ABC!
        </div>
<script>
            setTimeout(function () {
                $('.notify-bar').show().addClass('notify-bar-height-change');
            },2000)
        </script>

.notify-bar{
        background-size: 40px 40px;
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);                                      
         box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         width: 100%;
         border: 1px solid;
         color: #fff;
         text-shadow: 0 1px 0 rgba(0,0,0,.5);
         background-color: #4ea5cd;
         border-color: #3b8eb5;
         padding: 5px;
}

.notify-bar-height {
    height: 0;
    -webkit-transition: height 0.5s ease;
    -moz-transition: height 0.5s ease;
    -o-transition: height 0.5s ease;
    -ms-transition: height 0.5s ease;
    transition: height 0.5s ease;
}
.notify-bar-height-change {
    height: 20px;
}

    CSS Howto..

    CSS - fluid design, how to correctly position right floats below the opposing element?

    Linked text a few lines below hamburger menu is not showing as linkified, but shows fine further down

    CSS clearfix how to over come the inability to center an element using it

    How to have dynamic image as CSS background?

    How to set transition from JavaScript while still inheriting style from CSS [closed]

    css nested classes, how to not repeat code?

    How to perform --include-css when using the Jekyll stylus plugin

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How to make rounded tabs with css? [closed]

    Show/hide css class by url parameter with php

    How can I center div in div in IE7

    How to achieve CSS transitions with delay timers but without any easing function?

    How to restore CSS style to its super class

    How can i get the source of the image in one div to another?

    How to center HTML content

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    how to resize background image of body in aspx page

    PHP: How to style session output [closed]

    How can I edit a web part's .css file on the fly in MOSS 2007?

    How to center verticaly n inline containers with different font-size?

    how to add space at top of page

    How to re-use .less and generated CSS across projects?

    How do I make it impossible to highlight text using CSS?

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    css: how to vertically align table within div

    How to assign JavaScript value to a CSS property? [duplicate]

    My CSS looks perfect on desktop, but leaves a 2-5 pixel line to the right on mobile, how do I find the issue?

    How to remove css class with some effect using jQuery?

    Jquery how to get specific css values from css properties with stacked value options such as font-family

    How to make non standard shape buttons, non clickable outside of it's border