Need to simulate notification message using jQuery

Question

I want to show a message at the bottom-right of the page. I searched Google and I got the right code for it but I have some confusion...some please help me to understand.

Here is the code:

<a href="#" class="notify">Show Notification</a>
<div id="notify">You are sexy today!</div>

#notify {
    position: fixed;
    right: 10px;
    bottom: -200px;
    width: 150px;
    line-height: 80px;
    text-align: center;
    background-color: #ccc;
}

$('.notify').click(function(e) {
   e.preventDefault();
   $('#notify').animate({ bottom: "10px" }, 250);
});

$('#notify').click(function() {
   $(this).animate({ bottom: "-200px" }, 250);
});

Why is right 10px in CSS?
Why has line-height been set in CSS?
What does animate do here? If it will increase 10px then how long it will increase?
What is the meaning of this line: $(this).animate({ bottom: "-200px" }, 250);?

Please help me to understand those above point. Thanks.

This is your 78th question, and people are still having to format your code for you. With respect, that's really not okay, you should have had the hang of formatting code about 76 questions back. When you were asking your question, there was this handy How to Format box to the right. Well worth reading. Also refer to the [?] button above the text area, which includes lots of other useful information, including this link: stackoverflow.com/editing-help — T.J. Crowder
– T.J. Crowder, Commented Nov 29, 2011 at 9:27
Formatting properly particularly matters in this case, because we've ended up with a mish-mash of HTML, CSS, and JavaScript in one block, where presumably they're separate in your code. — T.J. Crowder
– T.J. Crowder, Commented Nov 29, 2011 at 9:30

Sang Suantak · Accepted Answer · 2011-11-29 09:25:59Z

1

Probably to give space between right window & the notification div
Like @Artur Keyan said.
Animate will place your div at 10px above the bottom of the document in 250 ms
It will place your div to its default location (as specified in the css) in 250 ms

answered Nov 29, 2011 at 9:25

Sang Suantak

5,2652 gold badges30 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keith Costa Over a year ago

$('#notify').animate({ bottom: "10px" }, 250); the above line means that it will increase the notify box up to 10px from its hidden positions. so jquery will execute a loop to push up the div from it's current position to upward untill it's bottom is not 10px. am i right?

Sang Suantak Over a year ago

It will simply push the div from its current position until the difference between the bottom of the document & bottom of the div becomes 10px.

Yes Barry · Accepted Answer · 2011-11-29 09:30:38Z

1

line-height is for vertical align
resizing will last 250 ms
$(this).animate({ bottom: "-200px" }, 250) means: the css property bottom set the value -200px and it is last 250ms

edited Nov 29, 2011 at 9:30

Yes Barry

9,9465 gold badges54 silver badges77 bronze badges

answered Nov 29, 2011 at 9:23

Artur Keyan

7,69312 gold badges54 silver badges65 bronze badges

2 Comments

Yes Barry Over a year ago

More like it's used to create the illusion of vertically centered text without having to use padding or margins.

Keith Costa Over a year ago

$('#notify').animate({ bottom: "10px" }, 250); the above line means that it will increase the notify box up to 10px from its hidden positions. so jquery will execute a loop to push up the div from it's current position to upward untill it's bottom is not 10px. am i right?

thecodeparadox · Accepted Answer · 2011-11-29 09:28:40Z

0

Ans 1: it means the notification makes gap with the right edge of browser of 10px

Ans 2: line height for vertical alignment and making gap among lines

Ans 3: it will increase the notify box up to 10px from its hidden positions

Ans 4: it means to hide the notify box below the browser like the sunset in the sea water edge

answered Nov 29, 2011 at 9:28

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

1 Comment

Keith Costa Over a year ago

u said Ans 3: it will increase the notify box up to 10px from its hidden positions. so u r trying to say jquery will execute a loop to push up the div from it's current position to upward untill it's bottom is 10px. am i right?

Gerard · Accepted Answer · 2011-11-29 09:28:04Z

0

Well to answer 1 and 2: its simply styling the element. "right: 10px" creates a space of 10px to right of the element (thus pushing it left). Lineheight sets the space between lines of text, again styling.

I'd suggest you download Firefox with Firebug so that you can inspect these page elements and fiddle around with them in real time.

Your animate function is called when you click #notify. It will animate the section to be shown in 250 milliseconds and, just like right pushed the element left, bottom will push the element down 200px.

answered Nov 29, 2011 at 9:28

Gerard

4,8786 gold badges56 silver badges80 bronze badges

2 Comments

Keith Costa Over a year ago

$('#notify').animate({ bottom: "10px" }, 250); the above line means that it will increase the notify box up to 10px from its hidden positions. so jquery will execute a loop to push up the div from it's current position to upward untill it's bottom is not 10px. am i right?

Gerard Over a year ago

It will push it up 10px yes but there's no loop involved.

Collectives™ on Stack Overflow

Need to simulate notification message using jQuery

4 Answers 4

2 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related