Я пытаюсь рассчитать ширину и высоту элементов, установить точное положение в CSS с помощью jQuery, но почему-то расчет для некоторых идентификаторов не работает (предупреждение показывает 0 или ничего), работая для других идентификаторов и классов. Здесь код jQuery:
$(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);
}
});
CSS:
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;}
HTML:
<body class="pattern-2">
<div class="pattern"></div>
<div id="img1" class="drag mood-img">
<img class="shadow moodimg1" src="mood/brick-mood-1.png">
<span class="mood-name shadow">
<nobr>A. Brickwork I</nobr>
</span>
</div>
<div id="img13" class="drag mood-img">
<img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png">
<span class="mood-name shadow">
<nobr>6. Untitled</nobr><br>
<small>digital</small>
</span>
</div>
</body>
Я пробовал много разных опций, но никто из них не работал, и проблема всегда (по-видимому) заключается в том, что JS не вычисляет размеры элементов, поэтому позиции также вычисляются неправильно.
А также может быть еще один простой способ сделать все эти вычисления, потому что у меня есть 13 элементов с разными идентификаторами (от img1 до img13 и от mimg1 до mimg13. Возможно, я мог бы использовать JS для получения идентификаторов самостоятельно, без необходимости мне написать все ID в JS?
IDEA
У меня есть страница с несколькими элементами div, одна из них видна, другие установлены для display:none
. Когда нажимается конкретный элемент span, JS устанавливает видимый скрытый div
, изменяя свой CSS для display:block
. div
я эта проблема с сначала был невидимым контейнером для нескольких других див с изображениями и текстовыми элементами, и я хотел расположить их содержали элементы против контейнера DIV (который width
и height
устанавливается на 0 и margin
top
и left
установлен 50%
) с margin-top
и margin-left
. Затем я установил контейнер на 100%
width
и height
и попытался разместить содержимое контейнера top
и left
. Затем я удалил контейнер и установил, чтобы его прежние внутренние элементы имели position:absolute
и пытались по-прежнему позиционировать его с top
и left
свойствами, рассчитанными и заданными с помощью jQuery. На самом деле эти элементы представляют собой изображения с некоторым всплывающим текстом, который должен быть случайным образом помещен по всей странице (overflow:hidden
), а также z-index
установлен случайным образом. Я потратил три дня на то, чтобы найти решение, но не получил никакого результата - либо он вообще не работает (элементы размещены друг на друга в одном и том же положении (верхний левый угол), либо вычисления сделаны неправильно, а некоторые ( или все) divs размещены вне страницы, которая создает прокрутку или скрытие изображений, когда переполнение скрыто. Надеюсь, я объясню это хорошо, так что каждый может понять, что я хотел сделать.
Вы вычисляете размеры при загрузке страницы - $(document).ready(...
но, к сожалению, это не значит, что изображения готовы к этому моменту. Это обычная проблема.
Поскольку у вас уже есть ваши изображения, завернутые в .each
, просто замените его обработчиком события load
$("#img1").on('load', function () {
...
});
#mimg1
, поэтому он должен быть $('#mimg1').on('load', ...
http://jsbin.com/iLIWOfa/2/edit
Если CSS родительского элемента изображения display: none
, изображение не загружается и ширина или высота отсутствуют.
Просто установите opacity: 0
вместо.
for(var i = 1; i <= 13; i++){$('#img'+i)...}
чтобы выбрать ваши изображения и сэкономить, написав 13 различных селекторов вручную.