Geek Answers Handbook

How can I get my “warning bar” to click everything on my website?

I wrote a warning bar:

alertmsg{ font-family:Arial,Helvetica,sans-serif; font-size:135%; font-weight:bold; overflow: hidden; width: 100%; text-align: center; position: fixed; top: 0px; left: 0px; background-color: #fff; height: 56px; color: #000; font: 20px/40px arial, sans-serif; display:none; padding-top:12px; -webkit-box-shadow: 3px 3px 5px #888; -moz-box-shadow: 3px 3px 5px #888; box-shadow: 3px 3px 5px #888; } function alertbar(m, timeout){ if(!timeout){ var timeout = 3000; } var $alertdiv = $('<div id = "alertmsg"/>'); $alertdiv.text(m); $alertdiv.bind('click', function() { $(this).slideUp(200); }); $(document.body).append($alertdiv); $("#alertmsg").slideDown("slow"); setTimeout(function() { $alertdiv.slideUp(200) }, timeout); return false }

Pretty simple. I call alertbar("Go go go!"); to issue this warning.

However, it covers the body page. I want it to be like a “click” on the whole page (all elements) ... sort of like StackOverflow, I think.

+4
source share
4 answers

I think this is the position: fixed problem. This will position your element relative to the window and pull it out of the normal flow.

Use position:static (or relative ) and make sure the alertmsg element is at the top of the markup.

+5
source

There are several things you should do:

  • Change the CSS position attribute in the “warning panel” so that it is not fixed and just normal (remove this property).

  • Change your JavaScript to prepend alertdiv, not add it. This will make him first in the body.

    .

    $ ('body') before the name ($ alertdiv);

  • Slide your $ alertdiv down normally.

Now, something that you have not taken into account in your code is what happens when you run the alertbar more than once. You will add more than to the body. If this is a concern, try doing something like this:

 var exists = $('#alertmsg').length > 0; var $alertdiv = exists ? $('#alertmsg') : $('<div id="alertmsg" />');

Now add only the body if it no longer exists.

 if (!exists) $('body').prepend($alertdiv);
+3
source

If you want to keep position: fixed , just open the upper body to the size of the notification window.

 $("#alertmsg").slideDown("slow", function() { var paddingTopStr = "+" + $(this).outerHeight().toString() + "px"; $('body').css({ paddingTop: paddingTopStr }); });

You will also need to return the filling after:

 setTimeout(function() { var paddingTopStr = "-" + $(this).outerHeight().toString() + "px"; $('body').css({ paddingTop: paddingTopStr }); $alertdiv.slideUp(200) }, timeout); }

The same goes for the click event.

+2
source

You can wrap the rest of your content (to be clicked) in a separate div, and then insert your warning panel in front of it

0
source

More articles:


All Articles