NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Honza Bittner
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:12.4.2013 15:18

hmmm .. to jdu zkusit ;)

Nahoru Odpovědět
12.4.2013 15:18
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger: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
12.4.2013 16:08
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:12.4.2013 16:14

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

Nahoru Odpovědět
12.4.2013 16:14
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na David Hartinger
Honza Bittner:12.4.2013 16:24

ok .. :)

Nahoru Odpovědět
12.4.2013 16:24
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na David Hartinger
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
12.4.2013 16:35
Avatar
Honza Bittner
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Drahomír Hanák
David Hartinger: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
12.4.2013 16:46
New kid back on the block with a R.I.P
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Honza Bittner
David Hartinger: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
New kid back on the block with a R.I.P
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na David Hartinger
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
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Honza Bittner
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
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.