Szybkie posty

Jeżeli coś jest wartego uwagi a nie jest to materiał na pełnoprawnwgo posta na blogu to będę starać się to umieszczać w tym miejscu.

#ajax #apache #behat #bitbacket #bootstrap #composer #cookies #cqrs #css #css flex #ct8 #curl #docker #doctrine #edukacja #enet #enp sla #filmy #firma #funkcje php #git #google #htaccess #html #inne #javascript #jedzenie #jquery #js/jquery #kawały #krypto #laravel #linux #oop #pdo #php #php wzorce narzędzia #phpmyadmin #phpspec #phpstan #phpstorm #phpunit #podcast #rabbit #redis #seo #soap #sql #symfony #szukanie po stringach w php #twig #virtual host #visual studio code #vue #wamp #windows #wino-nalewki #wyrazenia regularne #wzorce projektowe #xml #xxx #zdjecia #złote myśli
  • Szukasz po tagu: javascript
  • Ilość rekordów w bazie: 20

stop zablokowanie redirectu w przeglądrace

window.onbeforeunload = function(){ return 'Leave page?'; };

kod pocztowy zamiana

02134 -> 02-134

str.replace(/(\d{2})(\d{3})/, "$1-$2") lub str.replace(/(..)/, ”$1-”)

Zmiana szybkości filmu w html

document.querySelector('video').playbackRate = 1.5

Nawigacja po tablicy

function arrayNavigation(array, key){
    var len = array.length;
    var data = [];
    key = parseInt(key);
    data['current'] = key;
    data['prev'] = (key+len-1)%len;
    data['next'] = (key+1)%len;
    return data;
}

timer na podstawie sekund

function timer(numberOfSeconds){
    var mins = Math.floor(numberOfSeconds / 60);
    var secs = Math.floor(numberOfSeconds % 60);
    if (secs < 10) {
        secs = '0' + String(secs);
    }
    return  mins + ':' + secs;
}

//3:20
console.log(timer(200));
 

Intersection Observer

IntersectionObserver

Event delegation

document.addEventListener('DOMContentLoaded', function(){
    body.addEventListener('click', function (e) {
        if (e.target.classList.contains("ajax") || e.target.classList.contains("page-link")) {
            e.preventDefault();
            const url=e.target.getAttribute('href');
            getPageWithAjax(url);
        }

        if (e.target.id=='searchButton') {
            e.preventDefault();
            const searchWords=this.querySelector('#title').value;
            const action=this.querySelector('#searchForm').action;
            const url =action+'?title='+searchWords;
            getPageWithAjax(url);
        }
    });

   if (window.history && window.history.pushState) {
        //window.history.pushState('forward', null, './#forward');
        $(window).on('popstate', function() {
            getPageWithAjax(window.location.href);
        });
    }
});

Wspólne klucze dwóch tablic

statValueValue = [1,2,3];

valuesFromInput = [1,3];

let intersection = statValueValue.filter(function(i) {return valuesFromInput.indexOf(i) < 0;});

//lub
Array.prototype.diff = function(a) {
     return this.filter(function(i) {return a.indexOf(i) < 0;});
};

let intersection = statValueValue.diff( valuesFromInput );  

asdsad

https://stackoverflow.com/questions/6268679/best-way-to-get-the-key-of-a-key-value-javascript-object


Template w javascript

function commentsTemplate(commentId,commentAuthor,publishedAt,comment_content,comment_author_url,comment_author_email_md5){
    var img=Avatar(comment_author_email_md5);
    var url='';
    comment_author_url != null && comment_author_url.length > 1 ? url =comment_author_url : url ='';
    var comments=`<article id=${commentId}>
        <div class="col-lg-12 text-left pd-zero">
            <div class="panel panel-white post panel-shadow">
                <header>
                    <div class="post-heading">
                        <div class="pull-left image">
                            <img src="${img}" class="img-circle avatar" alt="user profile image">
                        </div>
                        <div class="pull-left meta">
                            <div class="title h5">
                                <a class="text-capitalize" href="${url}" target="_blank"><b>${commentAuthor}</b></a>
                            </div>
                            <h6 class="text-muted time">${publishedAt}</h6>
                        </div>
                    </div>
                </header>
                <div class="post-description">
                    <p style="">${comment_content}</p>
                    <button class="test btn btn-primary" name="subject" type="submit"  onclick="postReply(${commentId})" data-toggle="modal" data-target=".myModalHorizontal">ODPOWIEDZ</button>
                </div>
            </div>
        </div>
    </article>`;
    return comments;
}

Wykrycie przesunięcia do diva

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum eum consequatur vitae, a nisi atque ad autem ullam, aperiam velit at sunt laudantium tempore, fuga rem veniam dolore aut omnis fugit quam. Consequuntur numquam illo placeat officiis fugiat earum, quia expedita sapiente alias, perferendis quisquam, impedit recusandae. Tenetur, autem qui quidem quam harum incidunt, ut, labore ad facere magni minus consequatur dolores itaque saepe tempore eveniet laudantium quibusdam. Esse, at. Vel aperiam harum modi aliquid, distinctio? Corporis dicta veritatis labore incidunt sed eos distinctio aspernatur consequatur delectus, est magnam quod odio aperiam aliquam voluptates perferendis, eaque quo quisquam placeat velit repellat iure esse. Placeat alias assumenda eveniet, animi in pariatur sit, dolores facilis hic aliquam at sint. Repellat deserunt placeat velit ipsa dicta neque maxime aliquam molestias, optio itaque earum dolorem, voluptate porro soluta nemo, minus impedit cumque animi ab </p>
</div>

<div id="startLoading">Hej</div>

<style type="text/css">
  .container{
    text-align: center;
    max-width: 100px;
    margin:auto;
  }
</style>

<script type="text/javascript">
function isScrolledIntoView(elem) {
    var docViewTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var docViewBottom = docViewTop + window.innerHeight;
    var elemTop = elem.offsetTop;
    var elemBottom = elemTop + elem.offsetHeight;
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

window.addEventListener('scroll', function LoadDiv(){
    if (isScrolledIntoView(document.querySelector('#startLoading'))) {
      alert('Hej wlasnie przewinięto do diva #startLoading');
      //uncoment to remove event
      //this.removeEventListener('scroll', LoadDiv);
    }
});

</script>
</body>
</html>

Link


Stan cywilny po płci

function showMaritalStatusesBySex(sexName, selectDefault = true) {

    if (sexName === '') {
        $('#maritalStatus').hide();
        return;
    }

    $('body').find('#maritalStatus').show();

    //select default value if true 
    if (selectDefault) {
        $('#stan_cywilny').find('option').filter('[value=""]').prop('selected', true);
    }

    var maritalStatuses = [];

    maritalStatuses['male'] = ['kawaler', 'żonaty', 'rozwiedziony', 'wdowiec', 'konkubent', 'separacja'];
    maritalStatuses['female'] = ['panna', 'mężatka', 'rozwiedziona', 'wdowa', 'konkubina', 'separacja'];

    $('#stan_cywilny').find('option').not("[value='']").hide();

    $.each(maritalStatuses[sexName], function(key, value) {
        $('#stan_cywilny').find('option').filter('[value=' + value + ']').show();
    });
}

Dodanie myślnika do kodu pocztowego

function autoCompletePostCode(inputId){
	$('body').on('keyup', inputId, function(event) {
		var liveInputValue = $(this).val();

		//if input lenght i equal 2 and keaborad key != backspace
		if (liveInputValue.length === 2  && event.keyCode !== 8) {
			$(inputId).val(liveInputValue+'-');
			return;
		}

		//if 4nth char in value is equal '-' delete it 
		if (liveInputValue.length === 4 && liveInputValue.charAt(3) === '-') {
			$(inputId).val(liveInputValue.slice(0,-1));
			return;
		}
		//limited lenght to five chars
		if (liveInputValue.length > 6){
			$(inputId).val(liveInputValue.slice(0,-1));
		}

	});
}

Data urodzenia z numeru pesel

 function getBirthdayDateFromPesel(pesel, sign){
      pesel = pesel.split('');

      var year = 1900+parseInt(pesel[0])*10+parseInt(pesel[1]);

      if (pesel[2]>=2 && pesel[2]<8)
        year+=Math.floor(pesel[2]/2)*100;
      if (pesel[2]>=8)
        year-=100;

      var month = (pesel[2]%2)*10+pesel[3];
      var day = pesel[4]*10+pesel[5];

      return day+sign+month+sign+year;
}

Sprawdzanie czy istnieje wartość w json

isAleradyUsed(tagName) {
return Object.values(this.jsonTagsVariance).indexOf(tagName) > -1 ? true : false;
}

Funkcje przy wczytywaniu drzewa DOM

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

Zdarzenie mouseleave/opuszczenie elementu o danym id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="js-id">jestem divem</div>
  <script>
      document.getElementById('js-id').addEventListener('mouseleave', function() {
          console.log('Opusciłeś div js-id!');
      });
  </script>
</body>
</html>

Przekierowania w javascript

<!-- przekierowanie na adres-->
<script>window.location.replace("http://adresurl.pl)";</script>

<!-- przekierowanie wstecz-->
<script>window.history.back();</script>

<!-- przekierowanie w przód-->
<script>window.history.forward();</script>

<!-- przekierowanie jedna stronę wstecz-->
<script>window.history.go(-1);</script>

<!-- przekierowanie jedna stronę w przód-->
<script>window.history.go(1);</script>

Zdarzenia w javascript

onclick - Zdarzenie występuje, gdy użytkownik kliknie element.

ondblclick - Zdarzenie występuje, gdy użytkownik dwukrotnie kliknie element.

onmousedown - Zdarzenie występuje, gdy użytkownik naciśnie przycisk myszy, gdy kursor znajduje się nad elementem.

onmouseenter - Zdarzenie występuje, gdy kursor jest przesuwany na elemencie.

onmouseleave - Zdarzenie występuje, gdy użytkownik przesunie kursor z elementu.

onmousemove - Zdarzenie występuje, gdy kursor, będąc w ruchu, znajduje się nad elementem.

onmouseover - Zdarzenie występuje, gdy wskaźnik jest przesuwany na elemencie lub na jednym z jego dzieci.

onmouseout - Zdarzenie występuje, gdy użytkownik przesuwa wskaźnik myszy na element lub z jednego z jego dzieci.

onmouseup - Zdarzenie występuje, gdy użytkownik zwolni przycisk myszy na elemencie.

Zdarzenia HTML DOM związane z klawiaturą

onkeydown - Zdarzenie ma miejsce, gdy użytkownik trzyma wciśnięty klawisz.

onkeypress -Zdarzenie wystąpiło, gdy użytkownik nacisnął klawisz.

onkeyup - Zdarzenie wystąpiło, gdy użytkownik zwolnił klawisz.

Zdarzenia HTML DOM związane z obiektami (ramkami)

onabort - Ładowanie obrazu przerwano, zanim został załadowany w całości.

onerror - Obraz nie został załadowany prawidłowo (dla <object>, <body> i <frameset>).

onload - Dokument, frameset lub <object> został załadowany.

onresize - Zmieniono rozmiary widoku dokumentu.

onscroll - Przewinięto dokument.

onunload - Strona nie została załadowana (ma zastosowanie zarówno dla <body>, jak i <frameset>).

Zdarzenia HTML DOM związane z formularzami

onblur - Zdarzenie występuje, gdy element formularza traci fokus.

onchange - Zdarzenie występuje, gdy zawartość elementu formularza, selekcja lub sprawdzony status uległy zmianie (ma zastosowanie do <input>, <select> oraz <textarea>).

onfocus - Zdarzenie występuje, gdy element uzyskuje fokus (ma zastosowanie dla <label>, <input>, <select>, <textarea> oraz <button>).

onreset - Zdarzenie występuje, gdy formularz jest resetowany.

onselect - Zdarzenie nastąpi, gdy użytkownik wybierze tekst (ma zastosowanie dla <input> and <textarea>).

onsubmit - Zdarzenie nastąpi, gdy formularz zostanie wysłany.

Zdarzenia HTML DOM związane z właściwościami

bubbles - Zwraca informację, czy zdarzenie może przechodzić fazę propagacji(tzw. bąbelkowanie).

cancelable - Zwraca informację, czy zdarzenie może mieć zablokowane działanie w sposóbdomyślny.

currentTarget - Zwraca element, którego słuchacz zdarzeń wywołał zdarzenie.

eventPhase - Zwraca informację, która faza przepływu zdarzeń jest obecnie oceniana.

target - Zwraca element, który wywołał zdarzenie.

timeStamp - Zwraca czas mierzony w milisekundach w stosunku do momentu, w którym zdarzenie zostało utworzone.

type - Zwraca nazwę zdarzenia.

Zdarzenia MouseEvent/KeyboardEvent HTML DOM związane z właściwościami

altKey - Zwraca informację, czy klawisz Alt został wciśnięty, gdy zdarzenie zostało zarejestrowane.

button - Zwraca informację, który klawisz myszy został kliknięty, gdy zdarzenie zostało zarejestrowane.

clientX - Zwraca współrzędną poziomą wskaźnika myszy w stosunku do bieżącego okna, gdy zdarzenie zostało zarejestrowane.

clientY - Zwraca współrzędną pionową wskaźnika myszy w stosunku do bieżącego okna, gdy zdarzenie zostało zarejestrowane.

ctrlKey - Zwraca informację, czy klawisz Ctrl został wciśnięty, gdy zdarzenie zostało zarejestrowane.

keyIdentifier - Zwraca identyfikator klawisza.

keyLocation - Zwraca położenie klawisza w urządzeniu.

metaKey - Zwraca informację, czy klawisz meta został wciśnięty, gdy zdarzenie zostało zarejestrowane.

relatedTarget - Zwraca element związany z elementem, który spowodował zdarzenie.

screenX - Zwraca współrzędną poziomą wskaźnika myszy w stosunku do ekranu, gdy zdarzenie zostało zarejestrowane.

screenY - Zwraca współrzędną pionową wskaźnika myszy w stosunku do ekranu, gdy zdarzenie zostało zarejestrowane.

shiftKey - Zwraca informację, czy klawisz Shift został wciśnięty, gdy zdarzenie zostałozarejestrowane.


Licznik znaków liczenie

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Document</title>
   </head>
   <body>
      <textarea id="customInput" placeholder="Wpisz tutaj swój tekst!"></textarea>
      <div id="charCount"></div>
      <script>
         var input = document.querySelector("#customInput"),
             charCount = document.querySelector("#charCount");
         
         var onKeyDown = function() {
             charCount.textContent = input.value.length+1;
         };
         
         input.addEventListener("keydown", onKeyDown);
      </script>
   </body>
</html>