+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Dynamiczne ustalanie wielkości diva (/thread-dynamiczne-ustalanie-wielko%C5%9Bci-diva)
Dynamiczne ustalanie wielkości diva - muchmorek - 14-06-2012
Witam,
kolejny raz podparty już do ściany zgłaszam się do Was z prośbą o radę. Otóż chcę pobrać rozmiar okna - wysokość diva o id header i ustalić każdego diva o klasie miniature na wielkość równą
(okno-header)/3
div ten ma być kwadratem, dlatego też width również będzie miała identyczny wymiar.
Kod:
<script>
$(document).ready(function() {
$('.miniature').height($(window).height()-$("#header").height());
});
</script>Kod:
.miniature {
width: auto;
height: auto;
display: inline-block;
font-size: 0px;
background-size: cover;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#header {
width: 100%;
bottom: 0px;
height: 70px;
background-color: #000;
position: fixed;
z-index: 2000;
}Any idea?
RE: Dynamiczne ustalanie wielkości diva - Kartofelek - 14-06-2012
Kod:
var space = $(window).height()-$("#header").height();
$('.miniature').height(space);RE: Dynamiczne ustalanie wielkości diva - Kartofelek - 14-06-2012
Z rozpędu pisałem :]
RE: Dynamiczne ustalanie wielkości diva - muchmorek - 16-06-2012
Poprawiłem kod i problem tkwił w tym że nie do końca doczytałem dokumentację w której jasno jest określone że za pomocą .height nie mogę ustalać wysokości niczego, a jedynie ją odczytywać
.Kod:
<script>
$(document).ready(function() {
var wheight = parseInt(($(window).height()-$("#header").height()) / 3);
$('.miniature').css({height:wheight,width:wheight});
});
$(window).resize(function() {
var wheight = parseInt(($(window).height()-$("#header").height()) / 3);
$('.miniature').css({height:wheight,width:wheight});
});
</script>Wrzucam dla potomnych jakby się komuś przydało, ale przy okazji mam też pytania, czy macie jakiś pomysł jak "ogarnąć" ten kod? bo w gruncie rzeczy dwa razy napisane jest dokładnie to samo tylko dla dwóch różnych "wydarzeń", a nie jestem na tyle wkręcony jeszcze w jQ, aby wiedzieć jak minimalizować ilosc kodu
.
RE: Dynamiczne ustalanie wielkości diva - camelrafal - 16-06-2012