Forum PHP.pl > [JavaScript] Zmiana wysokości elementu na podstawie drugiego elementu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zmiana wysokości elementu na podstawie drugiego elementu

-gecior-

20.10.2013, 18:19:46

Mam następujący kod jquery:

[HTML] pobierz, plaintext 
  $(function(){
 
    $(".ksiazka_produkt:first-child").click( function() {
        var ksiazkaProduktHeight = $(this).height();
      $(this).parent().height(ksiazkaProduktHeight + 100).css("border", "1px solid red");
    });
        });
[HTML] pobierz, plaintext

czym mogę zastąpić click(); aby rozmiar ksiazkaProduktHeight zmieniał się od razu po wczytaniu strony, a nie dopiero po kliknięciu?

turbiński

20.10.2013, 18:23:37

[HTML] pobierz, plaintext 
$(document).ready(function() {
      var ksiazkaProduktHeight = $(".ksiazka_produkt:first-child").height();
      $(".ksiazka_produkt:first-child").parent().height(ksiazkaProduktHeight + 100).css("border", "1px solid red");
});
[HTML] pobierz, plaintext

Spróbuj coś takiego.

lobopol

20.10.2013, 18:27:31

[JAVASCRIPT] pobierz, plaintext 
var el = $(".ksiazka_produkt:first-child");
var ksiazkaProduktHeight = el.height();
el.parent().height(ksiazkaProduktHeight + 100).css("border", "1px solid red");
[JAVASCRIPT] pobierz, plaintext

-gecior-

20.10.2013, 18:31:24

Dzięki za odpowiedź. Chodzi jednak o to że .ksiazka_produkt może mieć różne wysokości. I w zależności od tych wysokości chciałbym aby element nadrzędny miał dodawaną wysokość o 100px więcej od danego .ksiązka produkt. Poniżej struktura html:

[HTML] pobierz, plaintext 
<div class="ksiazki_linia">
 <div class="ksiazki_produkt" style="height:50px;"></div>
</div>
 
<div class="ksiazki_linia">
 <div class="ksiazki_produkt" style="height:150px;"></div>
</div>
[HTML] pobierz, plaintext

turbiński

20.10.2013, 19:04:15

Cytat(-gecior- @ 20.10.2013, 19:31:24 )

[HTML] pobierz, plaintext 
<div class="ksiazki_linia">
 <div class="ksiazki_produkt" style="height:50px;"></div>
</div>
 
<div class="ksiazki_linia">
 <div class="ksiazki_produkt" style="height:150px;"></div>
</div>
[HTML] pobierz, plaintext

Czy dobrze rozumiem? Masz dwie klasy, o tej samej nazwie, które zawierają klasy o tej samej nazwie i chcesz by .ksiazka_produkt z drugiej klasy miał wysokość o 100px większą od .ksiazka_produkt z klasy pierwszej?

Jeżeli dobrze rozumuje (a jest niedziela) to:

[HTML] pobierz, plaintext 
<div id="ksiazki_linia">
 <div class="ksiazki_produkt" style="height:50px;"></div>
</div>
 
<div id="ksiazki_linia_druga">
 <div class="ksiazki_produkt" style="height:150px;"></div>
</div>
[HTML] pobierz, plaintext

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
 var wysokosc = $(".ksiazki_linia:first").height(); //pobiera wysokosc pierwszego 'dziecka' div'a ksiazki_linia
 $(".ksiazki_linia_druga:first").css({"height", wysokosc + 100});
});
[JAVASCRIPT] pobierz, plaintext

-gecior-

20.10.2013, 20:18:16

Dzięki panowie, ale w końcu problem rozwiązałem sam. Dokonałem modyfikacji w założeniach, ale cel jest identyczny. Mianowicie:

Kod JS:

[HTML] pobierz, plaintext 
$(document).ready(function() {
 
window.onload = function() {
var total_listing=jQuery(".lista .ksiazki_linia");
 
$(total_listing).each( function() {
 
 var heightCell = $(this).children().eq(0).height();
 
  $(this).height(heightCell + 20);
 
});
};
 
});
[HTML] pobierz, plaintext

Kod html:

[HTML] pobierz, plaintext 
<div class="lista">
<div class="ksiazki_linia">
  <div class="ksiazka_produkt" style="height:100px;">
    <img src="blabla.png" alt="" />
  </div>
</div>
 
<div class="ksiazki_linia">
  <div class="ksiazka_produkt" style="height:200px;">
    <img src="blabla.png" alt="" />
  </div>
</div>
</div>
 
<div class="ksiazki_linia">
  <div class="ksiazka_produkt" style="height:300px;">
    <img src="blabla.png" alt="" />
  </div>
</div>
[HTML] pobierz, plaintext

-gecior-

20.10.2013, 20:23:12

BTW. Nie sprawdzałem podanego przez was kodu (przynajmniej części). Podany przez was kod nie iteruje oddzielnie każdego wiersza (.ksiazki_linia), a tak powinno być właśnie dzięki .each(); . (tak mi się wydaje - nie jestem guru

turbiński

20.10.2013, 21:29:41

Cytat(-gecior- @ 20.10.2013, 21:23:12 )

Chyba jestem zbyt niedzielny bo dopiero teraz zrozumiałem co chciałeś osiągnąć.

Dobrze, że znalazłeś rozwiązanie.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.