Žurnalas. Įrankių dėžė.

2018 Kovas

1. Centruojam nežinomo aukščio bloką nežinomo aukščio bloke. Tik CSS

Labai gera technika kai reikia centruoti pvz.: prisijungimo formą. Tada ji būna cenruota dideliuose ekranuose, o mobiliuose įrenginiuose tiesiog atsiranda scrollas.

.block {
    text-align: center;
}

.block:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}
    
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
}

Straipsnis apie tai https://css-tricks.com/centering-in-the-unknown/

2. Datos intervalo jQuery pluginas

Kai reikia vienam ar dveijuose kalendoriuose parinkti datos intervalą

http://www.daterangepicker.com/

3. CSS/JS jungiklis

https://codepen.io/stevenfabre/pen/qpBDy

2018 Vasaris

1. Skraidaintis label prie inputu/textarea

// Floating label

$('input, textarea').each(function(){

    var $this = $(this);

    if (this.value) {
        $this.next().removeClass('placeholder-shown');
    }else {
        $this.next().addClass('placeholder-shown');
    }

});

$('input, textarea').on('change keyup', function(){
    var $this = $(this);

    if (this.value) {
        $this.next().removeClass('placeholder-shown');
    }else {
        $this.next().addClass('placeholder-shown');
    }

});

/*------------------------------------*\
#Floating-label
\*------------------------------------*/

.form-row,
.form-item {
    position: relative;
}

.floating-label {
    position: absolute;
    left: 5px;
    top: -7px;
    font-size: 12px;
    padding-left: 0;
    opacity: 1;
    @include transition(top 0.2s, font-size 0.2s, opacity 0.2s);
    pointer-events: none;
    color: #111111;
}


:placeholder-shown ~ .floating-label,
.placeholder-shown.floating-label {
    top: 9px;
    font-size: 14px;
    opacity: 0;
}

2. Kai reikia išvalyti wysiwyg šiukšles - tuščius p

p:empty {
    display: none;
}

3. Jei turim elementą tik su ID, galima jį paselektinti taip:

[id="some-widget"] {
    width: 50%;
}

tokio selektoriaus stiprumas toks pat kaip klasės.

2018 Sausis

1. img "cover" efektas relative div'e

img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-height: none;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

2. Js įrankis google maps popupo stiliams koreguoti

https://github.com/atmist/snazzy-info-window

3. Kažkur rastas sticky footer, kai footerio aukštis nefiksuotas.

Flex panaudotas, bet taip, kad jis iš tikro veikia ir nieko nesugadina. Yra apsitaikę problemų su šituo būdu, kad elementui su flex uždedamas overflow hidden, bet jis veikia tada ne taip kaip tikimasi.

/* Sticky footer */

html {
    height: 100%;
}

.site {
    display: flex;
    flex-direction: column;
    min-height: 100%; 
}

.site-header,
.site-footer {
    flex: none;
}

.site-center {
    flex: 1 0 auto;
    padding: var(--space) var(--space) 0;
    width: 100%;
    overflow: hidden;
}

.site-center::after {
    content: '\00a0';
    /*   */
    display: block;
    margin-top: var(--space);
    height: 0px;
    visibility: hidden;
}

@media (--break-lg) {
    .site-center {
    padding-top: var(--space-lg);
}

.site-center::after {
    margin-top: var(--space-lg); } 
}
.site-center--full {
    padding: 0; 
}

.site-center--full::after {
    content: none; 
}

CSS proporcijos

Bloko proporcijų išlaikymas vien su CSS

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();
});

img -> word

http://www.onlineocr.net/

Responsive funkcijų pajungimas/atjungimas su js

http://viget.com/inspire/managing-javascript-on-responsive-websites

Kaip kurti stiliaus gidus, CSS gidas, CSS default styles

http://alistapart.com/article/creating-style-guides

Geras aukščio suvienodinimo pluginas

https://github.com/liabru/jquery-match-height

Elementu aplink apskirtimą išdėstymas

http://jsfiddle.net/ThiefMaster/LPh33/

Responsive lentelės, responsive table

https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css

Tabai į acordeonus

http://www.markadrake.com/blog/2013/09/06/responsive-design-turning-tabs-into-accordions-and-back-again/

Trikampi su šešėliu

https://css-tricks.com/triangle-with-shadow/

Responsive iframe

http://npr.github.io/responsiveiframe/

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;"

Vienodo aukščio blokai su jQ

http://codepen.io/micahgodbolt/pen/FgqLc

Apie web ir mobile safe fontus

http://www.bluetrain.io/blog/choosing-fonts-for-your-mobile-website/

Proporciškai aukštį ir ploti keičiantys blokai vien su CSS

http://jsfiddle.net/5CMYw/3/

360 , 3d spineris

http://www.mathieusavard.info/threesixty/demo.html

Teksto overflow ...

http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Ultimate sąrašas kas veikia newsletter'iuose ir email client'uose:

https://www.campaignmonitor.com/css/

Idomus spalvu generatorius

http://bahamas10.github.io/ryb/

Pluginas 2 paveiksliuku palyginimui before/after

http://zurb.com/playground/twentytwenty

Debaunce-trhrottle pluginas

http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html

CSS Sprites retina

http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

iPad ir iPhone nereikalingų stilių išjungimas:

input {
    -webkit-appearance: none;
    border-radius: 0;
}

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

jQuery-Mobile-Events, kai reikia tik eventų palaikymo

https://github.com/benmajor/jQuery-Mobile-Events

Cross browser geyscale img

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

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

"Praspaudžiam kiaurai divą"

http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements

Paveikslelisu galima skeilinti su CSS transformu

scale: 1.1;

Roundinam tabus į išorę

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/ + http://css-tricks.com/better-tabs-with-round-out-borders/

Vertingi savatiniai paskaitymai:

• http://www.hackernewsletter.com/
• http://tympanus.net/codrops/collective/

Apie animacijų greičius:

• http://css-tricks.com/myth-busting-css-animations-vs-javascript/
• http://www.greensock.com/gsap-js/

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

☰

Paprastas būdas custom stylinti input[type="text"] mygtuką

http://jsfiddle.net/3bXGw/1/

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" ] 
});

Su JS aptinkam mobilias naršykles

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) ".";

CSS3 stulpelių fixas

iPhone išjungiam automatinį telefono numerių stilių

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

Papildžiau toolboxą gradient generatoriumi ir spalvų konverteriu

Įdomus ir nematytas video panaudojimas kai

video rodomas scrolinant pele

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;}

$('.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);
});

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'
         }});
      }
   }
});