Diskuze: Onclick - vracení na původní stav
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 11 zpráv z 11.
K personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze naší návštěvnosti využíváme soubory cookie. Informace o tom, jak náš web používáte, sdílíme se svými partnery pro sociální média, inzerci a analýzy. Partneři tyto údaje mohou zkombinovat s dalšími informacemi, které jste jim poskytli nebo které získali v důsledku toho, že používáte jejich služby.
Používáme nezbytné cookies pro fungování webu a s tvým souhlasem také analytické a marketingové cookies.
Zajišťují základní funkce, bezpečnost a služby, které sis vyžádal. Nelze je vypnout.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| ITnetwork | ITnetwork | Provoz webu, relace, přihlášení a uložení nastavení cookies. | PHPSESSID, auth_token, sid, itn_consent_impression, __Host-itn_consent | Relace až 1 rok |
| Google Tag Manager | Správa značek a načítání měřicích nástrojů webu. | Žádné | Neukládá se | |
| Google Fonts | Načítání typografie webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google Hosted Libraries | Načítání potřebných knihoven a stylů webu. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele | |
| Google reCAPTCHA | Ochrana formulářů a webu před zneužitím. | _GRECAPTCHA, rc::a, rc::b, rc::c, rc::f | Relace až 180 dní | |
| YouTube | Přehrávání vloženého video obsahu. | localStorage, IndexedDB; cookies after playback interaction | Relace až trvalé úložiště | |
| Vimeo | Vimeo | Přehrávání vloženého video obsahu. | __cf_bm, _cfuvid, vuid, localStorage, IndexedDB | Relace až 2 roky |
| Facebook Login | Meta | Přihlášení pomocí účtu třetí strany. | Úložiště řízené poskytovatelem | Relace až 1 rok |
| GoPay | GoPay | Zpracování uživatelem vyžádané platby. | Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
Pomáhají nám porozumět používání webu a zlepšovat ho.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Analytics 4 | Měření návštěvnosti a používání webu. | _ga, _ga_* | Až 2 roky | |
| Microsoft Clarity | Microsoft | Měření návštěvnosti a používání webu. | _clck, _clsk, _cltk | Relace až 1 rok |
Slouží k měření kampaní, personalizaci reklamy a marketingové komunikaci.
| Služba | Poskytovatel | Účel | Cookies a úložiště | Doba uložení |
|---|---|---|---|---|
| Google Ads | Měření kampaní, reklama a remarketing. | _gcl_au, _gcl_ls | Relace až 90 dní | |
| Meta Pixel | Meta | Měření kampaní, reklama a remarketing. | _fbp, _fbc, localStorage | Až 90 dní |
| Sklik | Seznam.cz | Měření kampaní, reklama a remarketing. | retargeting, sid, szn:* | Relace až trvalé úložiště |
| LinkedIn Insight | Měření kampaní, reklama a remarketing. | bcookie, li_gc, lidc, __cf_bm | Relace až 1 rok | |
| Ecomail | Ecomail.cz | Měření kampaní, reklama a remarketing. | ecmid, Úložiště řízené poskytovatelem | Dle podmínek poskytovatele |
| Atribuce kampaní ITnetwork | ITnetwork | Přiřazení návštěvy a objednávky ke kampani. | campaign_clid[*], user_session_context | Až 1 rok |
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Pokud se to má být jen tam a zpět, doporučuji mu přiřadit vždy
třídu.
Tzn. třeba .active{ left: 200px; }
Nemyslím, že při kliknutí změní pozici a pak zpět, potřebuji aby tam chvíli zůstal a až uživatel klikne podruhé tak aby se vrátil zpět.
Nedělám v JS tak ti to napíšu obecně, doufám že to pochopíš 
var atribut=1;
if(atribut==1)//je jedno jak to budeš mít
{
atribut=0;
posunuti o danou hodnotu;
}
else
{
atribut=1;
posunuti zpet o danou hodnotu;
}
A pak jen budeš volat v onclicku daný if a máš to
jen ten atribut musíš definovat
jako globální se mi zdá, nebo jak to tam je
Však to jsem myslel, popíšu to v jQuery :
$('selektor').click(function(){
$(this).toggleClass('active');
});
Pokud to chápu správně tak chceš něco velmi jednoduchého skrze
JQuery.
Stačí když při kliknutí na daný prvek například do proměnné clicked
uložíš 1 a když klikne podruhé kontroluješ jestli už uživatel klikl. A
dám příklad u menu: Poprvé klikne posuneš prvek a 200px doprava a uložíš
si do proměnné clicked 1. A když klikne, zkontroluješ jestli je proměnná
clicked 1 a pokud ano posuneš to o 200px doleva, pokud ne posuň prvek o 200px
doleva.
var element = document.querySelector('#elem');
element.addEventListener('click', function() {
var isActive = this.className.match(/active/);
if (isActive) {
this.className = this.className.replace(/ ?active/, '');
} else {
this.className += ' active';
}
}, false);
Nebo pro víc elementů:
var clickHandler = function() {
var isActive = this.className.match(/active/);
if (isActive) {
this.className = this.className.replace(/ ?active/, '');
} else {
this.className += ' active';
}
};
var elements = Array.prototype.slice.call(document.querySelectorAll('#elem'), 0);
elements.forEach(function(element) {
element.addEventListener('click', clickHandler, false);
});
Jestli jsem dobře pochopil tak, pokud chceš JS bez JQuery, tak nejjednodušší to bude takto:
HTML:
<div id="posunutyPredmet" onClick="posun()"></div>
JS:
var pozice = 0;
function posun() {
if (pozice==0) {
pozice = 1;
Posunuti o danou hodnotu
}
else {
pozice = 0;
Posun na defaultni hodnotu
}
}
Jak psal Drahomír Hanák
var element = document.querySelector('#elem');
element.addEventListener('click', function() {
var isActive = this.className.match(/active/);
if (isActive) {
this.className = this.className.replace(/ ?active/, '');
} else {
this.className += ' active';
}
}, false);
Jojo, jen jsem si říkal, že tak to bude více přehlednější...
Zobrazeno 11 zpráv z 11.
