V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Do sekce https://www.itnetwork.cz/…otova-reseni jsem psal např. https://www.itnetwork.cz/…highlighting, což je bod 1, který chceš.
Na šipky zase využiješ nějakou detekci těch šipek, na kterou napojíš modifikovaný smooth scroll https://www.itnetwork.cz/…mooth-scroll
Díky, zvýraznění aktivního elementu už funguje, ale s tím druhým bodem si fakt nevím rady...
Viz např. https://stackoverflow.com/…1119/3281252, detekci kláves uděláš takto:
$(document).keydown(function(e) {
switch(e.which) {
case 37: // left
break;
case 38: // up
break;
case 39: // right
break;
case 40: // down
break;
default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});Potom už stačí jen vypočítat, jaký element je zrovna "aktivní", tj. projdeš všechny elementy mezi kterými chceš přepínat a každého se zeptáš, jaké má souřadnice a porovnáš s aktuálním místem scrollování – na to využiješ hodně věcí z první části. Pokud najdeš shodu, vytáhneš si element před tímto, či za ním, a provedeš scroll na to.
Splácal jsem tohle, ale nic to nedělá, kde mám chybu?
function sipky()
{
var menu = $('nav ul');
var odchylka = 200;
$("#main section article").each(function(){
var toto = this;
var article_top = $(toto).offset().top;
var article_height = $(toto).innerHeight();
var article_id = $(toto).attr('id');
var menu = $('#menu');
var rychlost = 1000;
var efekt = "easeInOutExpo";
var min = article_top - odchylka;
var max = article_top + article_height - odchylka;
if ( (scroll_top > min) && (scroll_top < max) )
{
$(document).keydown(function(e) {
var kam
switch(e.which) {
case 38: // up
kam = $(toto).previousSibling.attr('id');
break;
case 40: // down
kam = $(toto).nextSibling.attr('id');
break;
default: return;
}
$("html, body").stop().animate(
{ scrollTop: ($('#'+kam).offset().top - menu.height()) },
rychlost, efekt);
e.preventDefault();
});
}
});
}Zapomněl definovat scroll_top, ale stejně to pořád píše v konzoli, že $(toto).previousSibling je nedefinovaný.
No, takto bys to dělat neměl. Musel bys totiž jinak volat funkci sipky() pokaždé, co provedeš scroll. A navíc, logiku bys měl obrátit. Tedy po stisknutí klávesy se projdou prvky, ne naopak.
Udělal bych něco jako
$(document).keydown(function(e) {
// menu, odchylka, rychlost, efekt, ... – proměnné, které znáš a jsou stejné pro všechno ("konstanty")
switch(e.which) {
case 38: // up
case 40: // down
$("#main section article").each(function(){
// proměnné s $(this) atp.
if ((scroll_top > min) && (scroll_top < max)) {
// ...
}
});
break;
default: return;
}
e.preventDefault();
});
A mam jeden dotaz proč píšeš proměnnou
var toto = this;do tohoto -> $(toto); Zkus to napsat takhle - toto.previousSibling.attr('id');
Protože JavaScript si s this velice rád hraje a vůbec to
mnohdy nereferuje na to, co chceš či na co jsi zvyklý z jiných jazyků
(block scope). V JS je function scope a chová se to prostě IMO divně,
zejména pokud na to nejsi zvyklý.
Pokud vím tak proměnné se nepíšou v jquery do $() nebo jo? Tam většinou píšu - id, class a nebo elementy ...
Toto ničemu nevadí. Bere to jak string s CSS selektorem, tak i normální
element, nebo i typ jQuery. Viz http://api.jquery.com/jquery. 
Tak jsem to tedy napsal znova tak, aby se prvky projížděly až po stisknutí šipky a výsledek furt žádný... V f12 mi to jako jedinou chybu ukazuje někde v jquery souboru
Zkus to přidat někam online, např. na JSfiddle, ať se na to můžeme
podívat.
Zobrazeno 15 zpráv z 15.