Grzesiek - Strona 24 - Kody, triki, sztuczki

5 gru 2013

box-sizing co to i po co stosować?

Mały trick który działa we wszystkich przeglądarkach w tym IE8 ;).

Robimy div o wymiarach 150px na 50px. Jeżeli do niego dodamy teraz padding, powiedzmy 5px oraz border 1px solid red;

Dostaniemy tak naprawdę div o wymiarach:

150px szerokości + 5px z każdej strony + 1px z każdej strony co da nam = 162px
na wysokość podobnie:
50px + 5px z każdej strony + 1px z każdej strony co da nam = 62px

No i z naprawą tego problemu przychodzi nam właśnie box-sizing. Do całego stylu dodajemy:

.box {
  width: 150px;
  height: 50px;
  padding: 5px;
  border: 1px solid red;
  box-sizing:border-box;
}

Czytaj dalej

5 gru 2013

Dzisiejszy dzień.

var browser = function() {
  var days = ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'];
  var today = new Date();
  var msg = 'Dzisiaj jest: ' + days[today.getDay()] + ', ' + today.getDate();
  console.log(msg);
}

Wywołanie oczywiście

browser();

5 gru 2013

Spinner w czystym css3

Tworzymy div

<div class="spinner"><div class="spinner"</div></div>

A w stylach:

.spinner {
   height:20px;
   width:20px;
   margin:0px auto;
   position:relative;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(0,174,239,.15);
   border-right:6px solid rgba(0,174,239,.15);
   border-bottom:6px solid rgba(0,174,239,.15);
   border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}

@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}

@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}

@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}

5 gru 2013

Jak zorganizować sobie kod javascript.

Wstawiamy poniższy kod do osobnego pliku, powiedzmy przykład.js

var MOJEMIEJSCE = (function() {

var browser = function() {
}
var navigation = function() {
}
var footer = function() {
}

return {
init : function() {

browser();
navigation();
footer();
}
};

})();

przed końcem strony zamknięcia body

Wstawiamy

http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

następnie

przyklad.js

A nasze namespace wywołujemy przez

MOJEMIEJSCE.init();

5 gru 2013

Detekcja przeglądarki

var isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Chrome: function () {
    return navigator.userAgent.match(/Chrome/i);
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera (mini|tablet)/i);
  },
  Windows: function () {
    return navigator.userAgent.match(/IEMobile/i);
  },
  any: function () {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Chrome() || isMobile.Opera() || isMobile.Windows());
  }
};

a później tylko

if(isMobile.Android()) { // cos }

Update:

Powyższy kod jest dobry na tamten czas. Obecnie na rok 2020 pojawiło się lepsze sprawdzenie kodu Mobile_Device_Detection