[JS] Een DIV omhoog plaatsen met behulp van CSS - Softwareontwikkeling

dinsdag 26 oktober 2004 23:18

Acties:

Prince of Persia!

Topicstarter

Ik wil een websiteje maken (voor privegebruik) waarin venstertjes worden gerepresenteerd door divjes.
Klik op een van de divjes en deze zou op de voorgrond moeten verschijnen.
Ik heb de volgende code bedacht:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Venstertjes</TITLE>
<SCRIPT type='text/js'>
function raise (windowID) {
    venster = document.getElementByID(windowID);
    venster.style.z-index = -1;
}

</SCRIPT>
</HEAD>

<BODY>
<DIV style='width: 25%; background-color: #3399FF;
  position: absolute; top: 5px; left: 10px'
  id='v1'
  onclick='raise("v1");'>
    Hoihoi
</DIV>
<DIV style='width: 25%; background-color: #3399FF;
  position: absolute; top: 15px; left: 20px'
  id='v2'
  onclick='raise("v2");'>
    Ook hallo
</DIV>

</BODY>
</HTML>

Sidenote: Misschien klopt de waarde die z-index krijgt niet helemaal en wordt het divje juist op de achtergrond geplaatst, daar gaat het nu niet om.

Van Opera 7.5 op Windows krijg ik bij het klikken de volgende foutmelding:

file://localhost/D:/data/html/vensters.html
Event thread: onclick
Error:
name: ReferenceError
message: Statement on line 1: Reference to undefined variable: No such variable 'raise'
Backtrace:
 In unknown script
 raise("v2");
 At unknown location
 {event handler trampoline}

No such variable 'raise'? Nee, geen wonder, het is een function.
Maar om even tot de vraag te komen:

Wat doe ik fout?

Eh... het is ook al een tijdje geleden dat ik in html/javascript aan het kutten ben geweest, dus het is goed mogelijk dat ik <tag id=string> en getElementByID verkeerd gebruik, maar ik dacht dat het zo zat.

edit: layout niet verneuken ey

[ Voor 23% gewijzigd door muba op 26-10-2004 23:21 . Reden: layout niet verneuken ey ]

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

dinsdag 26 oktober 2004 23:27

Acties:

Verwijderd

function raise (windowID)

hmm spatie misschien?

dinsdag 26 oktober 2004 23:31

Acties:

muba

Prince of Persia!

Topicstarter

Verwijderd schreef op 26 oktober 2004 @ 23:27:
[...]

hmm spatie misschien?

Die moet weg denk je?
Ik meen dat die daar gewoon mag staan.
Even kijken...
Nee, geen verschil.

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

dinsdag 26 oktober 2004 23:34

Acties:

disjfa

be

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>venstertjes</title>
<script type="text/javascript">
var index = 0;
function raise(windowid) {
    venster = document.getElementById(windowid);
    index++;
    venster.style.zIndex = index;
}

</script>
</head>

<body>
<div style="width: 25%; background-color: #3399ff;
  position: absolute; top: 5px; left: 10px"
  id="v1"
  onclick="raise('v1');">
    hoihoi
</div>
<div style="width: 25%; background-color: #3399ff;
  position: absolute; top: 15px; left: 20px"
  id="v2"
  onclick="raise('v2');">
    ook hallo
</div>

</body>
</html>

Allemaal hoofdletters

type = "text/javascript"
z-index in js == zIndex
En nog een berg veranderd.....

[ Voor 18% gewijzigd door disjfa op 26-10-2004 23:34 ]

disjfa - disj·fa (meneer)
disjfa.nl

dinsdag 26 oktober 2004 23:39

Acties:

muba

Prince of Persia!

Topicstarter

disjfa schreef op 26 oktober 2004 @ 23:34:
code:
1
<script type="text/javascript">

Tsja... zoals ik al zei: lang geleden. Vroeger ging dit in 1x goed

Allemaal hoofdletters

Nja, kwestie van smaak, vind ik. Ik vind hoofdletters om tags duidelijk aan te duiden (

dubbelop) wel duidelijk. (niet bedoeld als begin van een heilige oorlog!

)

