Javascript multi click event

Question

i need some help i have the link of the output of what i have done below using javascript and HTML. http://i.imgbox.com/adlMVTIx.jpg What i need to do is when i click on one circle the other circle should be disabled and the one that is clicked should be active..the problem now is that when click on a circle and click another one..both stays active..

This is the javascript code i have done so far,Please help me out guys really appreciate it!

<head>
    <title></title>
    <!--scripts-->
    <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="scripts/main.js" type="text/javascript"></script>
    <!--styles-->
    <link href="styles/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        $(document).ready(function () {

            $('#c1').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 243 - ((190 - 125) / 2));
                $(this).css('left', 335 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/blue_back.png)');

            })

            $('#c2').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 898 - ((190 - 125) / 2));
                $(this).css('left', 336 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/1.png)');

            })


            $('#c3').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 470 - ((190 - 125) / 2));
                $(this).css('left', 100 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/2.png)');

            })


            $('#c4').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 800 - ((190 - 125) / 2));
                $(this).css('left', 570 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/3.png)');

            })


            $('#c5').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 165 - ((190 - 125) / 2));
                $(this).css('left', 1287 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/5.png)');

            })


            $('#c6').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 308 - ((190 - 125) / 2));
                $(this).css('left', 1450 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/6.png)');

            })


            $('#c7').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 600 - ((190 - 125) / 2));
                $(this).css('left', 1390 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/7.png)');

            })


            $('#c8').click(function () {

                //$(this).css('background-color', '#005aa8');
                $(this).css('width', '190px');
                $(this).css('height', '190px');
                $(this).css('top', 820 - ((190 - 125) / 2));
                $(this).css('left', 1720 - ((190 - 125) / 2));
                $(this).removeClass("blink");
                $(this).css('background-image', 'URL(assets/images/8.png)');

            })
        })

    </script>
</head>
<body>
    <div id="main">
        <div id="c1" class="circle blink">
        </div>
        <div id="c2" class="circle blink">
        </div>
        <div id="c3" class="circle blink">
        </div>
        <div id="c4" class="circle blink">
        </div>
        <div id="c5" class="circle blink">
        </div>
        <div id="c6" class="circle blink">
        </div>
        <div id="c7" class="circle blink">
        </div>
        <div id="c8" class="circle blink">
        </div>
    </div>
</body>
</html>

This is my css code

body
{
    margin: 0;
    padding: 0;
}
#main
{
    width: 1920px;
    height: 1080px;
    background-image: URL('../assets/images/iwmi-bg.jpg');
}
.circle
{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    border: 5px solid #fdb219; /*box-shadow: 5px 5px #000;*/
    text-align: center;
    background-repeat:no-repeat;
    background-position:center; }

@keyframes blink {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 333.5px; top: 241.5px;  }
}

@-webkit-keyframes blink {
    0% {  width:60px; height:60px;left: 335px; top: 243px; }
    100% { width:65px; height:65px;left: 333.5px; top: 241.5px;  }
}

.blink {
    -webkit-animation: blink .75s linear infinite;
    -moz-animation: blink .75s linear infinite;
    -ms-animation: blink .75s linear infinite;
    -o-animation: blink .75s linear infinite;
    animation: blink .75s linear infinite;
} 

@keyframes blink1 {  
    0% {  width:60px; height:60px; left: 335px; top: 243px; }
    100% { width:65px; height:65px; left: 332.5px; top: 240.5px;  }
}

@-webkit-keyframes blink1 {
    0% {  width:60px; height:60px;left: 336px; top: 898px; }
    100% { width:65px; height:65px;left: 333.5px; top: 895.5px;  }
}

.blink1 {
    -webkit-animation: blink1 .75s linear infinite;
    -moz-animation: blink1 .75s linear infinite;
    -ms-animation: blink1 .75s linear infinite;
    -o-animation: blink1 .75s linear infinite;
    animation: blink1 .75s linear infinite;
} 

#c1
{
    left: 335px;
    top: 243px;
}
#c2
{
  left: 336px;
  top: 898px;  
}
#c3
{
  left: 100px;
  top: 470px;  
}
#c4
{
  left: 570px;
  top: 800px;  
}
#c5
{
  left: 1287px;
  top: 165px;  
}
#c6
{
  left: 1450px;
  top: 308px;  
}
#c7
{
  left: 1390px;
  top: 600px;  
}
#c8
{
  left: 1720px;
  top: 820px;  
}

Argh... that is some muddy code. You are adding WAY TOO MUCH css into your javascript. Nothing is being calculated that couldn't be processed before hand. ALL of that stuff belong in a css class. — Daniel
– Daniel, Commented Aug 13, 2013 at 4:03
what exactly is making the circle look inactive, $(this).removeClass("blink"); ? — user2587132
– user2587132, Commented Aug 13, 2013 at 4:44
when one circle is clicked the other should be inactive thats what i need, any help please! — Drek John
– Drek John, Commented Aug 13, 2013 at 4:51

Daniel · Accepted Answer · 2013-08-13 04:23:03Z

1

I moved all that css to where it belongs. Now look how beautifully simple the javascript is.

http://jsfiddle.net/8NN4x/

jQuery:

var $circles = $('.circle','#main');
$circles.on('click',function(){
    $circles.removeClass('clicked');
    $(this).addClass('clicked').removeClass('blink');    
});

answered Aug 13, 2013 at 4:23

Daniel

5792 silver badges7 bronze badges

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

2 Comments

Drek John Over a year ago

Im confused i aded my css in the question can u check that,is it ok?

Daniel Over a year ago

Close. The few items at the bottom #c1 etc should look like what I have in the fiddle.

Collectives™ on Stack Overflow

Javascript multi click event

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related