Czasami się zdarza, że musimy użyć "resize" 😉
Nie będę się rozpisywał co to jest wystarczy zerknąć tutaj - resize
Poniżej przykład użycia, a także wywołania jakiejś randomowej funkcji.
// nasz funkcja
function jakasFunkcja() {
if (window.innerWidth < 600) {
// tutaj coś robimy
}
else {
// tutaj coś robimy
}
}
// wywołanie funkcji
window.addEventListener('resize', jakasFunkcja);
Co to jest ten baner, to nic innego zdjęcie znajdujące się w div, które przesuwa się z góry na dół i ponownie na górę i tak w nieskończoność.
Oczywiście nic nas nie ogranicza można dodać np. jakiś tekst 🙂
Najpierw prosty html, na potrzeby tego przykładu kontener będzie centrowany w pionie i poziomie na całej stronie.
<div class="container">
<div class="image-bgr">
<img decoding="async" src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
</div>
</div>Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.
Najpierw style.
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.box {
width: 200px;
height: 200px;
}Mały html
<div class="box"></div>No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.
$(window).resize(function() {
var winW = $(window).width();
var conW = parseInt($('#container').css('width'));
var tabW = parseInt($('table.list').css('width'));
if(winW>conW) {
var margin_left = -((tabW - conW)/2)-10;
$('table.list').css({'margin-left':margin_left});
} else {
$('table.list').css({'margin-left':0});
}
});
$(window).resize();Tabelka normalna:
Tabelka wyśrodkowana: