NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

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.

Aktivity
Avatar
user
Tvůrce
Avatar
user:17.4.2012 17:40

Ahoj,
řeším problém, který se mi nedaří "rozlousknout" :)
V js jsem si udělal fci která mi posouvá v divu horizontálně tabulku (o jednom řádku a více buňkách).... Potřeboval bych aby se přiřadila událost (konkrétně událost s fcí na posouvání obsahu divu) té buňce která bude v dosahu 0-250px (od levého okraje divu k pravému okraji divu a naopak). Myslím že jeden z principů by mohl být kdybych si zjistil souřadnice kurzoru, které bych pak dal do podmínky ... Nevím jestli to s funkcí "e.pageX" de ale potřeboval bych aby mi vracela souřadnice jen vůči "elementu div" (tzn. souřadnice v levém horním rohu divu by byli x=0, y=0), teď mi je vrací vůči celé stránce (tagu body)... Pokud někdo máte lepší nápad jak to vyřešit, rád ho uvítám ;)

 
Odpovědět
17.4.2012 17:40
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na user
David Hartinger:17.4.2012 19:41

Nějak jsem se v tom ztratil :)

Nahoru Odpovědět
17.4.2012 19:41
New kid back on the block with a R.I.P
Avatar
user
Tvůrce
Avatar
user:17.4.2012 19:51

:) výsledkem má být div v kterém posouvám obsah do leva/ do prava po najetí na levou nebo pravou stranu toho samého divu...

 
Nahoru Odpovědět
17.4.2012 19:51
Avatar
user
Tvůrce
Avatar
user:17.4.2012 19:55

Řeším právě jak zprovoznit pohyb obsahu tak aby když na okraje divu "najedu myší" (pohyb do leva/prava), aby zůstal "aktivní" obsah pod kurzorem

 
Nahoru Odpovědět
17.4.2012 19:55
Avatar
Odpovídá na user
Drahomír Hanák:17.4.2012 20:24

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 :)

 
Nahoru Odpovědět
17.4.2012 20:24
Avatar
Odpovídá na Drahomír Hanák
Drahomír Hanák:17.4.2012 20:26

Jejda, vlastně naopak :)

// Souřadnice
var x = e.pageX-$('div').offset().left,
    y = e.pageY-$('div').offset().top;
 
Nahoru Odpovědět
17.4.2012 20:26
Avatar
user
Tvůrce
Avatar
user:17.4.2012 21:11

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/on­mausemove ...

http://img215.imageshack.us/…7/anim2z.gif

 
Nahoru Odpovědět
17.4.2012 21:11
Avatar
user
Tvůrce
Avatar
user:17.4.2012 22:05

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é.... :D

 
Nahoru Odpovědět
17.4.2012 22:05
Avatar
Odpovídá na user
Drahomír Hanák:17.4.2012 22:13

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í)

 
Nahoru Odpovědět
17.4.2012 22:13
Avatar
user
Tvůrce
Avatar
user:17.4.2012 22:18

Ty šipky tam právě nechci....
Scrolling samotnej už mám udělanej, zjištění souřadnic kurzoru myši taky, ale nevím právě jak ověřit pozici kurzoru vůči tomu divu => jestli je na levý nebo pravý straně divu...

 
Nahoru Odpovědět
17.4.2012 22:18
Avatar
Odpovídá na user
Drahomír Hanák:17.4.2012 22:28
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.

 
Nahoru Odpovědět
17.4.2012 22:28
Avatar
user
Tvůrce
Avatar
user:18.4.2012 14:14

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

 
Nahoru Odpovědět
18.4.2012 14:14
Avatar
Odpovídá na user
Drahomír Hanák:18.4.2012 14:41

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 :)

 
Nahoru Odpovědět
18.4.2012 14:41
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Drahomír Hanák
David Hartinger:18.4.2012 15:08

Působivé :) Klidně bych to dal někam sem na ukázku.

Nahoru Odpovědět
18.4.2012 15:08
New kid back on the block with a R.I.P
Avatar
user
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
user:18.4.2012 15:58

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

 
Nahoru Odpovědět
18.4.2012 15:58
Avatar
Odpovídá na user
Drahomír Hanák:18.4.2012 16:45

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 ;)

 
Nahoru Odpovědět
18.4.2012 16:45
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 16 zpráv z 16.