Maar in elk geval, heel, heel, heel erg bedankt.

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

woensdag 27 oktober 2004 21:09

Acties:

Lamelos

MUBA schreef op 26 oktober 2004 @ 23:39:
[...]

Tsja... zoals ik al zei: lang geleden. Vroeger ging dit in 1x goed

[...]

Nja, kwestie van smaak, vind ik. Ik vind hoofdletters om tags duidelijk aan te duiden ( dubbelop) wel duidelijk. (niet bedoeld als begin van een heilige oorlog! )

Maar in elk geval, heel, heel, heel erg bedankt.

Volgens W3C moet alles in kleine letters

donderdag 28 oktober 2004 22:30

Acties:

muba

Prince of Persia!

Topicstarter

Lamelos schreef op 27 oktober 2004 @ 21:09:
[...]

Volgens W3C moet alles in kleine letters

Is that right? Ook met gewoon HTML, dat dus nog niet weet van dingen als of maar gewoon ... en ?

Als dat zo is, tsja, dan pas ik mijn stijl inderdaad aan!

Edit:
Vond dit voorbeeld net op de site van W3C. (http://www.w3.org/TR/REC-CSS2/media.html):

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK rel="stylesheet" type="text/css" 
 media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>The body...
   </BODY>
</HTML>

Het lijkt me sterk dat ze hun eigen specificaties niet volgen...

[ Voor 44% gewijzigd door muba op 28-10-2004 22:37 ]

Reporter: Mister Gandhi, what do you think of western civilisation?
Gandhi: I think it would be a good idea

donderdag 28 oktober 2004 22:45

Acties:

Verwijderd

bij html mag je nogsteeds gewoon je tags niet afsluiten, en hoofdletters gebruiken.
van mijn part ga je BrEeZzAh-text gebruiken.

die kleine letters en tags afsluiten is bij xhtml, maar het is nogsteeds niet slecht om je en <img/> teg af te sluiten in html.

[ Voor 10% gewijzigd door Verwijderd op 29-10-2004 15:18 ]

vrijdag 29 oktober 2004 13:15

Acties:

Rowanov

Kop eens wat anders...

Verwijderd schreef op 28 oktober 2004 @ 22:45:
bij html mag je nogsteeds gewoon je tags niet afsluiten, en hoofdletters gebruiken.
van mijn part ga je BrEeZzAh-text gebruiken.

Ik zeg jou, dat wil jij niet! ;

code:

<!DocTYpE hTml PuBLic "-//w3c//Dtd HTml 4.0 trAnSItioNAl//en">
<HtML>
<heaD>
<tiTLuH>veNstErtJEs</tItlUH>
<SCrIpt TypUh="teXT/jAVAScriPT">
Var IndEx = 0;
FUncTioN RaisuH(WIndowID) {
    VenStaH = DOcuMeNT.geTElEMeNTbyiD(wiNDoWId);
    INdeX++;
    veNStaH.stYLuh.ziNDex = iNDex;
}

</SCript>
</HEad>

<BOdy>
<dIV StylUH="wIDth: 25%; bAcKGrOUnd-COloR: #3399fF;
  poSITioN: aBSOlutUH; toP: 5pX; leFT: 10PX"
  Id="V1"
  OncLICk="raISuh('v1');">
    HOIhoI
</diV>
<DIv STylUh="WidTh: 25%; baCKGroUND-colOR: #3399ff;
  pOsITion: ABsolUTuh; TOP: 15PX; LeFT: 20Px"
  iD="V2"
  onCLiCk="rAIsUH('v2');">
    ooK hALLo
</DiV>

</bODy>
</htMl>

vrijdag 29 oktober 2004 13:18

Acties:

André

Analytics dude

Dat werkt niet, je roept in beide onclicks een functie aan die niet bestaat

vrijdag 29 oktober 2004 15:17

Acties:

Verwijderd

<tiTLuH>
StylUH
TypUh
ABsolUTuh; TOP

k, je hebt gelijk, zo, kan je geen BrEeZzAh-html gebruiken.