CODEWITHSUNDEEP
jquery
Keith Costa
Keith Costa

Reputation: 1793

Need to simulate notification message using jQuery

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);
});
  1. Why is right 10px in CSS?
  2. Why has line-height been set in CSS?
  3. What does animate do here? If it will increase 10px then how long it will increase?
  4. What is the meaning of this line: $(this).animate({ bottom: "-200px" }, 250);?

Please help me to understand those above point. Thanks.

Upvotes: 1

Views: 631

Answers (4)

Artur Keyan
Artur Keyan

Reputation: 7683

  • 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

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

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

Upvotes: 0

Gerard
Gerard

Reputation: 4848

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.

Upvotes: 0

Sang Suantak
Sang Suantak

Reputation: 5265

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

Upvotes: 1

Related Questions