Tooltip & Lightbox
Ik zou graag als je wilt inloggen dat er een schermtje tevoren komt.
En de achtergrond kan je dan niet gebruiken en wordt grijs.
Zoals spelletjes.nl (Druk rechts bovenaan inloggen)
Dit is mijn eerste vraag hoe dit noemt.
Mijn 2de vraag is als je met je muis over een afbeelding gaat dat er een kamer komt met uitleg over wat het is.
Hopelijk snap je wat ik bedoel.
Gewijzigd op 13/08/2011 19:27:18 door - Diov -
De tweede heet een Tooltip en daar zijn net zoveel oplossingen voor te vinden.
Zou je de titel van je topic willen aanpassen? Dan weten mensen direct wat je nodig hebt. Titels als: Help, ik weet het niet, Dit is een bug, Wie kan me helpen, Het werkt niet... Zijn niet gewenst. Graag aanpassen.
Alvast bedankt,
Niels
Weet iemand een goeie site?
Ik versta niet zo goed engels maar ik heb een goeie site gevonden.
Ik ben ook nog maar 14.
Dit is de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
Graag in het vervolg bij code, [code] [/code] tags gebruiken. [/modedit]
Gewijzigd op 16/08/2011 22:04:56 door Bas IJzelendoorn
Maar ga naar http://www.smik.tk
En bovenaan staat 'Nog geen account? Nu registreren'
Druk daarop, bij mij werkt het niet.
Je hebt wel drie keer een doctype staan.
Gewijzigd op 14/08/2011 20:03:44 door Joey Drieling
Was ook van plan om dit te doen.
Gewijzigd op 16/08/2011 22:03:59 door Joey Drieling
- En waarom staat er 'There is an error with the musicbox.' in de nederlandse versie?
- Verder:
Allard Jansen op 15/08/2011 11:31:58:
De fouten van de W3 Validator moet je niet zo op letten. Zelfs toen ik Wordpress gebruikte, waren er zelfs 345 fouten. Zolang je alle tags maar goed afsluit, is er niks aan de hand...
Even wat onduidelijkheid uit de lucht helpen, voor er dingen worden gezegd die niet kloppen. Mensen die niet weten waar W3C voor staat moeten dit maar even lezen Hoofdstuk 3A is een heel bekend fenomeen, zo ook op deze website van de TS.
- Let op met scripts van anderen. Je gebruikt dit script Hierbij wordt afgeraden om het te gebruiken omdat het onveilig is en verouderd!
- Oke nu al deze problemen zijn verholpen kunnen we weer ontopic gaan:
Kijk eens naar JqueryUI. (http://jqueryui.com/themeroller/)
Gewijzigd op 16/08/2011 22:21:24 door Bas IJzelendoorn
Je 2de vraag, dat is standaard ingesteld maar die wordt morgen of overmorgen weer online gezet.
Het verouderd script is het makkelijkste dat ik ken om te veranderen. Ik moet er alleen nog wat aan sleutelen voor SQL-injections.
Toevoeging op 19/08/2011 18:00:57:
Wat ben ik met die site?
Joey Drieling op 16/08/2011 21:58:05:
Dat is gelul als alles goed is geeft W3C geen fouten aan. Ik maak mijn sites altijd 100% valid met corecte doctype, en heb geen fouten een fout is een fout klaar. Maar zijn html is/was echt slecht de body en doctype staan meerdere keeren in de broncode.
Hmm mja, ik vind een W3 valide pagina niet heilig maar probeer het vaak wel netjes te houden. Toch moet ik Allard een beetje gelijk geven dat zolang alles netjes afgesloten wordt en XML-technisch veilig is maakt het niet enorm veel uit.
Maargoed 3 doctype declaraties is inderdaad ook niet echt goed :p
Dem Ian op 19/08/2011 17:57:32:
Ik ben van Belgie, dusja. Nog niet aan gedacht maar daarom maak ik gebruik van een tooltip die aanduid welke taal het is.
Ikzelf ook, maar de Belgische vlag is te vaag, een Waal die zal dan Frans verwachten, een Vlaming zal Nederlands verwachten. Je zou kunnen opteren om de Vlaamse vlag te gebruiken. Want Vlaams is in principe ook een taal, die lichtjes verschilt van het Nederlands Nederlands (het Nederlands van Nederland).
Het probleem is dan wel dat de Vlaamse vlag niet door iedereen gekend is. Als je dus ook bezoekers uit Nederland wenst, is het wellicht duidelijker de Nederlandse vlag te hanteren.
Over die belgische vlag, je hebt gelijk. Ik zal ze veranderen in de Nederlandse.