Notifikationer

Markér alle som læst Log ud

Slettet bruger

19. april 2006 - 20:51 Der er 18 kommentarer og
2 løsninger

Placering af div på side

Hej. JEg har et problem med placeringen af en pil et bestemt sted på min side.

Det er sådan at jeg skal have placeret en pil og noget tekst (altsammen inde i en div) relativt til et billede.

Dvs. den skal placeres lige under billedet og x pixels fra billedets venstre kant, hvor x er et tal der hentes fra databasen.

På nogle billeder er der flere uafhængige pile.

Min side ser p.t. således ud:
http://www.bingetravels.dk/show.php?picture=cam_47/DSCF0441.JPG

1. problem
I IE og Firefox får jeg forskellige værdier for offsetLeft og offsetHeight mm. for billedet.

2. problem
Det lader til at funktionen køres igennem før billedet er færdigt med at loade(tror jeg). Pilene bliver ihvertfald i første omgang placeret helt forkert, men hvis man reloader, sidder de pludselig mere rigtigt.

Al koden står på siden i source.
PHP-delen er vel ikke interessant.

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:00 #1

1. problem
- checker den lige :P

[ 2. problem ]
[ Det lader til at funktionen køres igennem før billedet er færdigt med at loade(tror jeg) ]
- Jeps :
window.setTimeout('posimg()', 5000);
skiftes til:
window.onload=function(){posimg();}

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:04 #2

offsetWidth mv er IE only

var x,y;
var test1 = document.body.scrollHeight;
var test2 = document.body.offsetHeight
if (test1 > test2) // all but Explorer Mac
{
x = document.body.scrollWidth;
y = document.body.scrollHeight;
}
else // Explorer Mac;
//would also work in Explorer 6 Strict, Mozilla and Safari
{
x = document.body.offsetWidth;
y = document.body.offsetHeight;
}

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:06 #3

læs mere her:
http://www.quirksmode.org/js/findpos.html

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:07 #4

sludder og vrøvl ---> offsetWidth mv er IE only *sorry*

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:17 #5

og problem nr 1
ind i css:
html,body{margin:5px;padding:0px;}

samt dette script istedet:

... og offsetWidth virker også i FF ;)

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:18 #6

skal lige lidt mere til for at løse 1'eren :P

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:20 #7

sludder nej, det er rigtig nok :P
i scriptet jeg kigger på står der offseLeft ... doh :/
... undskyld

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:25 #8

qpq-mads >> hvis du indsætter følgende i dit globale javascript

function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}

function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}

Så har du muligheden for at hente positionen korrekt således:
oImage = document.getElementById('billedet')
alert( findPosX(oImage) )
alert( findPosY(oImage) )

Synes godt om

Slettet bruger

19. april 2006 - 21:42 #9

Tak for hjælpen med 2'eren. Det ser ud til at virke perfekt nu.

Jeg mangler bare at få placeret pilen under billedet hvis jeg bruger horsmarks ide. Det kræver bare at jeg finder billedets højde. Hvor finder jeg den?

Ellers må i meget gerne smide nogle svar. Tak for den hurtige respons!

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:49 #10

noget ala dette:
var myImage = New Image()
myImage.src = document.getElementById('billedet').src
alert(myImage.height)

Synes godt om

horsmark Nybegynder

19. april 2006 - 21:49 #11

finobambino

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:49 #12

her er alert sat på billedets højde og bredde samt samlet offset til top og left

<script type="text/javascript">

function posimg(){
otd=document.getElementById("billedet");
objX=parseInt(otd.offsetLeft);

alert(otd.offsetWidth+"billedets bredde");

while(otd=otd.offsetParent)objX+=parseInt(otd.offsetLeft);
return objX;
}

function posimgY(){
otd=document.getElementById("billedet");
objY=parseInt(otd.offsetTop);

alert(otd.offsetHeight+"billedets højde");

while(otd=otd.offsetParent)objY+=parseInt(otd.offsetTop);
return objY;

}

function getMousePosition(event)
{
var mouseX = (typeof event.pageX == "number") ? event.pageX : event.clientX;
window.location='/show.php?picture=cam_47/DSCF0441.JPG&xpos='+(mouseX-posimg());
}

function position() {

x=posimg();
y=posimgY();

alert(y);
alert(x);

document.getElementById("pil1").style.left = (x-7+381)+"px";
document.getElementById("pil1").style.top = (y)+"px";
}

window.onload=function(){position();}

</script>

... husk css udligning af margin og padding
html,body{margin:0px;padding:0px}
body{margin:5px}

Synes godt om

mclemens Nybegynder

19. april 2006 - 21:50 #13

hov, update :D

Synes godt om

mclemens Nybegynder

19. april 2006 - 22:13 #14

takker for point :)

Synes godt om

horsmark Nybegynder

19. april 2006 - 22:14 #15

osse herfra ,-)

læg mærke til at mit øje er skudt ud... *MUARHAH*

Synes godt om

mclemens Nybegynder

19. april 2006 - 22:52 #16

prøv det her...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html

xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="123_files/std.css" media="screen"><title>BingeTravels - Fordi

alkohol gør rejsen sjovere!</title>

<style>
.abslag {
position:absolute;
z-index:3;
}
</style></head><body>

<div style="width:100%; height:100%; border-width:2px; border-style:solid; border-color:#FF7800;

background-color:#FFFFFF;"><p style=" margin-bottom:0px; margin-top:0px;

background-color:#FF7800; color:#FFFFFF; width:100%;">
© Bingetravels.dk - fordi alkohol gør rejsen sjovere
</p><table style="width:100%;" id="tabellen"><tbody><tr>
<td style="overflow: hidden; width: 100px; background-color: rgb(255, 237, 221); font-size:

10px; vertical-align: top;">kommentarer:<br>
<span style="visibility: visible; font-size: 12px;" id="comments">
<strong>Mads T:</strong>Det er da helt vildt!<br><strong>Mads T:</strong>kæft hvor er vi bare

grimme!</span></td>
<td rowspan="5" id="imgcont"><img src="123_files/show_pic.jpg" id="billedet" alt="billede"

style="position:relative;top:0px;left:0px;"><div id="pilnul"> </div><div id="pil1"

class="abslag" style="width: 200px; text-align: left; left: 0px;top:0px;"><img

src="123_files/red_arrow.gif" alt="" border="0" height="16" width="16"><a

href="http://www.bingetravels.dk/profile.php?id=51">Mads T</a></div>
</td>

</tr><tr>

<td style="overflow: hidden; width: 100px; height: 35px; background-color: rgb(255, 237,

221); font-size: 10px; vertical-align: top;">
vurdering: 3/5<br>
visninger: 64<br>
</td>
</tr>
<tr>
<td style="overflow: hidden; width: 100px; background-color: rgb(255, 237, 221); height:

40px; font-size: 10px; text-align: center;">Du skal være logget ind for at placere dig.</td>
</tr>
<tr>
<td style="overflow: hidden; width: 100px; background-color: rgb(255, 237, 221); font-size:

10px; height: 40px; text-align: center; vertical-align: top;">Du skal være logget ind for at

vurdere</td>
</tr>
<tr>
<td style="overflow: hidden; width: 100px; height: 150px; background-color: rgb(255, 237,

221); font-size: 10px; vertical-align: top;">Du skal være logget ind for at kunne skrive en

kommentar til billedet.</td>
</tr></tbody></table>

<script type="text/javascript">

function getMousePosition(event)
{
var mouseX = (typeof event.pageX == "number") ? event.pageX : event.clientX;
window.location='/show.php?picture=cam_47/DSCF0441.JPG&xpos='+(mouseX-posimg());
}

function position() {

alert(document.getElementById("tabellen").offsetWidth);
document.getElementById("imgcont").width=document.getElementById("tabellen").offsetWidth-100;
imghold=document.getElementById("imgcont");

img=document.getElementById("billedet");
imgofl=(imghold.offsetWidth-img.offsetWidth)/2;
imgoft=(imghold.offsetHeight-img.offsetHeight)/2;
alert(imgofl);
alert(imgoft);
img.style.left=imgofl+"px";
img.style.top=imgoft+"px";

document.getElementById("pil1").style.left =545+imgofl+"px";
document.getElementById("pil1").style.top =499+imgoft+"px";
}

window.onload=function(){position();}

</script>
</div>
</body></html>

Synes godt om

mclemens Nybegynder

19. april 2006 - 22:52 #17

/* CSS Document */

html{margin:0px;padding:0px}
body{margin:5px;padding:0px}

span, div, tr, p, body {

font-family:Arial, Helvetica, sans-serif;
font-size:12px;

}

span.y_smallheader {

color:#FFFF00;
font-weight:bold;
font-size:12px;

}

span#eventtitle {
font-size:16px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
display:block;

}

span#eventdescription {

}

img {
border-width:0px;
}

Synes godt om

mclemens Nybegynder

19. april 2006 - 22:52 #18

kunne ikke lade være :P

Synes godt om

mclemens Nybegynder

19. april 2006 - 22:54 #19

hov, ombrudt (har ikke betydning for funktionen)
- og et par alerts skal fjernes...

Synes godt om

mclemens Nybegynder

19. april 2006 - 23:09 #20

hov, pilen blev forkert placeret :P (*lol*)

... det var bedre :)

<script type="text/javascript">

function getMousePosition(event)
{
var mouseX = (typeof event.pageX == "number") ? event.pageX : event.clientX;
window.location='/show.php?picture=cam_47/DSCF0441.JPG&xpos='+(mouseX-posimg());
}

function position() {

imghold=document.getElementById("imgcont");

img=document.getElementById("billedet");
imgofl=(imghold.offsetWidth-img.offsetWidth)/2;
imgoft=(imghold.offsetHeight-img.offsetHeight)/2;
img.style.left=imgofl+"px";

document.getElementById("pil1").style.left =470+imgofl+"px";
document.getElementById("pil1").style.top =517+imgoft+"px";
}

window.onload=function(){position();}

</script>

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	03/05/202613:59
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