Notifikationer

Markér alle som læst Log ud

klapiolsen Nybegynder

07. december 2005 - 10:37 Der er 7 kommentarer og
2 løsninger

find museplacering vha event.clientX og Y og og flyt en "div"

I scriptet herunder ønsker jeg at div'en skal flytte op til "test"-linierne idet man kører musen over dem, men jeg mangler vist noget. hvem kan hjælpe :)
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function plads(){
document.getElementById('coords').style.top = event.clientY;
document.getElementById('coords').style.left = event.clientX;
}
</script>
</head>
<body>
<a href="#" onMouseOver="plads()">test 1</a><br>
<a href="#" onMouseOver="plads()">test 2</a><br>
<a href="#" onMouseOver="plads()">test 3</a><br>
<div id="coords" style="absolute; left: 210px; top: 500px">hejsa</div>
</body>
</html>

ps -er der iøvrigt nogen forskel på getClientY() og event.clientX;?

Synes godt om

hr__hallandsen Nybegynder

07. december 2005 - 18:32 #1

Har lavet et eks. her:

-----------------------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
var x;
var y;
function plads(t){
document.getElementById("coords").style.left = (navigator.appName == "Netscape" && navigator.userAgent.indexOf("Opera") < 0) ? x : (event.clientX + document.body.scrollLeft);
document.getElementById("coords").style.top = (navigator.appName == "Netscape" && navigator.userAgent.indexOf("Opera") < 0) ? y : (event.clientY + document.body.scrollTop);
document.getElementById("coords").innerHTML = t;
document.getElementById("coords").style.display = "inline";
}
function skjul(){
document.getElementById("coords").style.display = "none";
}
function FN(e){
x = e.pageX;
y = e.pageY;
}
if(navigator.appName == "Netscape" && navigator.userAgent.indexOf("Opera") < 0)
document.onmousemove = FN;
</script>
</head>
<body>
<a href=# onmousemove=plads(this.innerHTML) onmouseout=skjul();>Test 1</a><br>
<a href=# onmousemove=plads(this.innerHTML) onmouseout=skjul();>Test 2</a><br>
<a href=# onmousemove=plads(this.innerHTML) onmouseout=skjul();>Test 3</a><br>
<div id="coords" style="position:absolute; border:2px black solid; display:none; padding:2px;"></div>
</body>
</html>

------------------------------------------------------------------------------

Hallandsen

PS.: Så vidt jeg ved findes der ikke nogen funktion med navnet getClientY()

Synes godt om

johan.o Nybegynder

08. december 2005 - 00:15 #2

Dette får dit eget til at virke...men ikke i IE...endnu :)

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function plads(e){
document.getElementById('coords').style.top = e.clientY+"px";
document.getElementById('coords').style.left = e.clientX+"px";
}
</script>
</head>
<body>
<a href="#" onMouseOver="plads(event)">test 1</a><br>
<a href="#" onMouseOver="plads(event)">test 2</a><br>
<a href="#" onMouseOver="plads(event)">test 3</a><br>
<div id="coords" style="position: absolute; left: 210px; top: 500px">hejsa</div>
</body>
</html>

Mvh. Johan

Synes godt om

johan.o Nybegynder

08. december 2005 - 00:16 #3

Hvad snakker jeg om :) det virker da fint !

Mvh. Johan

Synes godt om

roenving Novice

08. december 2005 - 00:47 #4

>>hr__hallandsen

-- jeg er noget forundret over din tilgang til event-handling i de forskellige browsere, da jeg nærmest har fået indtryk af, at du mener at M$IE har en korrekt event-handling, så man derfor må reparere på andres browseres fejl ...

-- derudover mener jeg, at du har en fundamental forkert tilgang til behandling af forskelle i browsernes behandling af forskellige muligheder, for man bør _aldrig_ (gentager _aldrig_ !-) benytte sig af en tilfældig tekststreng i en tilfældig egenskab/felt i et tilfældigt objekt til at beslutte, hvordan man reagerer ...

-- bare tænk på den gamle pige-vits (eller var det mest en drenge-ditto ?-): 'Drengene tror at OB er en fodboldklub' ...

