1

I'm working with a jQuery message box like this. I would like to use this in my web application, but still I'm encountering one problem. This area of whole popup should be reserved. If you see this link you found if popup in closed conditions then when you move the cursor to the bottom then it's become handy cursor. This shows one bug.

However all I want to do is to make one jQuery notification box (just like our stack overflow) that list messages and when it goes closed no fixed area reservation problem.

Anyone know of a good plugin for this?

Could any one have solution for this ???

Blunderfest
  • 1,854
  • 1
  • 28
  • 46
Shal
  • 319
  • 4
  • 8
  • 25
  • You can use toggle() with the ul #notificationMenu function in jquery for simply showing or hiding the notification box instead of toggling the class as "open". – Kunjan Thadani May 27 '14 at 13:01

1 Answers1

1

The problem was that the message box never was hidden per se, it just had an opacity value of 0, thus not visible but still taking place. What you need to do is change its display property value, just like StackOverflow does on its message box.

1. Remove these two lines from .notifications:

transition: .2s;
opacity:0;

2. Add this line to .notifications (if you want the message box to be hiddne by default):

display:none;

3. Change the jQuery code to:

$(document).ready(function () {
  $(".notificationicon").click(function () {
   
    $("#notificationMenu").fadeToggle(200);
    
  });
});

codePen demo.

Customization

If you want to customize the easing you can change fadeToggle(200); to fadeToggle(200, 'EASING-TYPE'); where EASING-TYPE is a string value indicating which function to use for the transition (default is swing but can also be linear).

Community
  • 1
  • 1
display-name-is-missing
  • 4,424
  • 5
  • 28
  • 41
  • can u customize it's foundation style sheet for only this control. see this [question](http://stackoverflow.com/questions/23863668/how-to-omit-style-sheet-to-apply-style-to-other-web-page). – Shal May 27 '14 at 14:02
  • 1
    @Shal did you add `display:none;` to `.notifications`? That should solve the problem with the dialog being open. – display-name-is-missing May 27 '14 at 14:38
  • thanks so much can u see my another question that was i link out to u. – Shal May 28 '14 at 06:02