IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
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í.
Mezi 13:00 až cca 16:00 proběhne odstávka sítě z důvodu aktualizace. Web bude po celou dobu nedostupný.

Diskuze: Po najetí myši, okno

Aktivity
Avatar
niveses
Tvůrce
Avatar
niveses:2.3.2013 17:24

Zdravím Vás. Potřebuji, aby mi po najetí myši na slovní spojení vyjelo info a jednoduchá fofogalerie. Rozvedu mojí myšlenku :) Budu mít seznam slov. Po najetí na slovo, bych chtěl, aby se vytvořilo jakési okno a v něm abych se něco o tom slově dozvěděl, a bylo tam már fotek. Bohužel to nemám jak přirovnat. Snad to pochopíte :).Děkuji a s pozdravem

Editováno 2.3.2013 17:26
 
Odpovědět
2.3.2013 17:24
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na niveses
Honza Bittner:9.3.2013 22:13

Ahoj, vyřešil jsi svůj problém nebo stále nevíš ? :)

Editováno 9.3.2013 22:14
Nahoru Odpovědět
9.3.2013 22:13
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
niveses
Tvůrce
Avatar
niveses:9.3.2013 22:17

Stále nevím :()

 
Nahoru Odpovědět
9.3.2013 22:17
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na niveses
Honza Bittner:9.3.2013 22:41

No takže ... chtěl si to u nějakého slova že ?

  1. tudíž ... asi budeš chtít text zvýraznit (nějak) i bez hoveru ..

takže si to slovo dáš například do

<b> </b>

a v CSS si nastavíš co všechno má splňovat

b { ... }
  1. teď přichází fáze zobrazení toho okna ... dalo by se to udělat tak, že ho dáš před nebo za slovo a nastavíš mu výšku na 0 (display: inline), po najetí (hover) mu nastavíš pozici aby byl jakoby před textem (myslím že position: relative; ) a možná také z-index: 100; (třeba) ... no, myslím že s malou úpravou by to mohlo fungovat :)

Kdyžtak napiš :)
____
otázka jak nastavit po kliknutí na b aby se udelal ten hover ?

b:hover + #muj_skryty_div_1
{
//zde nastavuješ parametry již pro to okno
}
Editováno 9.3.2013 22:44
Nahoru Odpovědět
9.3.2013 22:41
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 niveses
David Hartinger:10.3.2013 6:56

Tomu <b> bych se vyhnal, už se nepoužívá. Co chceš se dělá spíše přes JavaScript. Pomocí CSS by to také mělo jít, ale nikdy nedosáhneš takového efektu, jaký asi očekáváš.

Nahoru Odpovědět
10.3.2013 6:56
New kid back on the block with a R.I.P
Avatar
niveses
Tvůrce
Avatar
niveses:10.3.2013 8:21

Děkuji moc za odpovědi. To co chci má například Alza u posledního nákupu.. Po najetí myši se objeví větší okno a tam je vice info.... Postup jdu zkusit pak napíšu.

 
Nahoru Odpovědět
10.3.2013 8:21
Avatar
niveses
Tvůrce
Avatar
niveses:10.3.2013 8:21

Děkuji moc za odpovědi. To co chci má například Alza u posledního nákupu.. Po najetí myši se objeví větší okno a tam je vice info.... Postup jdu zkusit pak napíšu.

 
Nahoru Odpovědět
10.3.2013 8:21
Avatar
niveses
Tvůrce
Avatar
niveses:10.3.2013 9:37

Nějak se mi to nepodařilo, sdraco, jak přes JS? Díky

Btw: jak lze editovat nebo mazat svoje příspěvky? U tohohle mám tužku, ale u ostaních ne. Díky

Editováno 10.3.2013 9:38
 
Nahoru Odpovědět
10.3.2013 9:37
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na niveses
Honza Bittner:10.3.2013 10:41

Ano, přes JS by to šlo, ale niveses píše do HTML&CSS takže myslím že JS neovládá ...

nicméně jsem mou verzi zkusil a funguje ..
jen musíš dát vždy ten panel který chceš zobrazit pod daný < b > < /b >

HTML :

Můj text a tady je <b>panel</b>
<div class="mujpanel">
  tady je text v prvnim panelu a funguje jen na <b> nademnou
</div>

Můj 2. text a tady je 2. <b>panel</b>
<div class="mujpanel">
   tady je text v druhem panelu a funguje jen na <b> nademnou
</div>

CSS :

.mujpanel
{
        height: 0px;
        width: 0px;
        background: yellow;
        border: 2px solid black;
        visibility: hidden;
        position: fixed;
}

b:hover + .mujpanel
{
        height: 500px;
        width: 500px;
        background: red;
        visibility : visible;
        left: 100px;
}

Tento způsob ti zobrazí panel nad textem, takže ti nic "neodsune", sice to není nejlepší řešení, ale funguje ... ;)

(jestli by jsi chtěl by jsi chtěl zobrazit daný div i když saháš na daný div tak v css doplnit

b:hover + .mujpanel, .mujpanel:hover
{ }
Editováno 10.3.2013 10:44
Nahoru Odpovědět
10.3.2013 10:41
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
niveses
Tvůrce
Avatar
niveses:10.3.2013 10:45

Díky, teď si vyhraji s css a myslím, že to bude stačit, nicméně, jak by se to dalo udělat v JS? Díky

 
Nahoru Odpovědět
10.3.2013 10:45
Avatar
xxxvodnikxxx
Člen
Avatar
xxxvodnikxxx:10.3.2013 11:01

Super, díky za odpovědi, řešil jsem něco podobnýho :) kódování od HoBi je elegantní :)

Nahoru Odpovědět
10.3.2013 11:01
Unix- svět, kde chcete být nulou :) (UID)
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na niveses
Honza Bittner:10.3.2013 11:02

Myslím si, že když si dobře vyhraješ s CSS3 tak to bude stačit :)

Jinak jak by to vypadalo v JS nevím, zatím ho moc neumím ;)
Nicméně by tu někdo mohl napsat více tutoriálů pro začátečníky .. :/

Nahoru Odpovědět
10.3.2013 11:02
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:16.3.2013 17:00

Pomocí JavaScriptu (a trochou CSS) by to mohlo vypad takto: http://www.itnetwork.cz/dev-lighter/74

Víceméně se však pouze mění css. Tedy jsem nic zas tak vyjmečného nevymyslel.

 
Nahoru Odpovědět
16.3.2013 17:00
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Tato diskuze byla označena moderátorem jako nekonstruktivní a myslíme si, že nemá pro veřejnost příliš vysokou hodnotu. Členy můžete samozřejmě stále oslovit soukromě a to formou zpráv nebo chatu.

Zobrazeno 13 zpráv z 13.