Diskuze: Událost prvku v závislosti na vzdálenosti od divu
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Tvůrce
Zobrazeno 16 zpráv z 16.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Ty souřadnice dostaneš v jQuery takto:
// Upraví událost
e = $.event.fix(e);
// Souřadnice
var x = $('div').offset().left-e.pageX,
y = $('div').offset().top-e.pageY;
ale taky nějak netuším, co přesně chceš udělat
Jejda, vlastně naopak
// Souřadnice
var x = e.pageX-$('div').offset().left,
y = e.pageY-$('div').offset().top;
Udělal jsem narychlo animaci, chyb co jsem tam udělal si nevšímejte, jde jenom o ten způsob scrollování obsahu v divu. V případě animace mám právě problém udělat to tak, aby při "scrollování" šly aplikovat na posouvané "obdelníky" efekty atp.. onmouseover/onmausemove ...
Ještě naposledy k animaci přiložené výše: Jde mi o způsob jak udělat scrolling nějakého obsahu v divu, když najedu k jeho levé části... (viz animace) Musí být zárověň vyřešen problém, kvůli kterému jsem toto téma zaklídal: Po najeti na div a následné "scrollovaní" obsahu, musí v něm jít aplikovat na scrollovaný obsah např. onmouseover. Prostě musí být aktivní => Jako první způsob mě napadlo to že bych nad div1 s obsahem vložil další div2 ,a pak přes událost divem2 scrolloval obsah v divu1 => Ale tak by to nešlo, protože na objekty které by se nacházely pod divem2 by nešlo např.: aplikovat odkaz... Tak jsem měl řešení, které spočívalo v tom, že by se událost s funkcí která scrolluje obsahem v divu1 předala vždy scrollovanému "obdelníku"=>buňce tabulky (viz animace), který by byl nejblíže levé straně divu1... Snad už to je trochu pochopitelné....
Aha, užto chápu No udělal bych tam buď klasicky šipky a po onmouseover scrolloval obsah nebo další možnost je zjistit si pozici kurzoru a podle toho, na které je straně posouvat obsahem. Na animaci scrollování buďto použít setInterval nebo animate v kombinaci se stop (to by bylo asi lepší řešení)
var vlevo = e.pageX-$('#obsah').offset().left < ($('#obsah').width()/2) ? true : false;
if(vlevo) {
// scrolluj vlevo
} else {
// scrolluj vpravo
}
Proměnná vlevo má hodnotu true/false. true - když je kurzor na levé polovině, false - když je na pravé. Snad ti to pomůže, netestoval jsem to, ale mělo by to fungovat.
Cus díky moc za kód, ale jaksi se mi to nedaří rozchodit...
Mám php soubor ve kterém mám celý html kód...
jQuery mám includovany jako první v hlavičce spolu se scriptem který
"ovládá" scrolling obsahu v divu...
var vlevo = e.pageX-$('#obsah').offset().left < ($('#obsah').width()/2) ? true : false;
if(vlevo) {
// scrolluj vlevo
$("#obsah").mouseenter(scrollDivLeft('obsah'));
$("#obsah").mouseleave(stopMe());
} else {
// scrolluj vpravo
$("#obsah").mouseenter(scrollDivRight('obsah'));
$("#obsah").mouseleave(stopMe());
}
Nejsem si jist co znamená
$('div')
Má to zjistit souřadnice v konkrétním divu ? takze je to id (ale kdyby
bylo tak by tam chyběl "#" ...?
Nad tímto scriptem mám ještě funkci pro ten samotnej scolling => ta
funguje... Tuhle funkci pak volám událostí v divu v kterém se obsah
scrolluje...
Nevíš prosím tě kde dělám chybu...
Tak jsem si to vyzkoušel u sebe na FTPčku a funguje mi to. Musíš to dát celé do události mousemove. Dám ti tu okomentovaný zdrojový kód fungující ukázky:
$(function() {
// Nastavíme základní vlastnosti. jeVlevo musí být true, pokud začínáme scrollovat zlevo, false - pokud zprava
var jeVlevo = true,
rychlost = 1000;
$('#obsah').mousemove(function(e) {
// Opraví event, aby byl použitelný ve všech prohlížečích stejně
e = $.event.fix(e);
// Zjistí, kde je kurzor
var vlevo = e.pageX-$(this).offset().left < ($(this).width()/2) ? true : false;
var maximalniPosun = $(this).get(0).scrollWidth - $(this).get(0).clientWidth;
// Zjistí, na kterou stranu se má posunout
if(vlevo && !jeVlevo ) {
// Posune se vlevo
$(this).stop().animate({ scrollLeft: 0 }, rychlost);
// Řekneme skriptu, že jsme vlevo
jeVlevo = true;
} else if ( !vlevo && jeVlevo ) {
// Posunese vpravo
$(this).stop().animate({ scrollLeft: maximalniPosun }, rychlost);
// Řekneme skriptu, že jsme vpravo
jeVlevo = false;
}
}).mouseleave(function(e) {
// Zastaví posouvání
$(this).stop();
});
});
Výsledek si můžeš prohlédnout na http://demos.drahak.eu/js/, ale pospěš si! Často tam měním obsah
Působivé Klidně bych to dal někam sem na ukázku.
SUPER
Děkuji ti, já sem v tom svým scriptu míchal javascript a jQuery dohromady
takže jsem tam měl chybnej zápis... Líbí se mi to opravení toho "eventu"
... to mě právě dost štvalo . Jinak se moc těšim na další díly jQuery oproti javascriptu jsem
zjistil ze se stručně píše a usnadnuje práci s js, škoda že v ještě tom
pořádně neumím...
Není zač, je to otázka pár minut, když víš jak na to
Jinak jQuery je skvělý framework. Má i celkem výstižný slogan: "Write
Less, Do More".
Kromě té opravy události toho skrývá ještě hodně. O tom možná někdy
plánuji napsat článek. Například elementy můžeš vytvářet i takto:
$('<div />', {
id: "idElementu",
text: "Lorem ipsum ...",
click: function(){}
})
A je toho mnohem víc
Zobrazeno 16 zpráv z 16.