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

5 lis 2013

Wyświetlenie okienka ładowania na środku ekranu

Wyświetlenie okienka ładowania na środku ekranu:

var winH = $(window).height();
var winW = $(window).width();
var loading = $('#loading');
var maxheight = loading.css("max-height");
var maxwidth = loading.css("max-width");
var loading_height = loading.height();
var loading_width = loading.width();
if (maxheight != "none") {
  loading_height = Number(maxheight.replace("px", ""));
}
if (maxwidth != "none") {
  loading_width = Number(maxwidth.replace("px", ""));
}
loading.css('top', winH / 2 + $(window).scrollTop() - loading_height / 2);
loading.css('left', winW / 2 - loading_width / 2);
$('#loading').show();