Databases
StackOverflow2013
Postsdbo
POMake element move by using Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake element move by using Javascript
    primarykey
    data
    text
    <p><strong>I am trying to make a webpage where when you click a link, the link moves diagonally every 100 milliseconds.</strong></p> <p>So I have my Javascript, but right now when I click the link nothing happens</p> <p><em>Also, does anyone know of a Javascript IDE I can use to make sure I have no errors in my code?</em></p> <p>PS: Does anyone know why my elements dont stretch to fit the whole 200px by 200px of the div element? The links are only small when they should be the same width as their parent div element.</p> <p><strong>Edited with new advice, although still wont move.</strong></p> <pre><code>&lt;script LANGUAGE="JavaScript" type = "text/javascript"&gt; &lt;!-- var block = null; var clockStep = null; var index = 0; var maxIndex = 6; var x = 0; var y = 0; var timerInterval = 100; // milliseconds var xPos = null; var yPos = null; function moveBlock() { if ( index &lt; 0 || index &gt;= maxIndex || block == null || clockStep == null ) { clearInterval( clockStep ); return; } block.style.left = xPos[index] + "px"; block.style.top = yPos[index] + "px"; index++; } function onBlockClick( blockID ) { if ( clockStep != null ) { return; } block = document.getElementById( blockID ); index = 0; x = parseInt( block.style.left, 10 ); y = parseInt( block.style.top, 10 ); xPos = new Array( x+10, x+20, x+30, x+40, x+50, x+60 ); yPos = new Array( y-10, y-20, y-30, y-40, y-50, y-60 ); clockStep = self.SetInterval( moveBlock(), timerInterval ); } --&gt; &lt;/script&gt; &lt;style type="text/css" media="all"&gt; &lt;!-- @import url("styles.css"); #blockMenu { z-index: 0; width: 650px; height: 600px; background-color: blue; padding: 0; } #block1 { z-index: 30; position: relative; top: 10px; left: 10px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block2 { z-index: 30; position: relative; top: 50px; left: 220px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block3 { z-index: 30; position: relative; top: 50px; left: 440px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block4 { z-index: 30; position: relative; top: 0px; left: 600px; background-color: red; width: 200px; height: 200px; margin: 0; padding: 0; /* background-image: url("images/block1.png"); */ } #block1 a { display: block; width: 100%; height: 100%; } #block2 a { display: block; width: 100%; height: 100%; } #block3 a { display: block; width: 100%; height: 100%; } #block4 a { display: block; width: 100%; height: 100%; } #block1 a:hover { background-color: green; } #block2 a:hover { background-color: green; } #block3 a:hover { background-color: green; } #block4 a:hover { background-color: green; } #block1 a:active { background-color: yellow; } #block2 a:active { background-color: yellow; } #block3 a:active { background-color: yellow; } #block4 a:active { background-color: yellow; } --&gt; &lt;/style&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMack
    1. USMack
    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. POMake element move by using Javascript
      1. This table or related slice is empty.
      1. VTUpMod
    1. COUse http://www.jslint.com/ to check your JS code. And watch all videos from Douglas Crockford on http://developer.yahoo.com/yui/theater/
      singulars
      1. POMake element move by using Javascript
      1. USMörre
    2. CORegarding your IDE/Error checking question, there are two possible solutions 1)You can use an IDE that performs syntax and semantics checking. These are generally quite large and are often Eclipse-based. Aptana is good one. 2)You can use jslint to perform basic syntax checking. This will not check your code logically, but it will catch a good majority of simple errors. Many text editors (notepad++, textmate, etc) have modules or plugins which can integrate jslint functionality right into the editor.
      singulars
      1. POMake element move by using Javascript
      1. USjordancpaul
    3. COKomodoEdit is free and is awesome, and will JSLint your code as you type. Your "a" elements need to be set to display:block so you can set their size.
      singulars
      1. POMake element move by using Javascript
      1. USmwilcox
 

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