4 wrz 2019

Animowany baner w js

animowany baner w js

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 src="http://www.grzegorztomicki.pl/images/lwow/992/IMG_0014.jpg" alt="" class="image-responsive"/>
  </div>
</div>
27 sie 2019

Losowy kolor w js

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.

27 kw. 2016

Wyśrodkowanie tabeli z danymi do rozmiaru okna

$(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:
tabela

Tabelka wyśrodkowana:
tabela wyśrodkowana