Ako prinútiť jeden div, aby sa ovládal cez druhý div

Mego · Napísal **Mego**: 21.04.2014 7:12

Potrebujem niečo také, že keď prebehnem myšou po odkaze, vyhodí sa vedľa neho biele okno... nápadne mi to pripomína dropdown menu, lenže ja netuším, ako sa takéto menu dá urobiť. Malo by to byť niečo také, že to vyskakovacie okienko má za bežných okolností display:none; a po prechode myšou cez ten odkaz sa mu musí zmeniť trieda na display:block. Lenže ako sa dá docieliť, aby pri hovri na DIV A sa zmenili vlastnosti DIVu B ? V JS som total lama, takže za každú pomoc budem rád

hatto13 · Napísal **hatto13**: 21.04.2014 8:25

cez jquery:

Kód:

var $mojeMenu = $("#divB");
$("#divA").hover(
  // ked prides mysou
  function() {
   $mojeMenu.show(); // alebo $mojeMenu.fadeIn(); pre krajsi efekt
  },
  // ked odides s mysou
  function() {
   $mojeMenu.hide(); // alebo $mojeMenu.fadeOut(); pre krajsi efekt
 });

ale ak to menu je v ramci toho prveho elementu tak sa to da aj cez css. ale kedze neviem presne co robis tak ti neviem lepsie poradit.

Mego · Napísal autor témy **Mego**: 21.04.2014 16:51

Dobre a kde to mám umiestniť? Do kódu...
Môžem to dať do <head> pod <script>?
Načo mi je dobrá tá premenná mojeMenu?
Ospravedlňujem sa za také blbé otázky, ale naozaj neviem o JS nič... a jQuery mi treba ešte k tomu pripojiť do head, však?

Kamahl · Napísal **Kamahl**: 21.04.2014 17:24

Ano mozes to dat aj do headu do scriptu a jquery includni nad to. Ta premenna tam nemusi byt, mozes vzdy pristupovat priamo k divu B.

Ak nevies o JS a jquery nic, mal by si s tym nieco urobit, otvorit si dokumentaciu a zacat citat. Taketo polovicate riesenia ktorym nerozumies ti nepomozu. Toto je kod len pre pripad, ked chces zobrazit konkretny div pri konkretnom linku. Z prveho prispevku som mal pocit, ze chces robit taku tu reklamu, ze kazdy link v texte bude po hoveri zobrazovat nejaky text.

killer · Napísal **killer**: 21.04.2014 17:25

premenná $mojeMenu slúži na zjednodušenie kódu, namiesto písania [c]$("#divB")[/c] všade v kóde (teraz to nie je také strašné, ale pri pár sto-riadkových súboroch je už celkom sranda robiť potom nejaké zmeny [napríklad namiesto divB budeš chcieť divC a si v pytli]) používaš len smerník v tej premennej na element s ID "divB".

Mego píše:

Ospravedlňujem sa za také blbé otázky, ale naozaj neviem o JS nič...

No, takže máš v práci čo robiť na ďalších pár mesiacov :lol:

A áno, jquery knižnicu musíš mať načítanú - kvôli rýchlosti ju niektorí odporúčajú dávať na posledný riadok <body> (spolu s ostatnými js)

// neskoro

Kamahl · Napísal **Kamahl**: 21.04.2014 17:39

Nie vsetko mozes hodit na koniec body, preto to radsej zatial davaj do headu a dufaj, ze ludia to maju nacachovane. Na jquery a dalsie zname kniznice pouzivaj https://developers.google.com/speed/libraries/devguide alebo ine CDN. Toto si mozes tiez precitat o umiestneni JS https://developer.yahoo.com/performance ... #js_bottom . Dalej aj Modernizer a html5shim musi byt v heade.

Mego · Napísal autor témy **Mego**: 21.04.2014 20:39

Kamahl píše:

Z prveho prispevku som mal pocit, ze chces robit taku tu reklamu, ze kazdy link v texte bude po hoveri zobrazovat nejaky text.

Viacmenej, ale ide o 4 linky a nie je to reklama... keby som vedel, ako sa to volá, našiel by som živý príklad na nete

Kamahl · Napísal **Kamahl**: 21.04.2014 20:45

Tak ak to chces len pre 1 konkretny text kde konkretne 4 linky budu zobrazovat 4 divy, tak to mozes urobit takto a skopirovat kod 4x. Ale to je volovina

Radsej sa nauc jquery (JS ti v tomto pripade prakticky ani netreba, ale samozrejme je dobre sa ho naucit) a urob to sikovnejsie, 4x kratsie.

Ak to chces aplikovat na rozne texty s roznym poctom linkov, tak pouzi napr .each ale samozrejme, bez znalosti jquery sa zas nepohnes.

