FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
hankova31
Člen
Avatar
hankova31:23.4.2019 9:00

Ahoj,
mám vytvořený grid systém a do něj chci vložit elementy div tak, že pokud budou bíle, půjdou do nich přetáhnout červené divy. Tedy s červenýma položkama půjde myší hýbat. Chtěla poradit jak změnit styl toho "klonu"? Pokud je to menší čtverec tak se ta barva jen trochu zesvětlí, což by mi nevadilo, ale pokud je to větší obdélník, je to pod kurzorem nejtmavší a od tohohle bodu jde ta barva do ztracena. Chci aby byla ta barva konstantní a nevím kde v kódu to změnit.
Odkaz příkladu: https://codepen.io/…1/pen/PgBBaj

Moc děkuji.

 
Odpovědět
23.4.2019 9:00
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.4.2019 9:52

A jak jsi postupovala, co jsi vyzkousela, vygooglovala?

rgba(255, 255, 255, 0.8); // rgba(R, G, B, A); a = alpha = pruhlednost = opacity

Nevim, co je tohle za drag and drop, ale treba ve firefox mi to nefunguje. Ja bych sel znovu do google a pridal tam cross-browser.

 
Nahoru Odpovědět
23.4.2019 9:52
Avatar
hankova31
Člen
Avatar
Odpovídá na Peter Mlich
hankova31:23.4.2019 9:58

Mi právě vůbec nejde změnit barva toho klonu, kdyžtak ji změním, ale průhlednost právě nikde nenastavuji. V odkaze je zdroják, opacity nikde nedávám. Koukala jsem na víc příkladů a pokaždé co je ten obdélník větší, tak udělá tohle.

 
Nahoru Odpovědět
23.4.2019 9:58
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23.4.2019 10:49

Ahoj, máš nastavený alfa kanál na 0,8 v bílé barvě.

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
}

Nebude to řešit tvůj problém? Jak už psal Peter Mlich, tak alfa kanál nastavuje průhlednost (opacity). Jestli to vidím dobře, tak červenou barvu překryješ 80% viditelnou bílou. To zvýraznění okolo kurzoru bude už nejspíš dělat JS automaticky.

Nahoru Odpovědět
23.4.2019 10:49
/* Life runs on code */
Avatar
hankova31
Člen
Avatar
hankova31:23.4.2019 10:56

Jasně, i když dám ten alfa kanál pryč, tak to změní jen ty barvy, které jsou pevně dané, ale u toho posouvání je to pořád stejné. Hlavně se to děje až právě u jiné velikosti, kdyby to byly čtverce 100x100 tak to nedělá.

 
Nahoru Odpovědět
23.4.2019 10:56
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23.4.2019 11:02

Aha, tak to je divné. Zkoušela jsi použít pseudo-element :after? Spíš si ale myslím, že problém nebude v CSS, ale v JS, kde když vyjmeš element z běžného toku, tak se mu přiřadí nějaký defaultní styl nebo něco takového, ale s tím ti příliš neporadím, neboť JS téměř nepoužívám a tudíž neznám.

Nahoru Odpovědět
23.4.2019 11:02
/* Life runs on code */
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na hankova31
Jaroslav Smrž:23.4.2019 11:05

Respektive při čtverci se ten defaultní styl může chovat jinak a roztáhne se do celého elementu rovnoměrně. Jen u obdélníku či jiného tvaru o jiných délkách stran může vypadat takto.

Nahoru Odpovědět
23.4.2019 11:05
/* Life runs on code */
Avatar
hankova31
Člen
Avatar
hankova31:23.4.2019 11:06

Právě si taky myslím, že problém je v tom JS, že je to nějak defaultně nastavené, ale nevěděla jsem do jaké diskuze to hodit protože přece jenom je to i nastavení stylu že. Zkusím to dát ještě tam, jestli někdo nebude vědět. Právě že snad u všech příkladových řešení, je nějaký malý objekt většinou čtverec a po roztažení mi to dělá vše to samé. Ale díky.

 
Nahoru Odpovědět
23.4.2019 11:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:23.4.2019 13:15

Tak to je dobre si hrat pokus omyl. Funkcni verzi si zkopirovat, zalohovat (ja to delam ve faru F5, *.1 enter (2, 3, 4...)) a pak upravit. A dobre radeji zkopirovat jinam a davat bacha, at se neprepise original.

Ten js mnoho nedela. Na zacatku ulozi do pole to, co ma class=fill (v poctu 0) nebo empty (vsechno s tou class).
Prida listenery, presmeruje udalosti s elementu v poli empty na tve funkce. e.ondragover=dra­gOver.
Presmeruje udalost ondragstart z celeho 'document' do tve funkce. Tam ale pouzili jiny zapis. function(event)

dragstart - posun start
Ten timeout je jen kosmeticka zalezitost.
event.target.clas­sList.add("hol­d"); - prida kazdemu elementu, na ktery se klikne, class "hold"
setTimeout(() => (event.target­.className = "invisible"), 0); - pri onload se provede tento timeout, ktery prepise cele className na "invisible". Pokud tam byla jina class, tak zmizi. Tady by bylo lepsi pouzit misto .className spis take classList.add. ... Cili, po kliknuti probiha nejaky maly timeout a pak se teprve vykona event.target.clas­sList.add("hol­d").
ccc = event.target; ulozi si element, na ktery se kliklo do ccc.

draged
event.target.clas­sName="fill";
podobne, draged nastava, kdyz se s necim hybe. V te funkci by se meli necemu menit souradnice top-left

dragOver - smaze veskere eventy (kliknuti mysi, zmacknuti klavesy)

dragEnter - to by mohla byt udalost, kdy hybes mysi nad necim, co se muze hybat.
if(event.target­.className != "fill") - kdyz je clasname==fill tak neco proved, konkretne pridej class "hovered"
{
this.className += " hovered";
}
To je opet cele pochybne. Opet by tu melo byt classList.add. A misto podminky neco jako classList.search (ale to nevim, jak se presne jmenuje).

dragLeave a dragDrop dela skoro totez.
this.append(ccc); - to prida dovnitr elementu to, co bylo v ccc.

Pokud te zajima vse, co se tyce class, tak se to jmenuje class + neco, classList, className, getElementByClas­sName.

 
Nahoru Odpovědět
23.4.2019 13:15
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 9 zpráv z 9.