Databases
StackOverflow2013
Postsdbo
POCan't calculate element's size
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't calculate element's size
    text
    copied!<p>I'm trying to calculate width and height of elements, to set precise position in CSS with jQuery, but for some reason calculation for some IDs doesn't work (alert shows 0 or nothing) while working for other IDs and classes. Here's the jQuery code:</p> <pre><code>$(document).ready(function () { $("#img1").each(function () { var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20, maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20, randomtop = getRandomInt(20, maxtop), randomleft = getRandomInt(20, maxleft), randomzindex = getRandomInt(1, 30); $(this).css({ "top": randomtop, "left": randomleft, "z-index": randomzindex }); }); $("#img13").each(function () { var maxtop = $('.pattern').outerHeight() - $('#mimg13').outerHeight() - 20, maxleft = $('.pattern').outerWidth() - $('#mimg13').outerWidth() - 20, randomtop = getRandomInt(20, maxtop), randomleft = getRandomInt(20, maxleft), randomzindex = getRandomInt(1, 30); alert ($('#mimg13').outerHeight()); $(this).css({ "top": randomtop, "left": randomleft, "z-index": randomzindex }); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } }); </code></pre> <p>CSS:</p> <pre><code>html {width:100vw; height:100vh;} body {margin:0; width:100vw; height:100vh; overflow:hidden;} .pattern {width:100%; height:100%; margin:0; padding:0;} .drag {overflow: visible; padding-bottom: 0px; cursor: move; position: absolute;} .mood-img {position:absolute; display:none; margin:0; padding:0;} </code></pre> <p>HTML:</p> <pre><code>&lt;body class="pattern-2"&gt; &lt;div class="pattern"&gt;&lt;/div&gt; &lt;div id="img1" class="drag mood-img"&gt; &lt;img class="shadow moodimg1" src="mood/brick-mood-1.png"&gt; &lt;span class="mood-name shadow"&gt; &lt;nobr&gt;A. Brickwork I&lt;/nobr&gt; &lt;/span&gt; &lt;/div&gt; &lt;div id="img13" class="drag mood-img"&gt; &lt;img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png"&gt; &lt;span class="mood-name shadow"&gt; &lt;nobr&gt;6. Untitled&lt;/nobr&gt;&lt;br&gt; &lt;small&gt;digital&lt;/small&gt; &lt;/span&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>I have tried lot of different options but none of them worked and the problem is always (as it seems) is that JS doesn't calculate elements' sizes, so positions are also calculated wrong.</p> <p>And also may be there's some more simple way to make all these calculation, cause I have 13 elements with different IDs (from img1 to img13 and from mimg1 to mimg13. May be I could use JS to get IDs by itself, with no need for me to write all IDs into JS?</p> <p><strong>IDEA</strong></p> <p>I have a page with a few div elements, one of them is visible, others are set to <code>display:none</code>. When particular span element is clicked, JS sets certain hidden <code>div</code> visible, changing its CSS to <code>display:block</code>. The <code>div</code> I have this problem with at first was an invisible container for several other divs with images and text elements and I wanted to position these contained elements against the container div (which had <code>width</code> and <code>height</code> set to 0 and <code>margin</code> <code>top</code> and <code>left</code> set to <code>50%</code>) with <code>margin-top</code> and <code>margin-left</code>. Then I set the container to have <code>100%</code> <code>width</code> and <code>height</code> and tried to position container's content with <code>top</code> and <code>left</code>. Then I removed the container and set its former inner elements to have <code>position:absolute</code> and tried to still position it with <code>top</code> and <code>left</code> properties calculated and set with jQuery. Actually those elements are images with some pop-up text, which should be randomly placed all over the page (<code>overflow:hidden</code>), and have <code>z-index</code> set randomly as well. I've spent three days trying to find the solution, but got no result — either it's not working at all (elements are placed all on top of one another in the same position (top left corner) either calculations are done wrong and some (or all) divs are positioned out of the page which creates scroll or hiding images when overflow is hidden. Hope I'm explaining it fine, so anyone could be able to understand what have I wanted to do.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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