HTML - Strona 10 - Kody, triki, sztuczki

10 lis 2017

Odczyt atrybutów elementu w obsłudze zdarzena w javascript

<select name="banner_url" onchange="var idx=this.selectedIndex; 
var value=this.options[idx].getAttribute('banner_url'); 
var element = document.getElementById('img_banner_url'); 
element.setAttribute('src', value); element.style.display='block'">

!{section name=ii loop=$data}!
	!{capture assign=banner_url}!http://kody.wig.pl/!{/capture}!
	<option value="!{$banner_url}!" banner_url="!{$banner_url}!">
	!{$data[ii].name}! ---> !{$banner_url}!</option>
!{/section}!

</select>
<br><br>

<img src="" id="img_banner_url" style="display:none">

10 paź 2017

Template strings w Javascript ES6, ES2015

Ile razy człowiek się męczył aby zwykły formularz ze zmiennymi zapisać w js 😉
Z pokonaniem tego problemu sięgamy po template string. Używamy tego znaku (`) znajduje się on nad tabulatorem z angielskiego backtick, po naszemu odwrócony apostrof a zmienne umieszczamy w takiej formie ${zmienna}
Wszystko razem można zapisać `${zmienna}`

A teraz małe przykłady.

Powiedzmy że mamy sobie obiekt.

var person = {
    name: 'Greg',
    job: 'front-end',
    city: 'Warszawa'
}

A html to:

var html = 
'<div class="person">'+
    '<h1>' + person.name + '</h1>' +
    '<h2>' + person.job + ' ' + person.city + '</h2>' +
'</div>';

A nie prościej tak?:

const html = `
  <div class="person">
    <h1>${person.name}</h1>
    <h2>${person.job} ${person.city}</h2>
  </div>
`;

Czytaj dalej

9 paź 2017

Pasek postępu przewijania strony.

Dobrych praktyk UX nigdy za wiele. Warto czasami do strony dodać coś co nawet w najmniejszym stopniu zwiększy czas przebywania usera na stronie.

Najpierw pobieramy o ile przewinęliśmy stronę od lewego górnego rogu window.pageYOffset,
później pobieramy wysokość okna bez uwzględniania toolbarów i scrollbarów window.innerHeight, następnie pobieramy document.body.clientHeight czyli wysokość całego okna.

const ProgressBar = function () {
    window.addEventListener('scroll', () => {
        let ws = window.pageYOffset, 
            wh = window.innerHeight,
            dh = document.body.clientHeight;
        let scrollPercent = (ws / (dh-wh)) * 100;
        const progressBar = document.querySelector('#progress');
        if(ws > 50) {
            progressBar.setAttribute('style','width:'+ scrollPercent + '%');
        } else {
            progressBar.removeAttribute('style');
        }
    });
}();

Jeżeli przewiniemy o więcej niż 50px wtedy do id progress dodajemy style width, jeżeli jest mniejsze to usuwamy atrybut style z id.

Dodajemy też css aby to zadziałało.

.bar {
    position: fixed;
    background: rgb(255, 0, 0);
    height: 10px;
    width: 0;
    top: 0;
}

Działający przykład znajduje się tutaj

30 lip 2017

Rozwijane menu

Najpierw budujemy strukturę html. Wszystko jest robione w scss, js w wersji ES6 i gulp
Do ES6 używam gulp-babel aby przekonwertować js do es2015

<div class="container">
  <div id="accorions">
    <div class="accordion">Section 1</div>
    <div class="panel">
      <p>Sauerkraut can be garnished with cored avocado, also try decorateing the cake with hollandaise sauce.
        Asparagus can be marinateed with crushed lettuce, also try flavoring the loaf with salsa verde.
        with lobsters drink cream.</p>
    </div>

    <div class="accordion">Section 2</div>
    <div class="panel">
      <p>Aww, raid me parrot, ye dead landlubber! Swashbuckling, coal-black whales cowardly vandalize a mighty, gutless
        scabbard.
        Scabbards sing on booty at port degas! Small, dead tobaccos darkly fight a black, lively dagger.
        seashells fall with love.</p>
    </div>

    <div class="accordion">Section 3</div>
    <div class="panel">
      <p>Turbulence at the bridge was the adventure of mineral, lowered to a gravimetric mermaid.
        Moon at the universe was the mystery of coordinates, feeded to a real planet.
        wisely handle a processor.</p>
    </div>
  </div>
</div>

Czytaj dalej

24 cze 2017

Nowy sposób serwowania ikon SVG

Sposób ten działa nawet w starszych przeglądarkach takich jak IE9.
Jednym z pierwszych możliwości jest budowa zestawu ikon które umieszczam od razu za "body" dla czego tutaj a nie na dole strony przed zamknięciem "/body" otóż gdy strona jest zbyt złożona i renderuje się dość wolno lub otwieramy stronę na telefonie i to w dodatku na słabym internecie np. 2G to ikony nie są widoczne od razu tylko renderują się dopiero po jakimś czasie. Sprawdzone i przetestowane.

<svg xmlns="http://www.w3.org/2000/svg" style="width: 0; height: 0; display: none;">
  <symbol id="icon-home" viewBox="0 0 32 32">
    <title>home</title>
    <path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
  </symbol>
  <symbol id="icon-pencil" viewBox="0 0 32 32">
    <title>pencil</title>
    <path
      d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z">
    </path>
  </symbol>
</svg>

Teraz w miejscu w którym chcemy umieścić ikonę

<svg class="icon icon-home">
  <use xlink:href="#icon-home"></use>
</svg>

Oczywiście nie obejdzie się bez dodania odpowiedniego stylu dla icon 🙂

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Czytaj dalej