Styly vlastního ToolTipu fungují ve FF, ale ne v Chromu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Styly vlastního ToolTipu fungují ve FF, ale ne v Chromu – JavaScript, AJAX, jQuery – Fórum – Programujte.comStyly vlastního ToolTipu fungují ve FF, ale ne v Chromu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
petusek0
Duch
6. 9. 2012   #1
-
0
-

Ahoj všem,

jsem jen velmi mírně pokročilým JavaScriptérem, takže si nejsem jist, v čem je chyba, a předem se omlouvám všem, kterým je to jasné jako facka, za potenciálně pitomý dotaz.

Na stránkách zaachiho jsem našel pěkný skriptík na tvorbu vlastního tooltipu. Použil jsem ho na svých na Wordpressovských stránkách a bezvadně funguje - ale jen ve FireFoxu. Z nějakého důvodu mi to Chrome nedělá správně. Tooltip se sice objevuje a mizí, jak má, ale je transparentní (namísto poloviční opacity), o chybějících stylech nadefinovaných v CSS ani nemluvě.

Prosím, poraďte, kde chybuji. Níže uvádím použitý skript i CSS:


//div ID
var myDivId = 'ZHintDiv';
//posun v ose X
var movingX = 20; //px
//posun v ose Y
var movingY = 10; //px


//vychozi pozice
var positionX = 0;
var positionY = 0;

//vytvorime novy element typu DIV
var divElement;
divElement = document.createElement('div');
//nastavime ID 
divElement.setAttribute('id', myDivId);
//visibility:hidden
divElement.style.visibility = 'hidden';
//positin: absolute
divElement.style.position = 'absolute';
//vychozi pozice
divElement.style.left = '0px';
divElement.style.top = '0px';

//zjisteni souradnic mysi
function getMouseXY(e) {
    var browserIE = document.all?true:false
    if (!browserIE) document.captureEvents(Event.MOUSEMOVE)
    //zjisteni souradnic
    positionX = browserIE?event.clientX + document.body.scrollLeft:e.pageX;
    positionY = browserIE?event.clientY + document.body.scrollTop:e.pageY;
    //posun elementu 
    setPosition();
    return true;
}

//nastaveni pozice okna
function setPosition(){
    var windowWidth = 0;
    //zjisteni sirky okna
    if( typeof( window.innerWidth ) == 'number' ) {
        windowWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth ) {
        windowWidth = document.documentElement.clientWidth;
    } else if( document.body && document.body.clientWidth  ) {
        windowWidth = document.body.clientWidth;
    }
    //pokud je pozice za okrajem okna, nastavi se pred kurzor
    if( ( positionX +  parseInt(divElement.style.width ) + movingX + 50 ) > windowWidth ){
        positionX -= ( movingX + parseInt(divElement.style.width ) );
    }
    divElement.style.left =  ( movingX + positionX ) + 'px';
    divElement.style.top = ( movingY + positionY ) + 'px';
}


//funkce pro nastavei opacity
function setOpacity( element, alpha ){
    var el = document.getElementById(element);
    
    if( el.style.opacity != undefined ){
        el.style.opacity = alpha;
    }
    else if( el.style.MozOpacity != undefined ){ 
        el.style.MozOpacity = alpha;
    }
    else if( el.style.filter != undefined ){
        el.style.filter = "alpha(opacity=0)";
        el.filters.alpha.opacity = ( alpha * 100 );
    }
    
    return true;
}

function pulseOn(){
    for( i = 0; i <= 9; i++ ){
        setTimeout("setOpacity('" + myDivId + "'," + i/10 + ");", 25*i);
    }   
}

//TOOLTIP FUNCTION
function tooltip( str, el, width ){
    //pokud neni vytvoreny div pridany v HTML
    if( !document.getElementById(myDivId) )
        //pridame div do stranky
        document.body.appendChild(divElement);
    //nastavime pozadovanou sirku pro div
    divElement.style.width = width + 'px';
    //nastavime visibility:visible
    setOpacity(myDivId, 0 );
    divElement.style.visibility = 'visible';
    pulseOn();
    //vlozime do divu nas text
    divElement.innerHTML = str;
    //pri posunu po elementu menime pozici divu
    el.onmousemove=getMouseXY;
    //pri opusteni elementu okno schovame
    el.onmouseout = hidetip;
}

//schovani okna
function hidetip(){
    divElement.style.visibility = 'hidden';
}

Stylopis:

#ZHintDiv{
    float:left;
    border: 1px solid silver; 
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    background-color: white; 
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 11px;
    font-weight: normal;
}
Nahlásit jako SPAM
IP: 94.113.81.–
Reklama
Reklama
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, 64 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ý