[JavaScript] [jQuery] Zmiana wysokości div-a Opcje

[muumiin]

Witam!
Mam dwa div-y, które mają być elastyczne - wysokość zależna od zawartości, ale oba div-y mają być cały czas równej wysokości (tzn jeśli pierwszy div się rozciągnie, bo jest więcej tekstu, drugi też powinien się tak samo rozciągnąć.

Napisałam coś, co myślałam, że będzie poprawne, bo wzorowałam się na czymś, co działało, ale nie działa... Mój kod:

[PHP] pobierz, plaintext 
$(document).ready(function (){
    $(window).resize(function (){
        $('.div2').css({
            height: ($('.div1').height()
        });
    });
    $(window).resize();
});
[PHP] pobierz, plaintext 

Fajnie, żeby przeliczało wysokość przy każdym załadowaniu strony oraz przy zmniejszaniu okna. Zwykle div1 będzie większy od div2, więc głównie zależy mi na tym, żeby w tą stronę to działało

Ten post edytował muumiin 4.02.2015, 13:31:28

[rad11]

http://jsfiddle.net/56m2tL80/

Nie wiem czy o taki efekt chodzi

[muumiin]

u mnie to coś nie chciało działać (IMG:style_emoticons/default/wink.gif)

ale coś takiego zadziałało:

[PHP] pobierz, plaintext 
$(document).ready(function() {
	height2 = $('.div2').height()
	$('.div1').css({
		height: height2,
	});
});
[PHP] pobierz, plaintext 

Ale trochę się miesza gdy zaczynam zwężać pole przeglądarki - za sprawą css-a pierwszy div się zmniejsza, a drugi zostaje taki sam. Jak to można poprawić? Żeby ta funkcja uruchamiała się za każdym razem, gdy zmienia się szerokość okna przeglądarki?

Ten post edytował muumiin 4.02.2015, 14:18:27

[rad11]

[PHP] pobierz, plaintext 
$(document).ready(function() {
	height2 = $('.div1').height();
        width2 = $('.div1').width();
	$('.div2').css({
            height: height2,
            width: width2
	});
 
        $( window ).resize(function() {
            height2 = $('.div1').height();
            width2 = $('.div1').width();
            $('.div2').css({
		height: height2,
                width: width2
            });
        });
    });
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class="div1" style="background: red; width: 50%; height: 50%;">
 
</div>
<div class="div2" style="background: black;">
 
</div>
[HTML] pobierz, plaintext 

[muumiin]

rad11, Ty to jesteś spec od jquery, już kolejny mój problem rozwiązujesz (IMG:style_emoticons/default/smile.gif)

Jeszcze jeden problem:
Jak to jest możliwe, że przy ładowaniu wyświetla za duży div2, a przy zmienianiu rozmiaru okna wszystko jest idealnie równe? a kod identyczny dla obu opcji (IMG:style_emoticons/default/sad.gif) teoretycznie pomaga, gdy w pierszym przypadku odejmę trochę pixeli, ale na każdej rozdzielczości (mam css dla 5 rozdzielczości) trzeba by odjąć inną ilość pixeli. A margin, padding i border mam ustawiony globalnie, próbowałam też zamieniać height() na innerHeight() i outerHeight(), z wszystkimi tymi opcjami ten sam problem (IMG:style_emoticons/default/sad.gif)

[PHP] pobierz, plaintext 
$(document).ready(function() {
	height2 = $('.div2').height();
	$('.div1').css({
            height: height2
	});	
    $( window ).resize(function() {
        height2 = $('.div2').height();
        $('.div1').css({
			height: height2
        });
    });
});
[PHP] pobierz, plaintext 

Ten post edytował muumiin 4.02.2015, 16:12:45

[rad11]

Moze sie tak dziac bo jeden element jest w % a drugi w px choc teoretycznie js powinien sobie to sam dobrze przeliczyc hmmm....

sproboj tak i powiedz czy poprawilo sie:

[PHP] pobierz, plaintext 
$(document).ready(function() {
 
	height2 = parseInt($('.div2').height());
	$('.div1').css({
            height: height2+'%'
	});	
 
    $( window ).resize(function() {
        height2 = parseInt($('.div2').height());
        $('.div1').css({
			height: height2+'%'
        });
    });
});
[PHP] pobierz, plaintext 

Ten post edytował rad11 4.02.2015, 20:12:45

[muumiin]

to w ogóle nie chce działać... Kompletnie nie mam pojęcia o co chodzi - ten poprzedni kod działał jak trzeba tylko w części po $(window).resize. Ta pierwsza część powiększała diva aż za bardzo (IMG:style_emoticons/default/sad.gif)

ok, mam to:

[PHP] pobierz, plaintext 
$(document).ready(function() {
	$(window).load(function () {
		height2 = $('.faq').height();
		$('.security').css({
            height: height2
		});	
	});
    $( window ).resize(function() {
        height2 = $('.faq').height();
        $('.security').css({
			height: height2
        });
    });
}); 
[PHP] pobierz, plaintext 

jak na razie działa (IMG:style_emoticons/default/wink.gif)

rad11, dzięki wielkie za cierpliwość do mnie, należałoby postawić Ci jakieś piwko (IMG:style_emoticons/default/wink.gif)