Databases
StackOverflow2013
Postsdbo
POJavaScript Animation
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJavaScript Animation
    primarykey
    data
    text
    <p>Below is a sample screenshot of my project...</p> <p><img src="https://i.stack.imgur.com/JNkQf.jpg" alt="http://i.imgur.com/D60mEG9.jpg"></p> <p>the yellow balls keep blinking until you click on it, when it is clicked the yellow ball becomes blue and a box too pops up with a video and few images... I need to add a javaScript animation when the ball is clicked the box should slide in with a beatiful animation. I tried it many times no luck.</p> <p>Help me out guys please.</p> <p>This is the CSS for the box</p> <pre><code>#mainbox { background-color:#084679; height: 290px; width: 497px; position:absolute; } #videobox { background-color:#084679; height: 169px; width: 300px; left: 15px; top: 19px; float: left; position: absolute; } #smallbox1 { background-color: #0dd4d7; height: 62px; width: 110px; left: 15px; top: 211px; float: left; position: absolute; } #smallbox2 { background-color: #0dd4d7; height: 62px; width: 110px; left: 136px; top: 211px; float: left; position: absolute; } #smallbox3 { background-color:#0dd4d7; height: 62px; width: 110px; left: 257px; top: 211px; float: left; position: absolute; } #smallbox4 { background-color:#0dd4d7; height: 62px; width: 110px; left: 378px; top: 211px; float: left; position: absolute; } #smallbox5 { background-color: #084679; height: 62px; width: 110px; left: 330px; top: 60px; float: left; position: absolute; } </code></pre> <p>This is the JavaScript</p> <pre><code>$('#c1').click(function () { setPos(); $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() $(this).removeClass("blink1"); //$(this).addClass("blink1"); //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 90 - ((190 - 60) / 2)); $(this).css('left', 120 - ((190 - 60) / 2)); $(this).css('background-image', 'URL(assets/images/blue_back.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox1').css('top', '160px'); $('#mainbox1').css('left', '165px'); $('#mainbox1').css('z-index', ''); $('#mainbox1').show(); }) $('#c2').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() $(this).removeClass("blink2"); // $(this).addClass("blink2"); //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 360 - ((190 - 60) / 2)); $(this).css('left', 665 - ((190 - 60) / 2)); $(this).css('background-image', 'URL(assets/images/1.png)'); $('#mainbox1').hide(); $('#mainbox').hide(); $('#mainbox').css('top', '440px'); $('#mainbox').css('left', '200px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); }) $('#c3').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 721 - ((190 - 60) / 2)); $(this).css('left', 206 - ((190 - 60) / 2)); $(this).removeClass("blink3"); // $(this).addClass("blink3"); $(this).css('background-image', 'URL(assets/images/2.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox1').css('top', '785px'); $('#mainbox1').css('left', '265px'); $('#mainbox1').css('z-index', ''); $('#mainbox1').show(); }) $('#c4').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() $(this).css('z-index', '1'); //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 500 - ( (190 - 60) / 2)); $(this).css('left', 661 - ((190 - 60) / 2)); $(this).removeClass("blink4"); //$(this).addClass("blink4"); $(this).css('background-image', 'URL(assets/images/3.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox1').css('top', '550px'); $('#mainbox1').css('left', '738px'); $('#mainbox1').css('z-index', ''); $('#mainbox1').show(); }) $('#c5').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 154 - ((190 - 60) / 2)); $(this).css('left', 1291 - ((190 - 60) / 2)); $(this).removeClass("blink5"); //$(this).addClass("blink5"); $(this).css('background-image', 'URL(assets/images/5.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox').css('top', '223px'); $('#mainbox').css('left', '820px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); }) $('#c6').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 309 - ((190 - 60) / 2)); $(this).css('left', 1488 - ((190 - 60) / 2)); $(this).removeClass("blink6"); // $(this).addClass("blink6"); $(this).css('background-image', 'URL(assets/images/6.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox').css('top', '390px'); $('#mainbox').css('left', '1025px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); }) $('#c7').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() //$(this).css('background-color','#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 608 - ((190 - 60) / 2)); $(this).css('left', 1488 - ((190 - 60) / 2)); $(this).removeClass("blink7"); // $(this).addClass("blink7"); $(this).css('background-image', 'URL(assets/images/7.png)'); $('#mainbox').hide(); $('#mainbox1').hide(); $('#mainbox').css('top', '680px'); $('#mainbox').css('left', '1025px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); }) $('#c8').click(function () { setPos() $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); clearCircle() //$(this).css('background-color', '#005aa8'); $(this).css('width', '190px'); $(this).css('height', '190px'); $(this).css('top', 711 - ((190 - 60) / 2)); $(this).css('left', 1635 - ((190 - 60) / 2)); $(this).removeClass("blink8"); // $(this).addClass("blink8"); $(this).css('background-image', 'URL(assets/images/8.png)'); $('#mainbox').show(); $('#mainbox1').hide(); $('#mainbox').css('top', '785px'); $('#mainbox').css('left', '1170px'); $('#mainbox').css('z-index', ''); $('#mainbox').show(); }) }) function clearCircle() { $('.circle').css('background-image', ''); } function ResetCircle() { $('.circle').css('width', '60px'); $('.circle').css('height', '60px'); } //&lt;!-- Postion tags--&gt; function clearCircle() { $('.circle').css('background-image', ''); } function setPos() { if ($('#c1').width() == 190) { $('#c1').css('top', 90); $('#c1').css('left', 120); $('#c1').addClass("blink1"); } if ($('#c2').width() == 190) { $('#c2').css('top', 360); $('#c2').css('left', 665); $('#c2').addClass("blink2"); } if ($('#c3').width() == 190) { $('#c3').css('top', 721); $('#c3').css('left', 206); $('#c3').addClass("blink3"); } if ($('#c4').width() == 190) { $('#c4').css('top', 500); $('#c4').css('left', 661); $('#c4').addClass("blink4"); } if ($('#c5').width() == 190) { $('#c5').css('top', 154); $('#c5').css('left', 1291); $('#c5').addClass("blink5"); } if ($('#c6').width() == 190) { $('#c6').css('top', 309); $('#c6').css('left', 1488); $('#c6').addClass("blink6"); } if ($('#c7').width() == 190) { $('#c7').css('top', 608); $('#c7').css('left', 1420); $('#c7').addClass("blink7"); } if ($('#c8').width() == 190) { $('#c8').css('top', 711); $('#c8').css('left', 1635); $('#c8').addClass("blink8"); } } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSparky
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJavaScript Animation
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POJavaScript Animation
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. POJavaScript Animation
      1. This table or related slice is empty.
      1. VTDownMod
    1. CO*".i tried it many times no luck"* ***How***, exactly? And what did it do instead of what you expected it to do?
      singulars
      1. POJavaScript Animation
      1. UST.J. Crowder
    2. COWhen i click on the circle the box should animate and come in!!
      singulars
      1. POJavaScript Animation
      1. USDrek John
    3. COPls dont downrate guys! I wnt be able to get any help in future :(
      singulars
      1. POJavaScript Animation
      1. USDrek John
 

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