-- nogle gange har man ikke andre muligheder, men det meste af den kode, jeg har set fra din hånd, var altså moderne (og rimeligt gyldig !-), dengang Netscape Navigator fandtes i v. 4.7x og Opera mere var et forsøg på end en browser ,-(

-- som johan viser i dette spørgsmål, er der med moderne browsere ikke helt samme problem med at dække sig ind, men hvis man også vil dække alle de gamle browsere, skal man jo præstere scripts på mange giga-byte, som alligevel ikke loades, de 3 gange, det overhovedet er behov for at benytte dem i en websides levetid !o]

-- hvis man så har brug for en funktionalitet, som kun bliver helt optimal med f.eks. showModal- eller ModelessDialog, må man simpelthen teste om browseren understøtter lige præcis den mulighed, for hvad havde du tænkt dig at gøre, når browser-versionen f.eks. hedder 10.01 (som vil blive afvist af de sædvanlige versionsnummertest efter 5.5+ !-)

Synes godt om

klapiolsen Nybegynder

08. december 2005 - 14:00 #5

Super -tak :) jeg kan se at begge forslag virker, men Johan.o's er noget mere enkelt, så det snupper jeg -Jeg vil gerne give point til alle for the effort, så hvis i sidste smider et par svar vil jeg dele dem mellem jer.
-et lille bispørgsmål -jeg ved hvordan document.getElementById fungerer sammen med div, men hvordan hænger onmouseover plads(event), function plads(e) og e.clientX egentlig sammen -mon en af jer har et link til et sted hvor jeg kan læse mere?

Synes godt om

johan.o Nybegynder

08. december 2005 - 15:23 #6

Jamen så ligger jeg da et svar.

Mht. dit spørgsmål :

event, i plads(event), hentyder til event objektet som indeholder alle parametre omkring denne event. F.eks. event.clientX og (FF) event.target og (IE) event.srcElement.

Ved at skrive plads() 'kalder' du funktionen plads(). Hvis du skal bruge nogle variabler eller konstanter i din funktion bliver du nød til at sende dem sammen med kaldet til funktionen. Altså plads(event) kalder funktionen plads() og sender event objektet med.

I selve funktionen kan du selv vælge hvilket variabel navn de 'ting' som du sender til funktionen skal hedde i dette tilfælde sender vi event objektet men omdøber det i starten af funktionen til e. Vi kunne også bare have skrevet function plads(event) men det er jo 5 bogstaver istedet for 1 :)

Som du nok kan se er det vigigt at du definerer lige mange variabler i definitionen af funktionen som du sender til den. F.eks. går det her i fisk plads(event) --> funktionen plads(e, tal) da jeg sender et objekt men funktionen forventer at modtage 2. Som sagt kan man sende både variabler, objekter og konstanter til funktionerne f.eks. plads(event, oTal, "Streng"); er et ok kald til function plads(e, t, s)

Håber at det også forklarer sammenhængen mellem e.clientX og event :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

08. december 2005 - 15:31 #7

Og en af fordelene ved denne opbygning er jo at hvis f.eks. flere arbejder på det samme projekt så kan man definere hvad en funktion skal returnere efter at have modtaget et bestemt sæt variabler.

F.eks. kunne man sige : Jeg skal bruge en funktion som returnere clientX + clientY og mit kald hedder plads(event).

Så kan man uden at kende noget som helst til resten af din kode lave funktionen således :

function plads(e) {
return e.clientX+e.clientY; }

Eksemplet er naturligvis ekstremt forenklet men du ser sikkert fordelen alligevel :)

Det er nok værd at bemærke at man kun kan returnere 1 ting fra funktionen. Det kan vaære et objekt eller andet men f.eks. kan dette ikke fungerer...umiddelbart :

function plads(e) {
return e.clientX, e.clinetY; }

I dette tilfælde ville man dog kunne kombinerer de to tal i ET array og så sende det tilbage.

Mvh. Johan

Synes godt om

hr__hallandsen Nybegynder

09. december 2005 - 08:17 #8

>> roenving

Tak for kritikken.

Jeg vil forsøge at rette op på det!!!

Hilsen Hallandsen

Synes godt om

klapiolsen Nybegynder

12. december 2005 - 11:35 #9

Mange tak igen. din redegørelse gør mig i stand til få noget mere ud af funktioner end jeg hidtil har kunnet :)

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