| Autor | Zpráva | ||
|---|---|---|---|
| Nadan Profil |
#1 · Zasláno: 19. 6. 2011, 18:57:19
Můj problém je zde: Mamlas.
Snažím se o zobrazení "nápovědy" při najetí na otazník. To se dá řešit buď pomocí JS, které mi při najetí na otazník zobrazí div u kurzoru, anebo pomocí CSS, který mi při najetí na otazník změní styl divu s nápovědou a zobrazí jej. U JS mám problém, že bych musel pro každý otazník na jedné stránce psát jeden unikátní styl (protože JS pracuje s ID). U CSS mám problém, že se mi div s nápovědou nezobrazí u kurzoru, ale odpluje někam pryč. Mám tři otázky: 1. Dá se nějak upravit ten JS, aby pracoval s classem? 2. Jak mám do CSS napsat, aby se ten div zobrazoval u kurzoru? 3. Dá se to vyřešit ještě nějak jinak? Stačí mi odpověď jen na jednu otázku :-) Předem díky za odpověd. |
||
| Sir Tom Profil |
#2 · Zasláno: 19. 6. 2011, 19:26:46
Nadan:
„U JS mám problém, že bych musel pro každý otazník na jedné stránce psát jeden unikátní styl (protože JS pracuje s ID).“ Udělej funkci, která se bude volat při najetí na otazník. U této fce přidej několik parametrů. Stačí ti jedna funkce, ale její vlastnosti budeš měnit parametry. Nevím, jak máš to JS vyřešený, tak uvedu jenom letmý příklad: <div onmouseover="showHelp('napoveda1',poziceX1,poziceY1)">otazník</div>
<div onmouseover="showHelp('napoveda2',poziceX2,poziceY2)">otazník</div>
function showHelp(help,posX,posY){
// kód, který se provede
} |
||
| Nadan Profil |
#3 · Zasláno: 19. 6. 2011, 19:35:45
Sir Tom:
Nechápu... |
||
| Sir Tom Profil |
#4 · Zasláno: 19. 6. 2011, 20:04:10
Nadan:
Díval jsem se na ten JS kód. Máš tam funkci, která zobrazí div s id 'help' (na který se odkazuješ přes parametr ve funkci ShowContent()). Co je na tomto systemu spatne? Nebo - je ta nápověda pouze ve formě textu? Pokud je ano, tak dej ji dej do paramatru a pak zobrazuj stale stejny div, ale prave podle tohoto parametru měň jeho obsah. Prostě - jednotlivé nápovědy musí být někde uloženy. Buď v divech nebo jako text v parametru. Stačí jenom udělat 1 funkci, která dle svého parametru zavolá tu spravnou nápovědu. |
||
| Nadan Profil |
#5 · Zasláno: 19. 6. 2011, 20:40:12
Sir Tom:
I tak ale budu potřebovat u divů ID, aby JS věděl, ke kterému má přiřazovat obsah, ne? |
||
| Sir Tom Profil |
#6 · Zasláno: 19. 6. 2011, 22:24:47
Nadan:
Pokud obsah nápovědy obsahuje něco více nežli jen text, pak ano. Pokud máš nápovědu pouze ve formě textu, tak stačí jeden div, kterému se bude měnit obsah: <div id="napoveda"></div>
Spartakus <span onmouseover="zobrazitNapovedu('Spartakus byl římský otrok, který povstal...')" onmouseout="skrytNapovedu()">?</span>
Legionář <span onmouseover="zobrazitNapovedu('Římský voják dobře oděn v silnou zbroj...')" onmouseout="skrytNapovedu()">?</span>
Hipodrom <span onmouseover="zobrazitNapovedu('Budova, ve které se konaly závody...')" onmouseout="skrytNapovedu()">?</span>
function zobrazitNapovedu(napovedaText){
document.getElementById("napoveda").innerHTML(napovedaText); //vlozi do divu napoveda obsah, ktery je napsan v parametru
//a tady bude kód, který zobrazí onen div "napoveda" (zobrazeni na zvolenych souradnicich muzes take resit pres JS (zjistis pozici kurzoru a kousek vedle toho nechas zobrazit div))
}
function skryjNapovedu(){
//skryje div "napoveda"
}Za úvahu by také stále popřemýšlet zda-li se nápověda musí zobrazovat v nějakém divu - nestačilo by klasické title=""? Tento způsob určitě není jediný a troufám si říct, že nebude jistě ani nejlepší. Doufám, ale že svůj úkol splní... |
||
| Nadan Profil |
#7 · Zasláno: 19. 6. 2011, 22:53:19
Sir Tom:
Díky, Javascriptu sice moc nerozumím, ale zkusím to skloubit dohromady... Title bych rád použil, ale je nevhodný na výraznější a delší text... |
||
| joe Profil |
#8 · Zasláno: 19. 6. 2011, 23:02:28
Nadan:
„3. Dá se to vyřešit ještě nějak jinak?“ Ano a lépe, pouze pomocí CSS. Není vhodné dávat text jako parametr funkce ([#6]), ale je lepší ho mít už v nějakém divu v HTML, jak máš teď. V CSS můžeš využít pseudotřídy :hover, při které div zobrazíš. Nepotřebuješ tedy měnit třídu pomocí JavaScriptu. |
||
| Nadan Profil |
#9 · Zasláno: 19. 6. 2011, 23:04:46
joe:
Já vím, ale ten div se mi nezobrazí u kurzoru, potřeboval bych ho nějak správně napozicovat. A to nevím jak to CSSkem dokážu... |
||
| joe Profil |
#10 · Zasláno: 19. 6. 2011, 23:13:06
Zapomněl jsem to tam připsat.
Tomu odkazu nastav position: relative; a tomu divu, co chceš zobrazovat, tak absolutní pozici - position: absolute (to už tam asi je, jak jsem se díval) a pak left: 100%; a mělo by se to zobrazovat napravo od toho otazníku. Mj. ten otazník je součástí textu? Myslím, že ne. Proč je tedy v textu? Ten bych tam dal pomocí CSS. |
||
| Nadan Profil |
#11 · Zasláno: 19. 6. 2011, 23:23:18
joe:
Jo, je to součást textu... "Blablabla blablablabla blabla blablablablablabla blabla [?]" Ne, nejde to. Ukázka - ten otazník dole. |
||
| joe Profil |
#12 · Zasláno: 19. 6. 2011, 23:26:02
Nadan:
„Jo, je to součást textu...“ To vimdím, že na tvé stránce ano, ale normálně to s tím asi nemá nic moc společného. „Ne, nejde to“ Nemáš nastavenou relativní pozici u toho odkazu |
||
| Nadan Profil |
#13 · Zasláno: 19. 6. 2011, 23:27:22
joe:
„To vimdím, že na tvé stránce ano, ale normálně to s tím asi nemá nic moc společného.“ Má. „Nemáš nastavenou relativní pozici u toho odkazu“ Mám. .info {
text-decoration: none;
color: #FF9900;
margin-left: 250px;
position: relative;
} |
||
| Medvídek Profil |
#14 · Zasláno: 19. 6. 2011, 23:34:25 · Upravil/a: Medvídek
Já to mam řešený takto: (s využitím jQuery)
$(document).ready(function() {
//NACTENI HINTU
tooltip();
});
this.tooltip = function(){
xOffset = 15;
yOffset = 25;
//PRI NAJETI NA ODKAZ S TRIDOU HELP ZOBRAZIME OKNO
$("a.help").hover(function(e){
//DO OKNA NACTEME TITULEK ODKAZU A SMAZEME HO Z ODKAZU
this.t = this.title;
this.title = "";
$("body").append("<div id='help'><p>"+ this.t +"</p></div>");
$("#help")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
},
function(){
this.title = this.t;
$("#help").remove();
});
//PRI POHYBU MYSI POSOUVAME OKNO
$("a.help").mousemove(function(e){
$("#help")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
}
a v html takto: <a class="help" title="Rodné číslo AZORA je registrační kód ve formátu XXX-XXXX-XXX, který naleznete na krabičce AZORA"><img src="img/help.png" alt="?" class="help" /></a> |
||
| joe Profil |
#15 · Zasláno: 19. 6. 2011, 23:49:30
Nadan:
Myslel jsem k tomu druhému. Takhle to sice máš u toho prvního otazníku, ale tím, že se mění ta pozice toho divu, proto se to objevuje mimo. |
||
| Nadan Profil |
#16 · Zasláno: 19. 6. 2011, 23:55:19
joe:
Však to je i u toho druhého odkazu! Je to tam přes class "info"... |
||
| joe Profil |
#17 · Zasláno: 20. 6. 2011, 00:00:03
Nadan:
Je tam, ale jen dočasně. Nejdříve si nastuduj, co ten tvůj kód dělá a pak možná budeš vědět, proč se to nechová tak, jak má. <a onmouseout="this.className='skryj'" onmouseover="this.className='ukaz'" class="info"></a> To první zvýrazněné vůbec není potřeba. |
||
| Nadan Profil |
#18 · Zasláno: 20. 6. 2011, 00:05:18
joe:
Jo, promiň. Přece jen už je půlnoc. Teď se ale ten div nějak smrsknul... |
||
| Sir Tom Profil |
#19 · Zasláno: 20. 6. 2011, 13:04:58 · Upravil/a: Sir Tom
joe:
„V CSS můžeš využít pseudotřídy :hover, při které div zobrazíš.“ Toto kdysi IE neumělo (jakože umělo, ale dokázalo to pouze u stylu textu). Nevím, jestli novější IE prohlížeče to zvládnou. :) "Není vhodné dávat text jako parametr funkce." Samozřejmě, souhlasím - proto také jsem se ptal na obsah těch nápověd. Pochopitelně, že ten obsah nemusí být jako parametr, ale může být uložen někde jinde (pole?) a parametr by byl jenom index určující nápovědu. (Myslel jsem, že je to jasné...) Medvídek: Medvídku, ty to máš řešené přes jQuery, že ano? Možná by bylo vhodné dát i odkaz, kde se dá jQuery získat a jak použít. :) |
||
|
Časová prodleva: 13 let
|
|||
0