Paulius Kripaitis

Dev Log | Skaitiniai

Žurnalas. Įrankių dėžė.

Žurnale užfiksuoti kasdieniai front-ender'io iššukiai ir laimėjimai.
Dėžėje surinkti išbandyti ir veikiantys JS įrankiai, dažniausiai pasitaikančioms UI problemoms spręsti.

Žurnalas

Paprastas slide-to snippetas

$('.slide-to').on('click', function(e){
    var $this = $(this);

    $('html, body').animate({
        scrollTop: $($this.data('target')).offset().top
    }, 600);

    e.preventDefault();
});
                  

Centruojam bet ką viduryje

position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
                  

Įvairiems img loading greičio klausimams spręsti. Ypač FF

"image-rendering: optimizeSpeed;"

iPad ir iPhone nereikalingų stilių išjungimas:

input {
    -webkit-appearance: none;
    border-radius: 0;}
Nuorodų stiliaus ant telefono numerių išjungimas:
meta name = "format-detection" content = "telephone=no"

Fontas turi "Old style Numerics" nustatymą, jį leidžia pasirinkti fon squerl font face generatorius. Taip atrodo skaitmenys kurie yra ne vienodo aukščio.

Paveikslelisu galima skeilinti su CSS transformu

scale: 1.1;

Characteris mobiliu meniu ikonai (deja jis neveikia mobiliuose įrenginiuose)

css3-multi-column.js veikimas: stilius turi būti aprašytas vienai kalsei. pvz.: .columns-2 (negalima .content .columns-2)

Sulietuvinta konfigūracija jQ UI datepicker'iui

 $('.datepicker').datepicker({ 
            showOn: "button",
            buttonText: "",
            dateFormat: "yy-mm-dd",
            firstDay: 1,
            dayNamesMin: [ "Se", "Pi", "An", "Tr", "Ke", "Pe", "Še" ],
            monthNames: [ "Sausis", "Vasaris", "Kovas", "Balandis", "Gegužė", "Birželis", "Liepa", "Rugpjūtis", "Rugsėjis", "Spalis", "Lapkritis", "Gruodis" ] 
        });

HTML5 bg video player'is netinkamas naudoti kai reikia video rodyti fone mobiliuose įrenginiuose. Reiktų kito plugino.

Prireikė custom stilizuoti tik sąrašo (ol) skaičius, ir įgeneruoti į jį kontento (konkrečiai '.'). Vienas iš būdų generuoti skaičių ir pridėti tašką kaip kontentą:

content: counter(list_number) ".";

iPhone išjungiam automatinį telefono numerių stilių

meta name="format-detection" content="telephone=no"

Papildžiau toolboxą gradient generatoriumi ir spalvų konverteriu

Papildžiau nuorodas skriptu skirtu svetainės fone playinti video.

Keistas atradimas, androido native browseriai, safaris neberodo fono spalvos, kaikurių blokų turinio, kai nurodomas toks stilius:

*:before {display: inline-block; content: "";}

Turime situaciją, kai reikalinga kažkokius js funkcioanlumus svetainėje turėti tik tam tikruose ekrano pločio rėžiuose (responsive dizainas). Tam reikia bindinti ir unbindinti funkcijas, žiūrėti, kad jos nebūtų pakartotinai iškviečiamos. Trumpai tariant, daug vietų privelti klaidų. Tad į pagalbą ateina

jRespond, labai šiam tikslui tinkamas jQ pluginas.

Vėl prisiminiau gerą selektorių kai reikia išrinkti tą elementą kuris lentelės eilutėje būna vienas.

.super-table td:first-child:last-child {...}

Naudingas dalykas naudojant kartu su CSS transition, kai nebereikalingi anksčiau su js sukurti stiliai, o norim atstayti į tai kas ateina iš CSS failo.

$("...").css('height', ' ');

Pridedu prie įrankių CSS geometrinių figūrų generatorių. Naudingiausia praktikoje - trikampiai.

Prisireikė pagauti su js kada baigiasi CSS transformacijos, tai būdas toks:

$("...").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

Kai prireikia, kad :hover įvyktų pasikeitimas ne tik pačiam elemntui ant kurio užvedi kursorių, bet ir kitam po jo einančiam siblingui:

