Databases
StackOverflow2013
Postsdbo
POPosition elements on screen using Javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPosition elements on screen using Javascript
    primarykey
    data
    text
    <p>I am attempting to use Javascript to position some of my elements on the screen/window. I am doing this to make sure that what ever the dimensions of the users screen, my elements will always be in the centre.</p> <p>I know that padding &amp; margin can also achieve this, <strong>but I am using a custom movement script called raphael.js, &amp; in order to move my elements I need to set out my elements absolutely (its a custom home page, where you click blocks(that are links) &amp; they fly off the screen).</strong></p> <p>My javascript function to move my elements fails to move my elements. Any suggestions on how to position my elements using javascript would be really helpful.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script type="text/javascript" src="dropDownMenu.js"&gt;&lt;/script&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="javascript/raphael.js"&gt;&lt;/script&gt; &lt;!-- I am using a custom drawing/moving script which is why I cant put the img(id=bkImg) inside the div element --&gt; &lt;script LANGUAGE="JavaScript" type = "text/javascript"&gt; &lt;!-- function getScreenSize() { var res = {"width": 630, "height": 460}; if (document.body) { if (document.body.offsetWidth) res["width"] = document.body.offsetWidth; if (document.body.offsetHeight) res["height"] = document.body.offsetHeight; } if (window.innerWidth) res["width"] = window.innerWidth; if (window.innerHeight) res["height"] = window.innerHeight; alert( res["width"] ); alert( res["height"] ); return res; } function positionBlocksAccordingToScreenSize() { // The problem is that the blocks position does not change but they should? var scrDim = getScreenSize(); var BK_WIDTH = 800; var BK_HEIGHT = 600; var X_OFFSET = (scrDim["width"]-BK_WIDTH) / 2; // variable that changes according to the width of the screen var BLOCK_POS_X = [160, 80, 280, 20, 200, 400]; var BLOCK_POS_Y = [26, 203, 203, 380, 380, 380]; for ( var i=1; i&lt;=5; i++ ) { //document.getElementById("block"+i).setAttribute( "offsetLeft", X_OFFSET + BLOCK_POS_X[i] ); // doesn't work //document.getElementById("block"+i).setAttribute( "offsetTop", BLOCK_POS_Y[i] ); // doesn't work document.getElementById("block"+i).style.left = X_OFFSET + BLOCK_POS_X[i]; // doesn't work document.getElementById("block"+i).style.top = BLOCK_POS_Y[i]; // doesn't work } } --&gt; &lt;/script&gt; &lt;style type="text/css" media="all"&gt; &lt;!-- @import url("styles.css"); #blockMenu { z-index: -5; padding: 0; position: absolute; width: 800px; height: 600px; /*background-image: url("images/menuBk.png");*/ } #bkImg { z-index: -5; position: relative; } #block1 { z-index: 60; position: absolute; top: 26px; left: 160px; margin: 0; padding: 0; } #block2 { z-index: 50; position: absolute; top: 203px; left: 80px; margin: 0; padding: 0; } #block3 { z-index: 40; position: absolute; top: 203px; left: 280px; margin: 0; padding: 0; } #block4 { z-index: 30; position: absolute; top: 380px; left: 20px; margin: 0; padding: 0; } #block5 { z-index: 20; position: absolute; top: 380px; left: 200px; margin: 0; padding: 0; } #block6 { z-index: 10; position: absolute; top: 380px; left: 400px; margin: 0; padding: 0; } --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body onload="positionBlocksAccordingToScreenSize()" style="margin-top: 10%; text-align: center; margin-bottom: 10%; position: relative;"&gt; &lt;img id="bkImg" src="images/menuBk.png" width="800px;" height="600px" alt=""/&gt; &lt;!-- The above image should be displayed behind the below div. I am using the raphael.js movement script, so I cannot place this image inside the div, because it will get erased when I call raphael.clear(); --&gt; &lt;div id="blockMenu"&gt; &lt;div id="block1"&gt;&lt;a href="javascript:onBlockClick('block1')"&gt;&lt;img src="images/block1.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="block2"&gt;&lt;a href="javascript:onBlockClick('block2')"&gt;&lt;img src="images/block2.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="block3"&gt;&lt;a href="javascript:onBlockClick('block3')"&gt;&lt;img src="images/block3.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="block4"&gt;&lt;a href="javascript:onBlockClick('block4')"&gt;&lt;img src="images/block4.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="block5"&gt;&lt;a href="javascript:onBlockClick('block5')"&gt;&lt;img src="images/block5.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;div id="block6"&gt;&lt;a href="javascript:onBlockClick('block6')"&gt;&lt;img src="images/block6.png" width="200" height="200"/&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. COIf you're already using something as adventurous as Raphaël, you should consider also using its friend: [jQuery](http://jquery.com/). It handles all the ugly parts like `document.body.offsetWidth` vs `window.innerWidth` automatically.
      singulars
      1. POPosition elements on screen using Javascript
      1. USthirtydot
    2. CO@thirtydot thanks for your reply. Would you be able to suggest a line of jQuery code that could place my elements correctly?
      singulars
      1. POPosition elements on screen using Javascript
      1. USMack
 

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