[JS] Inhoud van div aanpassen - Softwareontwikkeling

dinsdag 11 november 2003 18:34

Acties:

Topicstarter

Ik ben vandaag begonnen om een soort "vervangende functie" te maken voor de tooltip. De bedoeling is dat als je over een link oid gaat dat je een bijbehorende tekst kunt bekijken. Ik heb hiervoor hetvolgende script geschreven:

code:

<html>
<head>
<title>test</title>
<style>
div
{
border-style: solid;
border-width: 1px;
background: #FFFFCC;
font-size: 12px;
font-family: Verdana;
width: auto;
display: inline;
position: absolute;
padding: 3px;
}
</style>
<script type="text/javascript">

hidden = true;

function toggle_help (e, text)
{
    var div = document.getElementById("help");
    
    // Zoek de muis positie
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)
    {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)
    {
        posx = e.clientX + document.body.scrollLeft;
        posy = e.clientY + document.body.scrollTop;
    }
        
    // Geef de div de goede tekst
    div.innerText = text;   
    
    // Zet de visibility van de div
    if (hidden)
    {
        div.style.visibility = 'visible';
        hidden = false;
    }
    else
    {
        div.style.visibility = 'hidden';
        hidden = true;
    }
    
    // Geef de div de goede positie
    div.style.top = posy;
    div.style.left = posx;
    
    return true;
}
</script>
</head>
<body>
<a href="" onMouseOver="toggle_help(event, 'help me');" onMouseOut="toggle_help(event)">link 1</a><p>
<a href="" onMouseOver="toggle_help(event, 'help opnieuw');" onMouseOut="toggle_help(event)">link 2</a><p>
<div id="help" style="visibility: hidden;">-</div>
</body>
</html>

Dit werkt perfect in IE 6.0, maar niet in Mozilla (1.5 geloof ik). Is er een vervangende mogelijkheid voor innertext?

dinsdag 11 november 2003 18:37

Acties:

crisp

Devver

Pixelated

div.innerHTML, of nog mooier: div.firstChild.nodeValue

Intentionally left blank

dinsdag 11 november 2003 18:38

Acties:

dream0r

Topicstarter

Het werkt perfect, bedankt. Maar hoe werkt die 2e optie trouwens precies ?

[ Voor 5% gewijzigd door dream0r op 11-11-2003 18:39 ]

dinsdag 11 november 2003 18:41

Acties:

crisp

Devver

Pixelated

Skizzik schreef op 11 november 2003 @ 18:38:
Het werkt perfect, bedankt. Maar hoe werkt die 2e optie trouwens precies ?

innerHTML is eigenlijk ook een IE-extentie van de DOM, maar geimplementeerd in bijna alle moderne browsers itt innerText. de firstchild.nodeValue is de echte DOM manier - de firstChild van je div is in jouw geval een textNode, en met nodeValue kan je die wijzigen.

Intentionally left blank

dinsdag 11 november 2003 23:41

Acties:

BaRF

bijna kerst

werkt goed, maar ik zou de uiteindelijke positie +15 ofzo doen, want het is irri als die text zo onder de cursor verschijnt

The space between is where you'll find me hiding, waiting for you

woensdag 12 november 2003 09:21

Acties:

Verwijderd

Even misschien ten overvloede: Je bent je bewust van de title attribuut van links, e.d.? Die genereren over het algemeen automatisch een tooltip voor je.

http://www.w3.org/TR/html4/struct/global.html#adef-title

woensdag 12 november 2003 15:51

Acties:

dream0r

Topicstarter

Verwijderd schreef op 12 november 2003 @ 09:21:
Even misschien ten overvloede: Je bent je bewust van de title attribuut van links, e.d.? Die genereren over het algemeen automatisch een tooltip voor je.

http://www.w3.org/TR/html4/struct/global.html#adef-title

Ja die ken ik