Diskuze: Událost prvku v závislosti na vzdálenosti od divu

JavaScript JavaScript Událost prvku v závislosti na vzdálenosti od divu

Avatar
user
Redaktor
Avatar
user:

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 Čápka
Tým ITnetwork
Avatar
Odpovídá na user
David Čápka:

Nějak jsem se v tom ztratil :)

Nahoru Odpovědět 17.4.2012 19:41
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
user
Redaktor
Avatar
user:

:) 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
Redaktor
Avatar
user:

Ř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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:

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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
Drahomír Hanák:

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
Redaktor
Avatar
user:

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
Redaktor
Avatar
user:

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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:

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
Redaktor
Avatar
user:

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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:
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
Redaktor
Avatar
user:

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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:

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 Čápka
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
David Čápka:

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

Nahoru Odpovědět 18.4.2012 15:08
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
user
Redaktor
Avatar
Odpovídá na Drahomír Hanák
user:

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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na user
Drahomír Hanák:

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.