CODEWITHSUNDEEP
javascriptjqueryhtmlcss
weeJimmy
weeJimmy

Reputation: 119

Javascript fade in not working

I'm using a bit of javascript to fade in a couple of message bars at the top of my page - a bit like stackoverflow does :)

I have:

<div id='message' style="display: none;">
    <span>Wow, that was quick! - below is a preview of your page.</span>
    <a href="#" class="close-notify">X</a>
</div>
<div id='message' style="display: none;">
    <span>Try posting something interesting</span>
    <a href="#" class="close-notify">X</a>
</div>

CSS:

#message {height:30px;width:100%;z-index:105;text-align:center;color:white;padding:10px 0px 10px 0px;background-color:#8E1609;}
#message span {text-align: center;width: 95%;float:left;}
.close-notify {white-space: nowrap;float:right;margin-right:10px;color:#fff;text-decoration:none;border:2px #fff solid;padding-left:3px;padding-right:3px}
.close-notify a {color: #fff;}

and Javascript:

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

But unfortunately only the first message displays. How come? Surely the second one should show as well?

thanks

Upvotes: 0

Views: 2628

Answers (9)

MattP
MattP

Reputation: 2863

You shouldn't have multiple items with the same id, use a class instead.

Upvotes: 0

Maximilian Ruta
Maximilian Ruta

Reputation: 518

ID's are unique! You cannot have 2 Elements with the same ID. Use Classes

Upvotes: 0

ipr101
ipr101

Reputation: 24236

You shouldn't have elements with the same 'id'.

Upvotes: 0

Rumplin
Rumplin

Reputation: 2768

You can't have two identical ID's

Upvotes: 0

yoozer8
yoozer8

Reputation: 7489

It's because they both have the same id. The fadeIn is only being called for the first one. If you want to do it for both (or all) of them, apply a class and do something like

$(".classname").each(...

Upvotes: 0

Niko
Niko

Reputation: 26730

You can't use an ID for two elements, try using a class!

<div class='message' style="display: none;">

$('.message').fadeIn();

Upvotes: 0

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

Both of your elements have the same ID #message - an ID should be unique, so this should be a class instead.

Upvotes: 0

Jon
Jon

Reputation: 437336

id attributes should be unique among all elements in the page. Change the HTML, CSS and JavaScript to use class="message" instead of id="message" and it will work fine.

Technically what happens here is that jQuery sees the #message selector and tries to find the element using document.getElementById (which is fastest). This function returns only one element, in this case the first one. So the second never has a chance to be processed.

You also have a bug: As the code stands now, hitting the "close" link will make all messages disappear. You need to tweak the click handler a bit to make it behave as expected.

See all of this in action here.

Upvotes: 2

Jamie Dixon
Jamie Dixon

Reputation: 53991

An ID should only be used once on the page. It is a unique identifier.

You'll want to use a class instead if you have multiple items.

Html

<div class="message">Some Message</div>
<div class="message">Some Other Message</div>

jQuery

$('.message').fadeIn('slow');

Here's a demo: http://jsfiddle.net/GBjxH/

Upvotes: 2

Related Questions