Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   JS определить высоту img и вписать стиль для другого блока (https://javascript.ru/forum/misc/56779-js-opredelit-vysotu-img-i-vpisat-stil-dlya-drugogo-bloka.html)

stem 03.07.2015 21:30

JS определить высоту img и вписать стиль для другого блока
 
Всем привет!
Прочитал уже много тем и статей, но никак не могу разобраться.
Читал тут:
http://jquery.page2page.ru/index.php...BD%D1%82%D0%B0
http://www.cyberforum.ru/javascript-...ead368804.html
http://ru.stackoverflow.com/question...BE%D0%BA%D0%B0
http://javascript.ru/forum/dom-windo...opredelit.html

Имеется фоновое изображение со 100% шириной на экран, необходимо определить его высоту и подставить значение в отступ другого блока через style.
Код для определения высоты использую такой:
<script>
    $("#page-header-bg img").css("height", function(i,val){
	return val;
    };
</script>


Еще есть вот такой код, в нем берется высота nav и подставляется style height для фоновой полосы nav на всю ширину, но я в нем не понимаю:
jQuery(window).bind('resize', (function ($) {
    "use strict";
    return function() {
        var menu = jQuery("nav.nav");
        var menuOffset = menu.offset();
        var pageOffset = jQuery('#main').offset();
        if (!menuOffset || !pageOffset) {
            return;
        }
        jQuery("#hmenu-bg").css({
            "height": menu.outerHeight() + "px",
            "top": (menuOffset.top - pageOffset.top) + "px"
        });
    };
})(jQuery));


Другой блок - это меню (<nav class="nav">). Хотелось бы чтобы на странице добавился код:
<style>.nav{margin-top:высота}</style>

или чтобы в сам блок записался стиль вот так
<nav class="nav" style="margin-top:высота">


С моим примером получается только определить высоту, а вот как подставить значение val к другому блоку, увы, не хватает знаний JS

stem 03.07.2015 21:53

Пробую такой код, но не получается, срабатывает через какое то время только.
<script>
    jQuery(window).bind('resize', (function ($) {
    "use strict";
    return function() {
        var fon = jQuery("#page-header-bg img");
        var fonOffset = fon.offset();
        
        if (!fonOffset) {
            return;
        }
        jQuery("nav.nav").css({
            "margin-bottom": fon.outerHeight() + "px"
        });
    };
	})(jQuery));
	</script>

Deff 03.07.2015 21:59

Цитата:

Сообщение от stem
необходимо определить его высоту и подставить значение в отступ

Поясните зачем ? (Не проще перенести тот элемент вслед за c фоновой картинкой) ?

stem 03.07.2015 22:15

Цитата:

Сообщение от Deff (Сообщение 377587)
Поясните зачем ? (Не проще перенести тот элемент вслед за c фоновой картинкой) ?

Нет, картинка на всю ширину экрана, а блоки ниже, которые должны сдвигаться идут по максимальной ширине сайта, там свои заморочки с версткой, так надо, на других страницах эти блоки сдвигаются под разной высотой, блок контента выше чем сайдбар и контент заходит на фоновое изображение которое уже статично ширине и высоте. И мне нужно было решение без мультишаблона.

Вставил этот код в общий файл скриптов и все заработало, без тормозов.


Часовой пояс GMT +3, время: 16:54.