Javascript Page Jumping

Status
Niet open voor verdere reacties.

Strength

Nieuwe gebruiker
Lid geworden
9 okt 2009
Berichten
4
Hey Iedereen!
Ik zit met een probleemp.
Telkens als ik een javascript functie oproep dan springt mijn pagina naar de standaard positie.
Hoe los ik dit op?
Je vind een voorbeeld op: http://www.jamaswapi.be/test/index3.html

--> Scroll naar rechts. Druk op Start. En je zult zien dat het scherm terug naar links opschuift! En ik wil dit niet!

Kunnen jullie helpen?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var tp1=60
var tp2=60
var tp3=60
var y

function startCount1()
{
  		document.getElementById('timeP1').innerHTML=tp1;
    	tp1=tp1-1;
    	y=setTimeout("startCount1()",1000);
}
function stopCount1()
{
    clearTimeout(y)
}

</script>
</head>
<style>
body{
background-color:#980100;
width:1800px;
}
#score{
position:absolute;
bottom:0px;
left:200px;
width:1200px;
}
.name{
color:#FFFFFF;
font-size:36px;
text-align:center;
}
.time{
color:#FFFFFF;
font-size:120px;
text-align:center;
}
.player1{
width:200px;
height:200px;
float:left;
margin-right:100px;
}
.player2{
width:200px;
height:200px;
float:left;
margin-right:100px;
}
.player3{
width:200px;
height:200px;
float:left;
margin-right:100px;
}

</style>
<body>
<div id="score">
	<div class="player1">
    	<div class="name">NAAM 1</div>
        <div class="time" id="timeP1">60</div>
    </div>
	<div class="player2">
    	 <div class="name">NAAM 2</div>
         <div class="time" id="timeP2">60</div>
    </div>
	<div class="player3">
    	 <div class="name">NAAM 3</div>
         <div class="time" id="timeP3">60</div>
    </div>
</div>
<div style=" position:absolute; right:-30px; top:50px">
<a href="#" onclick="startCount1()" style="background-image:url(start.png); padding:23px 123px 0px 0px;"></a>
<a href="#" onclick="stopCount1()" style="background-image:url(stop.png); padding:23px 123px 0px 0px;"></a>
</div>

</body>
</html>
 
In FireFox verspringt er bij mij niets als ik op start druk, in IE staat er zelfs geen startknop.

Overigens is je pagina wel een beetje breed. Ik heb een scherm van 1300+ px breed en je pagina is nog breder.
 
Dit is de bedoeling.
Ik ga dit scherm projecteren en het is de bedoeling dat je links de score ziet op de projectie. En het rechtse deel zou dan op mijn beeldscherm moeten verschijnen om zo de scores aan te passen zonder dat men dit ziet op de projectie.
 
Euhm ja? Dat is mooi...

Maar ten eerste werkt je script niet echt, want als ik een keer op stop en weer op start druk loopt de teller ineens een stuk sneller (dat rijmt... ;)).
 
Bij mij verspringt hij niet meer als ik
HTML:
<a href="#" onclick="startCount1()" style="background-image:url(start.png); padding:23px 123px 0px 0px;"></a>
<a href="#" onclick="stopCount1()" style="background-image:url(stop.png); padding:23px 123px 0px 0px;"></a>
vervang door
HTML:
<a href="javascript:void()" onclick="startCount1()" style="background-image:url(start.png); padding:23px 123px 0px 0px;"></a>
<a href="javascript:void()" onclick="stopCount1()" style="background-image:url(stop.png); padding:23px 123px 0px 0px;"></a>
 
Bij mij verspringt hij niet meer als ik
HTML:
<a href="#" onclick="startCount1()" style="background-image:url(start.png); padding:23px 123px 0px 0px;"></a>
<a href="#" onclick="stopCount1()" style="background-image:url(stop.png); padding:23px 123px 0px 0px;"></a>
vervang door
HTML:
<a href="javascript:void()" onclick="startCount1()" style="background-image:url(start.png); padding:23px 123px 0px 0px;"></a>
<a href="javascript:void()" onclick="stopCount1()" style="background-image:url(stop.png); padding:23px 123px 0px 0px;"></a>


Perfect!!! Mercikes!
 
Het hekje in een anchor is namelijk bedoeld om binnen de pagina te linken.
Je kan bijvoorbeeld door een hekje gevolgd door de id-naam naar het element dat die id-naam draagt linken.

De volgende link

PHP:
<a href='#hoofdstuk_1'>Uitleg over HTML</a>

linkt binnen de pagina naar:

PHP:
<h1 id='hoofdstuk_1'>Uitleg over HTML </h1>

Wanneer je geen id toevoegt, dan linkt het anchor naar het begin van de pagina.
 
Het hekje in een anchor is namelijk bedoeld om binnen de pagina te linken.
Je kan bijvoorbeeld door een hekje gevolgd door de id-naam naar het element dat die id-naam draagt linken.

De volgende link

PHP:
<a href='#hoofdstuk_1'>Uitleg over HTML</a>

linkt binnen de pagina naar:

PHP:
<h1 id='hoofdstuk_1'>Uitleg over HTML </h1>

Wanneer je geen id toevoegt, dan linkt het anchor naar het begin van de pagina.

Aaah zo zit dat! Vandaar dat mijn pagina versprong.
Nu weet ik dit ook weeral. Dankje wel!
 
Het hekje in een anchor is namelijk bedoeld om binnen de pagina te linken.
Je kan bijvoorbeeld door een hekje gevolgd door de id-naam naar het element dat die id-naam draagt linken.

De volgende link

PHP:
<a href='#hoofdstuk_1'>Uitleg over HTML</a>

linkt binnen de pagina naar:

PHP:
<h1 id='hoofdstuk_1'>Uitleg over HTML </h1>

Wanneer je geen id toevoegt, dan linkt het anchor naar het begin van de pagina.

Hoor je daar niet

HTML:
<a href="#hoofdstuk_1">Naar hoofdstuk 1</a>

// en

<a name="hoofdstuk_1"></a>

voor te gebruiken?
 
Hoor je daar niet

HTML:
<a href="#hoofdstuk_1">Naar hoofdstuk 1</a>

// en

<a name="hoofdstuk_1"></a>

voor te gebruiken?

Dat ligt voornamelijk aan de (X)HTML versie die je gebruikt en in hoeverre je verenigbaarheid met oudere browsers wil ondersteunen. In HTML 4 en XHTML 1 (en verder) is het name-attribuut als fragment identificatie vervangen door het id-attribuut. Het kan eventueel nog bijgevoegd worden voor oudere browsers. Al weet ik niet of dit mag in een strict doctype en nieuwere XHTML versies ondersteunen dit waarschijnlijk al niet meer.

Verder kan ik mij niet voorstellen dat je een apart anchor toe zou moeten voegen om aan een fragment te refereren, alleen al omdat je een block element - als een header - niet in een inline element (anchor) mag plaatsen.


EDIT: Zover ik weet is het name-attribuut nog wel aanwezig als naamgeving van input-velden.
 
Laatst bewerkt:
Ah, je hebt gelijk. Nooit geweten. Weer wat geleerd, bedankt ;) Niet dat ik ze overigens ooit nodig heb gehad... ;)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan