CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1658560
user1658560

Reputation: 540

How to get this glass shatter effect to work on multiple divs?

Situation

I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.

Take a look at the jSFiddle here: https://fiddle.jshell.net/9n9ft9ks/3/

Problem

Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.

How I tried to fix it

The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work: https://fiddle.jshell.net/9n9ft9ks/5/

So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:

document.getElementById('container'); to: document.getElementsByClassName('container');

and

#container: {} to .container{}

But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/

Summary

I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/

Upvotes: 8

Views: 1433

Answers (2)

user5306470
user5306470

Reputation:

You cannot use a single ID multiple times on the same page.
Use a class instead:

CSS: 

.className {
    /* attributes: values; */
}

HTML: 

<div class="className"></div>

Upvotes: 1

Oylex
Oylex

Reputation: 310

In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.

I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.

(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)

Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

Upvotes: 0

Related Questions