Přidej si svou IT školu do profilu a najdi spolužáky zde na síti :)

Diskuze: jQuery - problém

JavaScript JavaScript jQuery - problém

Aktivity (1)
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:12.4.2013 15:14

Ahoj .. snažím se udělat v jQuery pár divů které by měnily barvu když DRŽÍTE MYŠ A NAJEDETE NA NĚ ...

zkoušel jsem:

$(document).ready(function(){

   for(i=0; i<100;i++)
   {
    $('#divplace').append("<div class='item'></div>");
   }

   $('.item').mousedown(function(){
      $('.item').mouseenter(function(){
          $(this).css('background','red')
      });
   });

});

ale bohužel když jednou kliknu a pustím myš tak se pořád obarvují divy ..
nevíte někdo jak to udělat abych musel držet myš pro obarvování ? :O ...

děkuji :)

tady je online : http://blbost.ihobi.cz/

Odpovědět 12.4.2013 15:14
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:12.4.2013 15:16

Si udělej proměnnou drzeno a tu v mousedown dej na true a v mouseup na false ;-) Pak se na ni ptej v mouseenter.

Nahoru Odpovědět 12.4.2013 15:16
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
Honza Bittner
Šupák
Avatar
Odpovídá na David Čápka
Honza Bittner:12.4.2013 15:18

hmmm .. to jdu zkusit ;)

Nahoru Odpovědět 12.4.2013 15:18
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na David Čápka
Honza Bittner:12.4.2013 15:26

Udělal jsem toto :

$(document).ready(function(){

   for(i=0; i<100;i++)
   {
    $('#divplace').append("<div class='item'></div>");
   }

   var drzeno = false;

   $(document).mousedown(function(){
      this.drzeno = true;
   });

   $(document).mouseup(function(){
      this.drzeno = false;
   });

   if (drzeno == true)
   {
      $('.item').mouseenter(function(){
          $(this).css('background','red')
      });
   }
});

ale nefunguje mi to ... poradil bys mi kde mám chybu ? :)

Nahoru Odpovědět 12.4.2013 15:26
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:12.4.2013 15:28
if (drzeno == true)

musíš mít v tom mouseenter a nejsem si jistý, jestli to tu proměnnou takhle uvidí. Můžeme být oškliví a udělat ji globální. Jinak bys to musel řešit asi přes objekty.

Nahoru Odpovědět 12.4.2013 15:28
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
Honza Bittner
Šupák
Avatar
Odpovídá na David Čápka
Honza Bittner:12.4.2013 15:29

jojo .. udělal jsem to do toho .. čili takto :

var drzeno = false;

   $(document).mousedown(function(){
      this.drzeno = true;

      if (this.drzeno == true)
        {
          $('.item').mouseenter(function(){
            $(this).css('background','red')
          });
        }
   });

   $(document).mouseup(function(){
      this.drzeno = false;
   });

ale pořád když zvednu prst z myše tak barví ..

Nahoru Odpovědět 12.4.2013 15:29
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:12.4.2013 16:08

Zkus tohle:

drzeno = false;

$(document).mousedown(function(){
   drzeno = true;
});

$(document).mouseup(function(){
   drzeno = false;
});

$('.item').mouseenter(function(){
   if (drzeno)
      $(this).css('background','red')
});
Nahoru Odpovědět  +1 12.4.2013 16: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
Honza Bittner
Šupák
Avatar
Odpovídá na David Čápka
Honza Bittner:12.4.2013 16:14

děkuju moc :) .. pomohl jsi mi ;)

Nahoru Odpovědět 12.4.2013 16:14
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:12.4.2013 16:20

Ta proměnná bez var je chápána jako globální, což je velmi ošklivé. Bohužel nevím, jak to jinak jednoduše vyřešit bez objektů a objekty nejsou v JS nic jednoduchého, takže pro začátek to je takhle asi lepší.

Nahoru Odpovědět 12.4.2013 16:20
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
Honza Bittner
Šupák
Avatar
Nahoru Odpovědět 12.4.2013 16:24
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Drahomír Hanák:12.4.2013 16:35

V HTML5 můžeme používat data atributy a jQuery nabízí metodu .data, která nastaví nebo předá uloženou hodnotu.

$('.item').data('drzeno', false);

$(document).mousedown(function(){
   $('.item').data('drzeno', true);
});

$(document).mouseup(function(){
   $('.item').data('drzeno', false);
});

$('.item').mouseenter(function(){
   if ($(this).data('drzeno'))
      $(this).css('background','red')
});

Rozhodně ne globální proměnnou :) Můžeš to aplikovat na kterýkoli prvek, ale mysli na to, že data se váží právě k tomu jednomu prvku (resp. k tomu, ktrerý odpovídá CSS selektoru). Nebo ještě lépe si vytvoř closure:

(function() {

// Tohle už není globální proměnná
// má platnost pouze v closure téhle anonymní funkce
var drzeno = false;

$(document).mousedown(function(){
   drzeno = true;
});

$(document).mouseup(function(){
   drzeno = false;
});

$('.item').mouseenter(function(){
   if (drzeno)
      $(this).css('background','red')
});

})();

// Vypíše undefined
console.log(drzeno);
Editováno 12.4.2013 16:36
 
Nahoru Odpovědět  +1 12.4.2013 16:35
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:12.4.2013 16:39

děkuju .. hned to půjdu vyzkoušet :)

Nahoru Odpovědět 12.4.2013 16:39
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:12.4.2013 16:42

Všechno mi funguje .. teď jsem narazil na snad poslední chybu a to tu, že když nějak špatně chytíš myš a objeví se PŘEŠKRTNUTÉ KOLEČKO tak po spuštění pořád myš barví .. nevíš jak tomuto zamezit ? :)

http://blbost.ihobi.cz/

Editováno 12.4.2013 16:43
Nahoru Odpovědět 12.4.2013 16:42
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Drahomír Hanák
David Čápka:12.4.2013 16:46

Netušil jsem, že to bude potom přístupné v těch eventech, tohle je dobré :)

Editováno 12.4.2013 16:46
Nahoru Odpovědět  +1 12.4.2013 16:46
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
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:12.4.2013 16:48

Protože se nevyvolá ta mouseup a drzeno zůstane na true. Jedině odchytnou nějakou tu událost drag and drop, podívej se do manu jquery, jestli na to něco má.

Nahoru Odpovědět 12.4.2013 16:48
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
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Drahomír Hanák:12.4.2013 17:02

Scope funkce se dědí, ale o úroveň výš už dostupný (logicky) není :) Když definuješ proměnnou ve funkci, bude dostupná ve všech funkcích, co jsou uvnitř.

Honza Bittner zkus zakázat selection v CSS:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
 
Nahoru Odpovědět 12.4.2013 17:02
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:12.4.2013 17:08

bohužel, pořád to PŘEŠKRTLÉ KOLEČKO jde .. :/

Editováno 12.4.2013 17:08
Nahoru Odpovědět 12.4.2013 17:08
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:12.4.2013 17:17

http://www.favicon.cc/
tady to mají udělané také .. ale funguje jim to .. nevím proč to mě dělá ty blbosti .. :D

Nahoru Odpovědět 12.4.2013 17:17
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
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 18 zpráv z 18.