CODEWITHSUNDEEP
javascriptjquery
GRowing
GRowing

Reputation: 4717

jQuery - multiple instances of the same lightbox

I seem to have a bit of a problem with initiating the same light-box from a click on two elements in the same page...

My html looks like this

<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>


<!-- Wrapper Start -->
<div id="tbc_wrapper">
    <div id="lightboxon">Load Template Editor 1</div>
        </br></br>
    <div id="lightboxon">Load Template Editor 2</div>
</div>
<!-- Wrapper End -->


<?Php
    include('instOneTb.php');
?>  
<script src="js/editor.js"></script>

</body>

This line of code

<div id="lightboxon">Load Template Editor 1</div>

and this line of code

<div id="lightboxon">Load Template Editor 2</div>

are each supposed to bring up an instance of the lightbox ..

When I click on the first one, I get the light box no problem. When I click on the second one nothing happens.

What am I know knowing here that I should learn? Thanks!

Upvotes: 0

Views: 303

Answers (3)

TheCarver
TheCarver

Reputation: 19713

You have used the same ID in both buttons. ID's are supposed to be unique and this seems to be your problem.

You could either:

1) Change the ID's to lightboxon1 and lightboxon2 and change the JS to suit. Your JS could possibly look something like this:

<div id="lightboxon1">Load Template Editor 1</div>
<div id="lightboxon2">Load Template Editor 2</div>

$('#lightboxon1, #lightboxon2').click(function() {
    // open lightbox
});

2) Change the ID's to classes instead.

<div class="lightboxon">Load Template Editor 1</div>
<div class="lightboxon">Load Template Editor 2</div>

$('.lightboxon').click(function() {
    // open lightbox
});

Upvotes: 1

daveyfaherty
daveyfaherty

Reputation: 4613

An id has to be unique to the page.

Use classes or other attributes to identify the elements instead if you want things to have identical identifiers.

Upvotes: 1

codingrose
codingrose

Reputation: 15699

It is because you are using same ids. ids must be unique.

Use class instead.

Try:

<div class="lightboxon">Load Template Editor 1</div>

Upvotes: 2

Related Questions