Не могу рассчитать размер элемента

0

Я пытаюсь рассчитать ширину и высоту элементов, установить точное положение в 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 размещены вне страницы, которая создает прокрутку или скрытие изображений, когда переполнение скрыто. Надеюсь, я объясню это хорошо, так что каждый может понять, что я хотел сделать.

  • 0
    Вы вызываете JavaScript после HTML? (Внизу элемента тела?).
  • 2
    Вы можете использовать что-то вроде for(var i = 1; i <= 13; i++){$('#img'+i)...} чтобы выбрать ваши изображения и сэкономить, написав 13 различных селекторов вручную.
Показать ещё 3 комментария

2 ответа

3
Лучший ответ

Вы вычисляете размеры при загрузке страницы - $(document).ready(... но, к сожалению, это не значит, что изображения готовы к этому моменту. Это обычная проблема.
Поскольку у вас уже есть ваши изображения, завернутые в .each, просто замените его обработчиком события load

$("#img1").on('load', function () {
    ...
});
  • 0
    Это не работает вообще, может быть, я делаю что-то не так ... Можете ли вы взглянуть на оригинальную страницу, где у меня есть эта проблема, слишком сложно поместить ее в jsfiddle - thelocalgenius.com/patterns/ кирпично-стена-классика
  • 0
    Измените селектор на #mimg1 , поэтому он должен быть $('#mimg1').on('load', ...
0

http://jsbin.com/iLIWOfa/2/edit

Если CSS родительского элемента изображения display: none, изображение не загружается и ширина или высота отсутствуют.

Просто установите opacity: 0 вместо.

  • 0
    Если бы я использовал непрозрачность вместо отображения, прозрачные элементы покрывали бы другое интерактивное содержимое страницы, не так ли?
  • 0
    Даже если я уберу отображение: нет, предупреждение ничего не показывает (пустое предупреждение) и в любом случае расчет неверен.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню