Javascript multi click event

Question

0.00/5 (No votes)

See more:

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!

XML

<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

CSS

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;  
}

Posted 12-Aug-13 22:09pm

Hawkeye101

Updated 12-Aug-13 22:12pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

**Joezer BH** · Accepted Answer · 2013-08-12T22:39:00

Solution 1

Try this:
You want your Div elements to go back to "blink" mode?

Add a JS function to reset all to "blink" something like this:

JavaScript

function blinkAll()
{

$('#C1').addClass("blink");
$('#C2').addClass("blink");
$('#C3').addClass("blink");
$('#C4').addClass("blink");
$('#C5').addClass("blink");
$('#C6').addClass("blink");
$('#C7').addClass("blink");
$('#C8').addClass("blink");


// optionally, using eval:
for (var i=1;i<9;i++)
{ 
   eval("$('#C" +i + "').addClass('blink');");
}

And call it on each of your functions on the document.ready
You may also need to set their background to what it was in the first place, if it indicates the Inactive mode that you specified.
You are using these lines:

JavaScript

$(this).css('background-image', 'URL(assets/images/1.png)');

to change the background-image, so I just assume that you would like to set them back

Good luck,
Edo

Posted 12-Aug-13 22:39pm

Joezer BH

Updated 13-Aug-13 0:00am

v3

Comments

Hawkeye101 13-Aug-13 5:36am

Is it possible to do it using a variable???

Joezer BH 13-Aug-13 5:42am

Yes, using eval

Hawkeye101 13-Aug-13 5:45am

Can you show me a example for this relevant code! i would really appreciate it!

Joezer BH 13-Aug-13 5:54am

See update of solution (let me know if it works, I didn't try it)

Hawkeye101 13-Aug-13 6:07am

I did it like this!
function clearCircle() {

$('.circle').css('background-image', '');
the backgroud image goes of...but i need to get the circle to the same size as it was..how do i code that??

Joezer BH 13-Aug-13 6:53am

About the size, I don't know your original size, but you have a circle class:
.circle
{
width: 60px;
height: 60px;
...
...

You might want to consider a method that resets the circle.

ResetCircle(MyCircle)

Which will reset the size, background, style, etc...
And then call it for every circle you have.