.menu li:hover, .menu li:hover + li {background: none;}

Norėtūsi animuoti su CSS bloko aukštį iš 0 į auto, bet taip deja negalima. Tad tenka nefiksuoto aukščio bloką "wrapinti" kitu elementu ir su .hover() jam priskirti vidinio elemento aukštį, o nuvedus kursorių priskirti 0;
$('.has-hover-block').hover(function(){
   $(this).find('.hover-content-wrap').css('height', $(this).find('.hover-content').height());
},function(){
   $(this).find('.hover-content-wrap').css('height', 0);
});

iPad'as ir iPhona'as turi neprašytus inset shadow input elementams. Jei jie nereikalingi pašalinimui naudojam šitą:
input {-webkit-appearance: none;}

Reikia, kad multiselect plugine pasirinkimai atsidarytu i viršų, kai select elementas labai arti lango apačios.

var $window = $(window);
var $multiselect = $('.multiselect').multiselect({
   header: false,
   beforeopen: function(){
      if (($window.height() - ($('.ui-multiselect').offset().top - $window.scrollTop()) ) < 180){
         $multiselect.multiselect("option", {position: {
            my: 'left bottom',
            at: 'left top'
         });
      }else{
         $multiselect.multiselect("option", {position: {
            my: 'left top',
            at: 'left bottom'
         }});
      }
   }
}); 

Įrankių dėžė

Animavimas

Kontento blokų animavimas, kai pamatomas viewporte https://github.com/matthieua/WOW


Gesture eventų pagavimai touch įrenginiams

Hammer.js http://hammerjs.github.io/


Naujienlaiškiai. (Responsive be media-queries, css inliner, white-space pašalinimas, html kodo dydis kilobaitais)

Kaip kurti responsive naujienlaiškius

CSS inliner

Whitespace pašalinimas

Įpastinto HTML kodo dydžio paskaičiavimas


Optimizavimas

Paveikslėlių optimizavimas online Kraken


Generatoriai:

CSS shapes (Trikampiai, kitos nesudėtingos figūros)

Spalvų kodams perversti iš HEX į RGBA HEX2RGBA

CSS gradientų generavimas Colorzilla

Custom fontų generavimui: Fontsquerl, Online font converter

Fontų generavimui, kai nereikia jokių custom nustatymų: http://www.web-font-generator.com/


Darbas su imagemap'ais

Įrankis mapinti online

Responsive image maps pluginas

https://addons.mozilla.org/en-US/firefox/addon/ime/


CSS3 kontentas stulpeliais visose naršyklėse

Pradinis variantas: CSS3MultiColumn + Fixas

Stilius turi būti aprašytas vienai kalsei. pvz.: .columns-2 (negalima .content .columns-2)


CSS meniu hamburgeris

https://jonsuh.com/hamburgers/


Karuseles ir slaideriai


HTML5 video fone

jQuery.videobg (Netinka mobiliems įrenginiams)


Custom select

jQuery UI Selectmenu Widget by fnagel


Custom multiselect

jQuery UI MultiSelect Widget by Eric Hynds [ Demo, Dokumentacija]


Reitingavimas

http://www.radioactivethinking.com/rateit/example/example.htm

Custom radio/checkbox

iCheck


Content'o ir paveiksleliu paetikimas popupe

Fancybox


Custom kontento scrolleris

jQuery custom content scroller by malihu


Limpantys(sticky) blokai

jQuery Waypoints - sticky-elements

Stick in parent. Elementas skrolinant prilimpa prie t4vinio bloko viršaus arba apačios ir neišlenda iš jo ribų http://leafo.net/sticky-kit/


Teksto rašymo animavimas

https://github.com/mattboldt/typed.js/


Eventai kai pasiekiamas tam tikras elementas

jQuery Waypoints


ScrollTo

Smooth scroll to any jQuery/DOM element


IE (6-9) kampu apvalinimas, šešeliai

CSS3PIE

IE8 background-size: cover

-pie-background: transparent url(../images/section-1.jpg) no-repeat center top / cover content-box;


Patogus IE veikiantys CSS selektoriai (:first-child, :last-child, :nth-child(2n)...)

selectivizr


Placeholderis IE

jquery.placeholder.js