CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

q^bone Nybegynder

24. juli 2008 - 19:11 Der er 24 kommentarer og
1 løsning

div tooltip ved mouseover

Hej experter.
Jeg har søgt lidt rundt herinde for at finde et script som kan vise et tooltip ved mouseover på et tekst link eller billede.
Jeg fandt roenvigs script http://www.eksperten.dk/spm/631144 og det virker også udemærket.
Problemet jeg har er bare at den ikke sætter style.left og style.right ordentligt i firefox.

<script type="text/javascript">
var Ymouse = Xmouse = 0;
var ns6 = (document.getElementById && !document.all)?true:false;
var d = (ns6)?window:document;
d.onmousemove = getMousePos;

function getMousePos(evnt) {
Ymouse = (ns6)?evnt.pageY:event.y;
Xmouse = (ns6)?evnt.pageX:event.x;
}

function show(elm){
if(document.getElementById){
document.getElementById(elm).style.visibility = 'visible';
}else if(document.all){
document.all[elm].style.visibility = 'visible';
}
var inf = (ns6)?document.getElementById(elm):document.all[elm];
inf.style.left = Xmouse + 15;
inf.style.top = Ymouse;
}

function hide(elm){
if(document.getElementById){
document.getElementById(elm).style.visibility = 'hidden';
}else if(document.all){
document.all[elm].style.visibility = 'hidden';
}
}

</script>

Pft.

Synes godt om

q^bone Nybegynder

24. juli 2008 - 19:14 #1

Problemet jeg har er bare at den ikke sætter style.left og style.right ordentligt i firefox.

Der skulle selvfølgelig stå style.left og style.top

Synes godt om

w13 Novice

24. juli 2008 - 19:19 #2

Det er fordi du skal huske at sætte "px" bagpå left og top:

inf.style.left = Xmouse + 15 + "px;
inf.style.top = Ymouse + "px";

Synes godt om

olebole Juniormester

24. juli 2008 - 19:26 #3

<ole>

Det er jo et tussegammelt script (fra min 50 års fødselsdag - hrmpf!), så her er en lidt opdateret version:

<script type="text/javascript">
var Ymouse = Xmouse = 0;
var d = document;
d.onmousemove = getMousePos;

function getMousePos(evnt) {
Ymouse = (evnt)?evnt.pageY:event.y;
Xmouse = (evnt)?evnt.pageX:event.x;
}

function show(elm){
var inf = document.getElementById(elm);
inf.style.visibility = 'visible';
inf.style.left = (Xmouse + 15) + "px";
inf.style.top = Ymouse + "px";
}

function hide(elm){
document.getElementById(elm).style.visibility = 'hidden';
}
</script>

- men w13's svar er helt korrekt ;o)

/mvh
</bole>

Synes godt om

olebole Juniormester

24. juli 2008 - 19:28 #4

- og så kan man vel ligeså godt udnytte variablen 'd' fuldtud:

<script type="text/javascript">
var Ymouse = Xmouse = 0;
var d = document;
d.onmousemove = getMousePos;

function getMousePos(evnt) {
Ymouse = (evnt)?evnt.pageY:event.y;
Xmouse = (evnt)?evnt.pageX:event.x;
}

function show(elm){
var inf = d.getElementById(elm);
inf.style.visibility = 'visible';
inf.style.left = (Xmouse + 15) + "px";
inf.style.top = Ymouse + "px";
}

function hide(elm){
d.getElementById(elm).style.visibility = 'hidden';
}
</script>

Synes godt om

olebole Juniormester

24. juli 2008 - 19:35 #5

- og dette er nok endnu mere 'sexy':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tooltip{position:absolute;top:0;left:0;display:none;border:1px solid black;padding:3px;background:#DCE7E0;font-family:verdana;font-size:8px;z-index:1000}
</style>
</head>
<body>
<script type="text/javascript">
var d = document;

function show(elm, evnt){
var inf = d.getElementById(elm);
inf.style.display = "block";
inf.style.left = ((evnt.pageX?evnt.pageX:evnt.x) + 15) + "px";
inf.style.top = evnt.pageY?evnt.pageY:evnt.y + "px";
}

function hide(elm){
d.getElementById(elm).style.display = "none";
}
</script>

<p><a href="#" id="link" onmouseout="hide('info',event);" onmouseover="show('info',event);">Hej</a></p>

<p style="position:absolute;left:600px;top:300px"><a href="#" id="link2" onmouseout="hide('info',event);" onmouseover="show('info',event);">Hej</a></p>

<div id="info" class="tooltip">Hej med dig,<br> - skal vi have en lille sludder?</div>

</body>
</html>

Synes godt om

olebole Juniormester

24. juli 2008 - 19:40 #6

- og endnu lidt reduktion:

function show(elm, evnt){
var css = d.getElementById(elm).style;
css.display = "block";
css.left = ((evnt.pageX?evnt.pageX:evnt.x) + 15) + "px";
css.top = evnt.pageY?evnt.pageY:evnt.y + "px";
}

Synes godt om

no_doubt Nybegynder

24. juli 2008 - 21:27 #7

Ole, kigger du forbi: http://www.eksperten.dk/spm/839372 når du er færdig

Synes godt om

q^bone Nybegynder

25. juli 2008 - 01:13 #8

Nu har jeg rodet med det nogle timer og jeg kan stadig ikke få den til at virke ordentligt i Firefox :(
http://www.qbone.biz/kk1200/index.php

Synes godt om

mclemens Nybegynder

25. juli 2008 - 02:01 #9

For at IE virker - hvis man har scrollet lidt ned
- skal vi nok lige tilføje en måling på scrolltop ...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.tooltip{position:absolute;top:0;left:0;display:none;border:1px solid black;padding:3px;background:#DCE7E0;font-family:verdana;font-size:8px;z-index:1000}
</style>
</head>
<body>
<script type="text/javascript">
var d = document;

var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;

function show(elm, evnt){
var inf = d.getElementById(elm);

dmcst=dmcsl=0;
if(IE){
dmcst=(dmcst=d.documentElement.scrollTop)?dmcst:d.body.scrollTop;
dmcsl=(dmcsl=d.documentElement.scrollLeft)?dmcsl:d.body.scrollLeft;
}

inf.style.display = "block";
inf.style.left = ((evnt.pageX?evnt.pageX:evnt.x) +dmcsl +15) + "px";
inf.style.top = evnt.pageY?evnt.pageY:evnt.y +dmcst+"px";
}

function hide(elm){
d.getElementById(elm).style.display = "none";
}
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p><a href="#" id="link" onmouseout="hide('info',event);" onmouseover="show('info',event);">Hej</a></p>

<p style="position:absolute;left:600px;top:700px"><a href="#" id="link2" onmouseout="hide('info',event);" onmouseover="show('info',event);">Hej</a></p>

<div id="info" class="tooltip">Hej med dig,<br> - skal vi have en lille sludder?</div>

</body>
</html>

...

if(IE){
dmcst=(dmcst=d.documentElement.scrollTop)?dmcst:d.body.scrollTop;
dmcsl=(dmcsl=d.documentElement.scrollLeft)?dmcsl:d.body.scrollLeft;
}

kan skrives som

if(IE){
dmcst=d.documentElement.scrollTop;
dmcsl=d.documentElement.scrollLeft;
}

- hvis man er sikker på ikke at køre med IE i quirksmode

Synes godt om

mclemens Nybegynder

25. juli 2008 - 02:14 #10

M.h.t. FF problemet så hjælper det at sætte en parentes her:
... ved Olebole's test fil ... ligesom det med måling på scrolltop
også hjalp i den fil, men det hjælper vist ikke på din side med
parentesen og det med scrolltop ser ikke ud til at være nødvendigt, hmm...

inf.style.top = evnt.pageY?evnt.pageY:evnt.y + "px";
->
inf.style.top = (evnt.pageY?evnt.pageY:evnt.y) + "px";

Synes godt om

mclemens Nybegynder

25. juli 2008 - 02:34 #11

Css rettelse:

div#siteContainer {margin: 170px auto 0 auto;width:900px;background: #FFFFFF;border-left: 3px #666666 solid;border-right: 3px #666666 solid;}

(position absolute fjernet - lavede koks i placeringen i forhold til top placering af tip)

...

Slet position:relative her:
<div id="latestTagwallReplies" style="display: block; positiona: relative;">

(laver også koks i placeringen)

...

ret

function show(elm, evnt){
var inf = d.getElementById(elm);
inf.style.display = "block";
inf.style.left = ((evnt.pageX?evnt.pageX:evnt.x) + 15) + "px";
inf.style.top = evnt.pageY?evnt.pageY:evnt.y + "px";
}

til

var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;

function show(elm, evnt){
var inf = d.getElementById(elm);

dmcst=dmcsl=0;
if(IE){
dmcst=(dmcst=d.documentElement.scrollTop)?dmcst:d.body.scrollTop;
dmcsl=(dmcsl=d.documentElement.scrollLeft)?dmcsl:d.body.scrollLeft;
}

inf.style.display = "block";
inf.style.left = ((evnt.pageX?evnt.pageX:evnt.x) +dmcsl +15) + "px";
inf.style.top = (evnt.pageY?evnt.pageY:evnt.y +dmcst)+"px";
}

(for at få de rigtige scroll værdier sat på i IE når man scroller ned samt parentesen så FF virker)
...

Det var åbenbart den position:absolute; og relative; der lige
gjorde at rettelsen af scriptet ikke så ud til at være nødvendig.

Synes godt om

q^bone Nybegynder

25. juli 2008 - 03:45 #12

Det virker perfekt mht. tooltips.
Nu er mit problem dog blevet et andet efter fjernelsen af mine positions.
I IE ser jeg siden rigtig, med min div#siteContainer med hvid baggrund som strækker sig med indholdet.
Men igen er FF problemet :(

Jeg skal nok give lidt ekstra point for det al den ballade her :)

Synes godt om

mclemens Nybegynder

25. juli 2008 - 16:39 #13

Et par muligheder for løsning på problemet:

1)
<div id="siteContainer">
...
</div>

->

<div id="siteContainer"><div id="siteContainer2">
...
</div></div>

og så

div#siteContainer {
z-index:-1;
width: 900px;
display: block;
background: #FFFFFF;
border-left: 3px #666666 solid;
border-right: 3px #666666 solid;
}

->

div#siteContainer {
width: 900px;
border-left: 3px #666666 solid;
border-right: 3px #666666 solid;
}

div#siteContainer2 {
width: 900px;float:left;
background: #FFFFFF;
}

... Denne løsning kræver det ekstra element indvendig der er float left.
(nogle vil nog forsøge med float left på det første element - det træder
også fint igennem, men der skal så noget margin left til ... og så løber
man ind i IE6's double margin bug som sker på left floatede elementer med
left margin (eller right floatet med right margin)

Synes godt om

mclemens Nybegynder

25. juli 2008 - 16:47 #14

2) Alternativt til ovenstående kan du indsætte dette "clear" element:

...
</div>
<div style="clear:both;height:0;overflow:hidden;"> </div>
</div>
</div>
</body></html>

Synes godt om

w13 Novice

25. juli 2008 - 18:15 #15

mclemens>> Behøves height:0;overflow:hidden; ?

Synes godt om

mclemens Nybegynder

25. juli 2008 - 18:51 #16

w13>> Ja, ellers vises der en minimum højde på størrelse med din font-size.
- Skriver du ikke   i tagget vil det ikke reservere plads i FF, men
det gør stadig i IE ... og du vil så kunne opleve forskel i visningen
mellem henholdsvis FF og IE7 / IE6. (mener ikke at IE6 skriver teksten
"Ja, ..." I nedenstående under samme baggrundsfarve som elementet id="bug"
- hvis det er rigtigt vil man opleve forskel mellem ie6 og ie7 også, da IE7 gør)

<div id="bug" style="background:#f00;">a<div style="clear:both;"></div></div>Ja, ...
(Ovenstående er testet i IE7 under standard compliance mode)

Og skriver du  , ja så fylder det i begge browsere - derfor height og overflow.

Synes godt om

w13 Novice

25. juli 2008 - 18:54 #17

Nå ok. Nu har jeg heller ikke læst resten af indlæggene her.

Men når jeg bruger clear:both på en div for at "redde" designet i en eller flere browsere, behøver jeg kun:

<div style="clear:both"></div>

Synes godt om

mclemens Nybegynder

25. juli 2008 - 19:11 #18

Ja man behøves kun, men det påvirker designet. - Hvis man vil
cleare uden at risikere påvirkning behøves height og overflow.

I de fleste tilfælde vil du som nævnt få et ekstra
mellemrum i bunden, i nogle tilfælde vil det være en
ønskelig ting, i andre tilfælde ikke. Ulempen er dog
at man med <div style="clear:both"></div> kan få et
mellemrum i IE uden at få et i FF, men om man behøver hænge
sig i den del, afhænger af ens krav til design crossbrowser ...
( ... og måske hvor meget man hænger sig i px til tider ;) )

Ved spørgers tilfælde giver
<div style="clear:both;"></div>
et mellemrum i bunden i IE, men ikke FF.

Hvis spørger bruger
<div style="clear:both;"> </div>
vil han få et mellemrum i både IE og FF.

Synes godt om

w13 Novice

25. juli 2008 - 19:15 #19

Ja, ok, men jeg mener også, at når jeg har brugt den, har den fået det til at se helt ens ud i de forskellige browsere. Men det er så også som regel i temmelig simple designs.

Synes godt om

q^bone Nybegynder

26. juli 2008 - 00:42 #20

mclemens, du har reddet mig, det hele virker perfekt nu :)
Tusind tak for hjælpen.
Smid et svar, så får du de velfortjente point.

Jeg er ikke sikker på hvordan reglerne er herinde omkring point givning, men send mig en mail på mads (dot) henriksen (at) gmail (dot) com hvis du synes du skal have flere point end de 15 her :)

Synes godt om

mclemens Nybegynder

26. juli 2008 - 01:00 #21

Jeg er helt tilfreds med de 15 point ;)

Synes godt om

q^bone Nybegynder

26. juli 2008 - 01:10 #22

Jeg takker mange gange :)

Synes godt om

mclemens Nybegynder

26. juli 2008 - 01:41 #23

Velbekom, tak for point, og god weekend :)

Synes godt om

roenving Novice

27. juli 2008 - 14:11 #24

-- du kan sagtens lægge flere point i puljen, så længe spørgsmålet er åbent, men du må ikke afsætte over 200 point ved at lave et nyt spørgsmål -- men gerne forøge, så der tilsammen gives 200 point med et nyt spørgsmål ...

-- i et åbent spørgsmål (ikke har et accepteret svar !-) finder du "Afsæt flere point" under "Funktioner" oppe til venstre !o]

Synes godt om

q^bone Nybegynder

28. juli 2008 - 01:13 #25

Aah, den havde jeg ikke lige set, den menu var foldet sammen hos mig :-/ Ah well.. nu ved jeg det til en anden gang :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS