Notifikationer

Markér alle som læst Log ud

-thomas- Nybegynder

27. november 2003 - 21:11 Der er 19 kommentarer og
1 løsning

Dhtml vis/skjul tekst

Jeg har lavet følgende eksempel:

<a href="" onmouseover="document.getElementById('boxelement').style.visibility='visible'" onmouseout="document.getElementById('boxelement').style.visibility='hidden'">Link</a>

<div id="boxelement">Tekst</div>

og

<style>
#boxelement
{
position:absolute;
top:20px;
left:950px;
visibility:hidden;
}
</style>

Hvordan gør jeg sådan, at div-elementet altid placerer sig lige under "Link" uanset om der står noget i forvejen eller ej? Altså læser "Link"'s position og placerer sig i forhold til det istedet for at placere sig absolut på skærmen?

Synes godt om

gil-galad Nybegynder

27. november 2003 - 21:14 #1

ved at fjerne position:absolute; ;-)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#boxelement
{
top:20px;
left:950px;
visibility:hidden;
}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<a href="" onmouseover="document.getElementById('boxelement').style.visibility='visible'" onmouseout="document.getElementById('boxelement').style.visibility='hidden'">Link</a>

<div id="boxelement">Tekst</div>
</body>
</html>

Synes godt om

gil-galad Nybegynder

27. november 2003 - 21:15 #2

var et svar

Synes godt om

gil-galad Nybegynder

27. november 2003 - 21:15 #3

hmmm måske ikke helt alligevel.....

Synes godt om

-thomas- Nybegynder

27. november 2003 - 21:19 #4

Hmmm.. hvad skulle det løse? Problemet er jo, at linket kan være placeret hvor som helst på skærmen, så den er nødt til at læse, hvor det er placeret for at kunne placere div-elementet.

Synes godt om

gil-galad Nybegynder

27. november 2003 - 21:22 #5

Kommentar: spiffsen
27/11-2003 21:15:58

jaja... ;-)

Synes godt om

-thomas- Nybegynder

27. november 2003 - 21:23 #6

Undskyld, glemte lige at opdatere før jeg submittede :-)

Synes godt om

grunken Nybegynder

27. november 2003 - 21:55 #7

hvis du stryger top,left,og position så burde du da opnå det ønskede ik ?

Synes godt om

grunken Nybegynder

27. november 2003 - 21:58 #8

men hvis det ikke er det du ønsker, så burde det omtrent sådan ud ;)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#boxelement
{
top:20px;
left:950px;
visibility:hidden;
}
</style>

<script type="text/javascript">
function vis(t,l,h){
e= document.getElementById('boxelement')
e.style.top = (t+h)+"px"
e.style.left = l+"px"
e.style.visibility = (e.style.visibility=="visible")?"hidden":"visible"
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onclick="vis(this.offsetTop,this.offsetLeft,this.offsetHeight);">Kliks</a>
<div id="boxelement">Tekst</div>
</body>
</html>

men det virker nu som ren overkill ;D

Synes godt om

-thomas- Nybegynder

27. november 2003 - 22:14 #9

Ja, det er et skridt i den rigtige retning, men stadig ikke helt, hvad jeg leder efter:

Hvis jeg placerer elementet med aboslute og pixels, kan jeg placere det oven på en eksisterende tekst - det kan jeg ikke med dit script.

Kan man evt. ændre det, så offsetTop, Left og Height bliver brugt i stylesheetet, så det virker på samme måde som med absolute? Eller en anden løsning?

Det jeg godt kunne tænke mig i nedenstående eksempel er, at elementet bliver vist oveni "bla bla bla" og ikke nedenunder:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#boxelement
{
top:20px;
left:950px;
visibility:hidden;
}
</style>

<script type="text/javascript">
function vis(t,l,h){
e= document.getElementById('boxelement')
e.style.top = (t+h)+"px"
e.style.left = l+"px"
e.style.visibility = (e.style.visibility=="visible")?"hidden":"visible"
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
   <a href="#" onmouseover="vis(this.offsetTop,this.offsetLeft,this.offsetHeight);">Kliks</a>
<br>bla bla bla<div id="boxelement">Tekst</div>
</body>
</html>

Synes godt om

grunken Nybegynder

27. november 2003 - 22:20 #10

ehmm ;D

nu har du jo osse fjernet position:absolute; fra din style ;)

Synes godt om

grunken Nybegynder

27. november 2003 - 22:21 #11

som jeg osse havde sorry ;D

Synes godt om

grunken Nybegynder

27. november 2003 - 22:21 #12

altså dit style skal se ud som følger

<style>
#boxelement
{
position:absolute;
top:20px;
left:950px;
visibility:hidden;
}
</style>

Synes godt om

-thomas- Nybegynder

27. november 2003 - 22:31 #13

Hmmm... ja, det var selvfølgelig det!! Mange tak for hjælpen - du får dine velfortjente point :-)

(håber det er ok, spiffsen?)

Det er vel ikke overkill, hvis det ikke kan gøres enklere?

Synes godt om

-thomas- Nybegynder

27. november 2003 - 22:32 #14

Læg lige et svar forresten...

Synes godt om

grunken Nybegynder

27. november 2003 - 22:38 #15

Nej så er det ikke overkill, når det skal fungere på den måde ;)

men det var ikke helt det jeg havde fattet fra starten ;D

(jeg kan nu regne ud at du er ved at kreere en form for menu)

Synes godt om

-thomas- Nybegynder

27. november 2003 - 22:43 #16

Ja, vil lave det sådan, at når man holder musen over et ikon kommer en lille søgeformular nedenunder, men kunne ikke lige hitte ud af det selv. Tak.

Synes godt om

-thomas- Nybegynder

27. november 2003 - 23:13 #17

Hvis man putter linket ind i en tabel, måler den offsetTop osv. til tabellens kant istedet for til sidens kant - kan man gøre noget ved det?

Synes godt om

-thomas- Nybegynder

28. november 2003 - 10:33 #18

http://www.eksperten.dk/spm/433437

Synes godt om

grunken Nybegynder

28. november 2003 - 17:09 #19

hejsa Thomas, har ikke altid lige tid til at være der hele tiden, men problematiken har lige skrevet en hurtig omskrivning af scriptet ;)

nedenstående burde fungere ;)

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
#boxelement
{
position:absolute;
top:20px;
left:950px;
visibility:hidden;
}
</style>

<script type="text/javascript">

function vis(obj){
var pos = {x:0,y:0};
var hoj = obj.offsetHeight;

while (obj) {
pos.x += parseInt( obj.offsetLeft, 10 );
pos.y += parseInt( obj.offsetTop, 10 );
obj = obj.offsetParent;
}
e = document.getElementById('boxelement')
e.style.top = (pos.y + hoj)+"px";
e.style.left = pos.x+"px"
e.style.visibility = (e.style.visibility=="visible")?"hidden":"visible"
}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table>
<tr>
<td>
<a href="#" id="link" onclick="vis(this);">Kliks</a>
<br>dshlshgflkshdglkjhslgfd
<td>
</tr>
</table>
<div id="boxelement">Tekst</div>
</body>
</html>

Synes godt om

-thomas- Nybegynder

28. november 2003 - 17:23 #20

Præcis hvad jeg skulle bruge!! Jeg tester det lige igennem lidt grundigere... Men mange tak for hjælpen.
Læg et svar i http://www.eksperten.dk/spm/433437 så får du point.

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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	I dag 10:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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