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

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";

}

<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>

.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;

}

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...

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"); ..

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..

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

buble.className = 'buble';

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

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;

  }

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