Vytvoreni divu pres JS => IE neaplikuje CSS – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Vytvoreni divu pres JS => IE neaplikuje CSS – JavaScript, AJAX, jQuery – Fórum – Programujte.comVytvoreni divu pres JS => IE neaplikuje CSS – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
D-Fox0
Stálý člen
15. 6. 2008   #1
-
0
-

Mam skript na zobrazeni pohyblive bublinove napovedy pres JS.
Vse uz jakz takz funguje jen s jednou drobnosti:

bublinove menu je reseno tradicne pres absolutni pozici divu. Div si vytvarim JavaScriptem na onload stranky.
vyvorim ho pomoci "createElement" a priradim mu classu pomoci "setAttribute". Jenze na takto vytvoreny div se aplikuje css jen u Opery a Mozilly... IE funguje jen kdyz ten div nevytvarim pomoci JS ale hodim ho na tvrdo do html.

Potom bych mel jeste otazku jestli lze nejak vypnout standartni zobrazovani tooltipu v prohlizeci (po najeti kurzoru na element s nejakym title a kratkym setrvanim kurzoru.....)

A jeste kod:

JavaScript

// JavaScript Document


window.onload = function(){
init();
}

/**
* Div Init
*/
function init(){
bubble = document.createElement("div");
document.getElementsByTagName("body").item(0).appendChild(bubble);
bubble.setAttribute("id", "bublina");
bubble.setAttribute("class", "buble");
}

/**
* Mouse X-position
* @param {Object} e
*/
function getMousePositionX(e){
if (document.all) {
curX = event.clientX;
}
if (document.layers) {
curX = e.pageX;
}
if (document.getElementById) {
curX = e.clientX;
}
return curX;
}

/**
* Mouse Y-position
* @param {Object} e
*/
function getMousePositionY(e){
if (document.all) {
curY = event.clientY;
}
if (document.layers) {
curY = e.pageY;
}
if (document.getElementById) {
curY = e.clientY;
}
return curY;
}

function over(tooltip){
show(tooltip);
}

function out(){
hide();
}

function move(e, tooltip){
curX = getMousePositionX(e);
curY = getMousePositionY(e);
element = document.getElementById('bublina');
element.style.top = curY + 15 + document.body.scrollTop + 'px';
element.style.left = curX + 12 + document.body.scrollLeft + 'px';
show(tooltip);
}

function show(tooltip){
element = document.getElementById('bublina');
element.style.display = "block";
element.innerHTML = tooltip.title;
}

function hide(){
element = document.getElementById('bublina');
element.style.display = "none";
}


xHTML
<a href="#" class="active" title="Vstup do administrace obsahu" OnMouseMove="move(event,this)" OnMouseOut="out()" OnMouseOver="over(this)">Administrace obsahu</a>

<a href="#" title="Vstup do správy uživatelů" OnMouseMove="move(event,this)" OnMouseOut="out()" OnMouseOver="over(this)">Administrace uživatelů</a>
<a href="#" title="Vstup do administrace systému" OnMouseMove="move(event,this)" OnMouseOut="out()" OnMouseOver="over(this)">Administrace systému</a>
<a href="#" title="Vstup do souborového manažeru" OnMouseMove="move(event,this)" OnMouseOut="out()" OnMouseOver="over(this)">Souborový manažer</a>


A CSSko
.buble{

display: none;
text-align: center;
position: absolute;
width: 150px;
border: 1px #494949 solid;
background-color: #EFEFEF;
font-size: 10px; color: #000000;
font-style: italic;
}

Nahlásit jako SPAM
IP: 89.176.62.–
Reklama
Reklama
Ruda
~ Anonymní uživatel
65 příspěvků
16. 6. 2008   #2
-
0
-

Ahoj,
Myslim ze problem bude zde:

bubble.setAttribute("id", "bublina"); -> Tady to bere jako hlavnio css styl ktery nemas nadefinovan
bubble.setAttribute("class", "buble"); -> prepise to id

Aplikuje se tam id a class a myslim ze ie bere jako prvni id "bublina" > ve kterem nic neni nadefinovane.. Ty to pouzivas jako id aby jsi rozpoznal element, ale v css se id bere jako hlavni :-) nebo tak nejak tudiz to pak yz nebere ten class :-).. Kdyz si udelas styl

div#bublina {
display: none;
text-align: center;
position: absolute;
width: 150px;
border: 1px #494949 solid;
background-color: #EFEFEF;
font-size: 10px; color: #000000;
font-style: italic;
}

Tak ti to uz pujde...


Nahlásit jako SPAM
IP: 88.103.125.–
Ruda
~ Anonymní uživatel
65 příspěvků
16. 6. 2008   #3
-
0
-

Co se tyka druheho dotazku.. Tak me napada nevim zda je to spravne, ale smazal bych ten titlte a hlasku bych predaval pres parametr naprik over(this, "nejaky text bubliny"); ..

Nahlásit jako SPAM
IP: 88.103.125.–
D-Fox0
Stálý člen
16. 6. 2008   #4
-
0
-

To Ruda : Dík moc, funguje... ani nevim proc sem tam puvodne tu classu pouzival. Jinak k tomu titlu sem to takle taky puvodne chtel udelat... ale pres ten atribut title mi to prijde elegantnejsi... A nejak tusim ze by to mohle bejt lepsi i pro SEO..

Nahlásit jako SPAM
IP: 89.176.62.–
Ruda
~ Anonymní uživatel
65 příspěvků
16. 6. 2008   #5
-
0
-

Pokud na to prijdes tak te prosim jestli to sem do komentare pisnes take by se mi to hodilo.. I ja se na to mrknu a kdyztak to sem take doplnim.. Dik

Nahlásit jako SPAM
IP: 213.195.228.–
Prog.0
Věrný člen
16. 6. 2008   #6
-
0
-
Nahlásit jako SPAM
IP: 213.160.186.–
Prog.
Ruda
~ Anonymní uživatel
65 příspěvků
16. 6. 2008   #7
-
0
-

To Prog. : Nejak tomu nerozumim? goNextElement() -> mi preskoci na tridu stylu buble? Jinak goNextElement() mi nefunguje.. dik

Nahlásit jako SPAM
IP: 213.195.228.–
Ruda
~ Anonymní uživatel
65 příspěvků
16. 6. 2008   #8
-
0
-

Jinak me napadlo jeste jedno reseni udelat to takhle:
CSS



.buble_hidden{
display: none;
}

.buble_show {
text-align: center;
position: absolute;
width: 150px;
border: 1px #494949 solid;
background-color: #EFEFEF;
font-size: 10px; color: #000000;
font-style: italic;
}


No a pak volat pri show styl blbue_show a pri schovani zas buble_hidden..

Nahlásit jako SPAM
IP: 213.195.228.–
Prog.0
Věrný člen
16. 6. 2008   #9
-
0
-

To Ruda :

Ten atribut nie je "class" ale "className". To som tým linkom chcel ukázať. Do html sa zapisuje "class" ale v DOM sa nazýva className. Takže ak tento atribút chceš zmeniť cez script, tak nepristupuješ cez .class, ale cez .className.

To že firefox/opera zožrali to setAttribute("class",...) ako D-Fox písal, je len ich šikovnosť, no nie je to dané špecifikáciou. (tá udáva className).

.EOF

Nahlásit jako SPAM
IP: 213.160.186.–
Prog.
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 15 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý