Databases
StackOverflow2013
Postsdbo
POJavascript multi click event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript multi click event
    primarykey
    data
    text
    <p>i need some help i have the link of the output of what i have done below using javascript and HTML. <a href="http://i.imgbox.com/adlMVTIx.jpg" rel="nofollow">http://i.imgbox.com/adlMVTIx.jpg</a> 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..</p> <p>This is the javascript code i have done so far,Please help me out guys really appreciate it!</p> <pre><code>&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;!--scripts--&gt; &lt;script src="jquery/jquery-1.7.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="scripts/main.js" type="text/javascript"&gt;&lt;/script&gt; &lt;!--styles--&gt; &lt;link href="styles/styles.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript"&gt; $(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)'); }) }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;div id="c1" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c2" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c3" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c4" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c5" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c6" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c7" class="circle blink"&gt; &lt;/div&gt; &lt;div id="c8" class="circle blink"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is my css code</p> <pre><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; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDrek John
    1. USDrek John
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COadd the css of circle blink too
      singulars
      1. POJavascript multi click event
      1. USArun Bertil
    2. COArgh... 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.
      singulars
      1. POJavascript multi click event
      1. USDaniel
    3. COwhat exactly is making the circle look inactive, `$(this).removeClass("blink");` ?
      singulars
      1. POJavascript multi click event
      1. USrps
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload