Question

I am trying to make an alert bar slide in over my header bar in jQuery mobile. So far I have got the slide in down, but I am having trouble with the CSS. I originally tried make the outer most div with position: absolute; top 0px: which makes it slide over the header from the top, but then inside Safari on the iPhone, the close button is cut off and you have to scroll to the right. How do I fix that?

Here is the HTML code for the alert bar:

        <div class="ui-bar ui-bar-b error" style="position: absolute; top: 0px;">   
                <h3>
                    Form Validation Errors 
                </h3>
                <div style="display:inline-block; width:8%; margin-top:0px; float: right;">
                    <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" class="dismiss_error">Dismiss</a>
                </div>
                <ul class="validation_errors_list"></ul>
        </div>

Answer 1

I ended up finally use this CSS. The alert bar slides directly over the header.

//you only really need this just to get it to slide over the header nicely and make sure you use top:0 if you always want it to be at the top. The plugin I made shows in/out the error message at position you are scrolled to in the document
 .alert{
    position: absolute; 
    z-index: 9998; 
    width: 100%; 
    height: 30px; 
    display: none;
    color: #ffffff;
    text-shadow: none;
    font-family: Helvetica,Arial,sans-serif;
}

//This CSS is only used if you have an X button to close the alert. See the plugin below.
.alert-button-container{
     display:inline-block; 
     margin-top:-10px;
     margin-right: 15px;
     float: right;
  }

Here is my HTML Code (note the ui-bar class is a jQuery mobile class that you need to add so you don’t have to mess around some of the width and sizing stuff).

<div class="ui-bar alert">
    <div class="alert-message"></div>
</div>  

Here is a custom plugin I made from jQuery to do this alert bar.

Features + Use Cases

Features: Fades In/Out gracefully, can inject custom HTML error messages, can render a list of messages, slides over header, has a close X button for error messages, works on all browsers that I have tested so far (IE, iOS, Firefox), error messages appear at the position you are scrolled to in the document. No more have to scroll up to see the error 🙂

1. Form Validation Errors. You can pass in an array of error messages and it will parse it into a list.

       var messages = new Array();
       messages[0] = 'My Message';
   
       //prevent from showing accidentally
       if(messages.length > 0)
       {
           $(".alert").alertBar('error', "<h2>Form Validation Errors</h2>", {
               'errorMessages':  messages
           });
       }
   

2. Success or action messages:

       $(".alert").alertBar('success', 'Removed From Your Itinerary');
   

////////////plugin code

     (
    function($) {
                 $.fn.alertBar = function(alertType, alertMessage, userOptions) {  //Add the function
            var options = $.extend({}, $.fn.alertBar.defaultOptions, userOptions);
             var $this = $(this);
    $this.addClass(options.cssClass)
    .empty()
    .html(alertMessage)
    .css('top', $(document).scrollTop());

    if(alertType == 'success')
    {
        $this
        .fadeIn()
        .addClass('alert-success')
        .delay(options.animationDelay)
        .fadeOut();
    }

    if(alertType == 'error')
    {
        var button = $('<div>')
        .addClass('alert-button-container')
        .append(
            $('<a>').attr({
                'href': '#',
                'data-role': 'button',
                'data-icon': 'delete',
                'data-iconpos': 'notext',
                'class': 'dismiss-error'
            })
            .append('Dismiss')
            );

         //build error container
         $this
        .addClass('alert-error')
        .append(button);

       //add optional items to error container
       if(options.errorMessages)
        {

            var $messageList = $('<ul>').addClass('error-message-list');
            for ( var i=0, len=options.errorMessages.length; i<len; ++i ){
                $messageList.append(
                                    $('<li>')
                                    .append(options.errorMessages[i])
                                   );
            }

            $this.append($messageList);

        }

        //show alert bar
        $this
        .trigger('create')
        .fadeIn();

        $(".dismiss-error").live('click', function(){
            $this.fadeOut();
        });
    }

    if(alertType == 'informational')
    {
        $this
        .addClass('alert-informational')
        .fadeIn()
        .delay(options.animationDelay)
        .fadeOut();
    }

    return $this;
};

$.fn.alertBar.defaultOptions = {
    cssClass : 'alert',
    alertBarType: '',
    animationDelay: 1500
};
})(jQuery);  

additional CSS classes if you use this. It just changes the color of the bar.

.alert-success{
background-color: #8cc63f;

}

 .alert-error{
 background-color: #ed1c24;
 height: auto;

}

 .alert-informational{
 background-color: #0071bc;

}

Example picture: