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.
- 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
IntersectionObserverEvent 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>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>