hatto13 · Napísal **hatto13**: 21.04.2014 20:51

each nepotrebuje. staci ak miesto id pouzije triedu.

keby si dal konkretny priklad - tvoj kod html tak uz ti to mohol za ten cas niekto spravit.

don jebot · Napísal **don jebot**: 22.04.2014 7:34

pouzivaj class a this a vola sa to toolptip

Mego · Napísal autor témy **Mego**: 22.04.2014 8:14

ee, tooltip je niečo iné asi... práve sa idem na to pozrieť, tak budem informovať, či to funguje. Zatiaľ ďakujem za help

// Spojený príspevok 22 Apr 2014, 08:36

Nefunguje mi to nejako...

V hlavičke je toto
<script type="text/javascript" src="js/vyskak.js"></script>

js/vyskak.js je toto
var $hotlink = $(".helptext-main");
$("helptext").hover(
// ked prides mysou
function() {
$hotlink.show(); //$hotlink.fadeIn();
},
// ked odides s mysou
function() {
$hotlink.hide(); //$hotlink.fadeOut();
});

V index.php čoho sa to týka je toto
<ul>
<li class="helptext"><a href="<? echo Menu::getHyperlinkById();?>"><?echo Menu::getHyperlinkTextById();?></a>
<div class="helptext-main"><?echo getContentByLabel("helptext1");?></div><div class="helptext-but"><a href="<?echo Menu::getHyperlinkById();?>">zisti viac >></div></a></li>
<li class="helptext"><a href="<? echo Menu::getHyperlinkById();?>"><?echo Menu::getHyperlinkTextById();?></a>
<div class="helptext-main"><?echo getContentByLabel("helptext2");?></div><div class="helptext-but"><a href="<?echo Menu::getHyperlinkById();?>">zisti viac >></div></a></li>
<li class="helptext"><a href="<? echo Menu::getHyperlinkById();?>"><?echo Menu::getHyperlinkTextById();?></a>
<div class="helptext-main"><?echo getContentByLabel("helptext3");?></div><div class="helptext-but"><a href="<?echo Menu::getHyperlinkById();?>">zisti viac >></div></a></li>
<li class="helptext"><a href="<? echo Menu::getHyperlinkById();?>"><?echo Menu::getHyperlinkTextById();?></a>
<div class="helptext-main"><?echo getContentByLabel("helptext4");?></div><div class="helptext-but"><a href="<?echo Menu::getHyperlinkById();?>">zisti viac >></div></a></li>
</ul>

don jebot · Napísal **don jebot**: 22.04.2014 8:39

$("helptext").hover( .... $("[background=red].[/background]helptext")

este si otvor konzolu a hladaj chyby mas tam este jednu ...

podla mna je to presne to co potrebujes vid priklad http://www.menucool.com/tooltip/javascript-tooltip

Mego · Napísal autor témy **Mego**: 22.04.2014 8:44

ee, tooltip je niečo iné... už viem, ako by som to opísal...

Keď klikneš na start vo Windowse a ideš povedzme na ovládacie panely, tak ti vyskočí vedľa toho submenu... tak niečo na ten štýl...

// Spojený príspevok 22 Apr 2014, 08:49

Potrebujem toto... je tu kus PSDčka... toto biele, kde je napísané- hlavné je byť spojený, toto potrebujem, aby sa zobrazilo iba vtedy, keď bude týpek myšou na tom ľavom odkaze. Čiže ak ukážem myšou na "Potrubné rozvody", vyskočí mi to biele okienko s nápisom čítať viac a "Hlavné je byť spojený"... vôbec neviem ako na to... tie odkazy vľavo sú riešené cez ul li, pričom li majú triedu helptext . Ten nápis v bielom priehľadnom pozadí je class helptext-main

http://imgupload.sk/viewer.php?file=gz9j3vtu7hj11zoa71ob.png

don jebot · Napísal **don jebot**: 22.04.2014 9:37

neviem ci zrovna najzoptimalizovanejsie ale minimalne si oprav chyby v syntaxe
.
.
.
$(this).find('helptext-main').show();
.
.

Mego · Napísal autor témy **Mego**: 22.04.2014 9:45

Kolega mi pomohol, zrobil niečo také
$(document).ready(function() {
$(".helptext").bind('mouseover',function(event){
$(this).find(".helptext-main,.helptext-but").stop(true,true).fadeIn(100);
}).bind('mouseleave', function(event){
$(this).find(".helptext-main, helptext-but").stop(true,true).fadeOut(100);
});
});

Ako prinútiť jeden div, aby sa ovládal cez druhý div

Podobné témy