Site index
Portals
Artikelen
Software
Links
ContactinfoBox
9 berichten
• Pagina 1 van 1
infoBox
door Baby Ghost » 28 Dec 2008 01:37
Inleiding
Het is een tijd geleden dat ik een artikel heb geschreven dus ik vond het weer tijd. Nu had ik voor me werk een pop-box gemaakt, deze gaf gedetailleerd informatie over een bepaalde onderwerk. Dit script is heel handig en makkelijk te implementeren in elke website.
Voor dit artikel ga ik er vanuit dat je HTML en CSS redelijk onder de knie hebt.
De structuur(html)
Het HTML-code op zich is in principe redelijk simpel.
HTML
We hebben een <head> waar we de javascript en css ophalen, beide staan extern voor het gemak.
Wat wel op te merken is, is de div met id box. Het is de div die gebruikt wordt om alle tekst in te zetten en te laten "op-poppen".
Omdat de box die we laten op-poppen een div is, en dus met html wordt opgemaakt, kan je gerust html invoeren om je tekst in je pop-up op te maken.
De opmaak(css)
CSS
De CSS spreekt ook redelijk voor zichzelf, maar wat ik wil uitdrukken is de "display: none" in de #box css-gedeelte.
Deze moet er altijd zijn anders krijg je de box altijd te zien, en dat is niet gewenst.
De Functionaliteit(javascript)
En dan nu komen we bij de echte interessante gedeelte
Javascript
In de javascript-code zie je 3 functies, we gaan ze alle drie apart bespreken.
function infoBox(txt, obj, box)
Dit is de belangrijkste functie die er is. Ten eerste zoek deze functie de div op die gebruikt gaat worden als pop-up.
Daarna berekent hij de positie waar hij in moet komen te staan, geeft de div zijn tekst en zet hem dan op zijn juiste plek.
var div = document.getElementById(box);
Het div element wordt opgezocht in het document.
var pos = new Array();
pos = getPosition(obj);
var left = 0;
var top = 0;
Er wordt eerst een variabel gemaakt waarin we een array gaan houden, want dit krijgen we terug van onze functie die de positie berekent.
Daarna voeren we de functie uit die gaat rekenen, en definiëren we 2 andere variabelen.
left = pos[0];
top = pos[1]+25;
De variables die we eerder hadden gedefinieerd gaan we nu gebruiken. Het kan zijn (verschillend bij website) dat de div niet meteen de juiste positie heeft. Hier kunnen we dat aanpassen. Tip: bij de top-varbiable de height zetten van je tekst, zo komt hij er net onder te staan.
div.innerHTML = txt;
Hier zetten we de tekst in de div.
div.style.display = 'block';
div.style.position = 'absolute';
div.style.left = left + "px";
div.style.top = top + "px";
De div moet een andere style krijgen. Hij moet weer zichtbaar zijn en een absolute positie krijgen met de berekende waardes.
function getPosition(object)
Deze functie wordt gebruikt om de positie te berekenen van de term waar de div moet komen te staan. Dit om de div later deze positie aangeeft.
var posLeft = posTop = 0;
Er worden 2 variabelen aangemaakt, beide met als start waarde 0.
if (object.offsetParent)
{
do
{
posLeft += object.offsetLeft;
posTop += object.offsetTop;
}
while (object = object.offsetParent);
}
Nu wordt er berekent; als het object een parent heeft oftewel binnen een ander html tag staat, wordt die afstand berekend en opgeteld bij ons eerdere gedefinieerd variabel. Dan wordt er in een loop gekeken of het html object zelf weer een parent heeft, en wordt dit process herhaald tot er geen parents meer zijn.
return [posLeft, posTop];
De variabelen worden terug gestuurd als 1 array met daarin de variabelen.
function hideBox(box)
var div = document.getElementById(box);
div.style.display = 'none';
We zoeken de div weer op, en maken het weer onzichtbaar.
Gebruik
Je hebt het waarschijnlijk al gezien in de HTML, maar het gebruik is ook redelijk simpel:
onmouseover="infoBox('Hier je tekst', this, 'box_naam')" onmouseout="hideBox('box_naam')"
Dit kan je zetten bij verschillende tags zoals <span> en <a> en zelfs <p>.
Voorbeeld
Klik hier voor een voorbeeld.
Het is een tijd geleden dat ik een artikel heb geschreven dus ik vond het weer tijd. Nu had ik voor me werk een pop-box gemaakt, deze gaf gedetailleerd informatie over een bepaalde onderwerk. Dit script is heel handig en makkelijk te implementeren in elke website.
Voor dit artikel ga ik er vanuit dat je HTML en CSS redelijk onder de knie hebt.
De structuur(html)
Het HTML-code op zich is in principe redelijk simpel.
HTML
- Code: Alles selecteren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="infoBox.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>infoBox</title>
</head>
<body>
<div id="box"></div>
<form id="dataform" method="post" action="/">
<table id="data" cellspacing="0" cellpadding="0">
<tr>
<th align="left"><span onmouseover="infoBox('Voer hier uw <strong>naam</strong> voluit in.', this, 'box')" onmouseout="hideBox('box')">Naam</span></th>
<td><input id="naam" type="text" /></td>
</tr>
<tr>
<th align="left"><span onmouseover="infoBox('Voer hier uw <strong>leeftijd</strong> in jaren in.', this, 'box')" onmouseout="hideBox('box')">Leeftijd</span></th>
<td><input id="leeftijd" type="text" /></td>
</tr>
</table>
<p>
Dit artikel is gemaakt door <span class="infoTerm" onmouseover="infoBox('Ook bekent als <strong>Baby Ghost</strong> op MasterCode.', this, 'box')" onmouseout="hideBox('box')">Bryan</span>.<br />
Dit artikel is afkomstig van <a href="http://www.mastercode.nl/forum/" onmouseover="infoBox('MasterCode: webmasterresource', this, 'box')" onmouseout="hideBox('box')">MasterCode</a> en voor meer vragen kan je terecht op de <a href="http://www.mastercode.nl/forum/" onmouseover="infoBox('De MasterCode forum voor elke webscripter', this, 'box')" onmouseout="hideBox('box')">forum</a>.
</p>
</form>
</body>
</html>
We hebben een <head> waar we de javascript en css ophalen, beide staan extern voor het gemak.
Wat wel op te merken is, is de div met id box. Het is de div die gebruikt wordt om alle tekst in te zetten en te laten "op-poppen".
Omdat de box die we laten op-poppen een div is, en dus met html wordt opgemaakt, kan je gerust html invoeren om je tekst in je pop-up op te maken.
De opmaak(css)
CSS
- Code: Alles selecteren
/* Dit is de style voor de infobox */
#box {
display: none; /* Niet verwijderen! */
background: #eee;
border: 1px solid #ccc;
width: auto;
min-width: 200px;
padding: 5px 10px;
}
/* Wat extra style */
.infoTerm {
text-decoration: underline;
}
#data th {
width: 100px;
}
a {
color: #000;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
De CSS spreekt ook redelijk voor zichzelf, maar wat ik wil uitdrukken is de "display: none" in de #box css-gedeelte.
Deze moet er altijd zijn anders krijg je de box altijd te zien, en dat is niet gewenst.
De Functionaliteit(javascript)
En dan nu komen we bij de echte interessante gedeelte
Javascript
- Code: Alles selecteren
function infoBox(txt, obj, box)
{
// Get the div object
var div = document.getElementById(box);
// Determine position
var pos = new Array();
pos = getPosition(obj);
var left = 0;
var top = 0;
// Finishing touch
left = pos[0];
top = pos[1]+25;
// Insert text
div.innerHTML = txt;
// Show the box
div.style.display = 'block';
// Place it at the right position
div.style.position = 'absolute';
div.style.left = left + "px";
div.style.top = top + "px";
}
function getPosition(object)
{
// Define variables
var posLeft = posTop = 0;
// If object has offsetParent
if (object.offsetParent)
{
do
{
// Get position and count it
posLeft += object.offsetLeft;
posTop += object.offsetTop;
}
// Object becomes the parent object(so we count that one as well)
while (object = object.offsetParent);
}
// Return the ultimate results as Array
return [posLeft, posTop];
}
function hideBox(box)
{
// Get the div object
var div = document.getElementById(box);
// Hide the box
div.style.display = 'none';
}
In de javascript-code zie je 3 functies, we gaan ze alle drie apart bespreken.
Dit is de belangrijkste functie die er is. Ten eerste zoek deze functie de div op die gebruikt gaat worden als pop-up.
Daarna berekent hij de positie waar hij in moet komen te staan, geeft de div zijn tekst en zet hem dan op zijn juiste plek.
Het div element wordt opgezocht in het document.
pos = getPosition(obj);
var left = 0;
var top = 0;
Er wordt eerst een variabel gemaakt waarin we een array gaan houden, want dit krijgen we terug van onze functie die de positie berekent.
Daarna voeren we de functie uit die gaat rekenen, en definiëren we 2 andere variabelen.
top = pos[1]+25;
De variables die we eerder hadden gedefinieerd gaan we nu gebruiken. Het kan zijn (verschillend bij website) dat de div niet meteen de juiste positie heeft. Hier kunnen we dat aanpassen. Tip: bij de top-varbiable de height zetten van je tekst, zo komt hij er net onder te staan.
Hier zetten we de tekst in de div.
div.style.position = 'absolute';
div.style.left = left + "px";
div.style.top = top + "px";
De div moet een andere style krijgen. Hij moet weer zichtbaar zijn en een absolute positie krijgen met de berekende waardes.
Deze functie wordt gebruikt om de positie te berekenen van de term waar de div moet komen te staan. Dit om de div later deze positie aangeeft.
Er worden 2 variabelen aangemaakt, beide met als start waarde 0.
{
do
{
posLeft += object.offsetLeft;
posTop += object.offsetTop;
}
while (object = object.offsetParent);
}
Nu wordt er berekent; als het object een parent heeft oftewel binnen een ander html tag staat, wordt die afstand berekend en opgeteld bij ons eerdere gedefinieerd variabel. Dan wordt er in een loop gekeken of het html object zelf weer een parent heeft, en wordt dit process herhaald tot er geen parents meer zijn.
De variabelen worden terug gestuurd als 1 array met daarin de variabelen.
div.style.display = 'none';
We zoeken de div weer op, en maken het weer onzichtbaar.
Gebruik
Je hebt het waarschijnlijk al gezien in de HTML, maar het gebruik is ook redelijk simpel:
Dit kan je zetten bij verschillende tags zoals <span> en <a> en zelfs <p>.
Voorbeeld
Klik hier voor een voorbeeld.
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
Re: infoBox
door Theo » 28 Dec 2008 11:53
Een paar opmerkingen:
* Het language-attribuut is 'deprecated' en wordt dus niet meer gebruikt.
* Het is 'Finishing touch', niet toutche
* Waarom moet je zowelobj als box invoeren... zijn die niet allebei hetzelfde? Volgens mij kun je box achterwege laten.
Verder zouden een paar online voorbeeldjes erbij mooi zijn. Maak die en stuur ze naar Rutger, dan kan hij ze online zetten.
Eindoordeel: net en duidelijk artikel.
En leuk dat er weer eens een JS artikel bij is.
* Het language-attribuut is 'deprecated' en wordt dus niet meer gebruikt.
* Het is 'Finishing touch', niet toutche
* Waarom moet je zowel
Verder zouden een paar online voorbeeldjes erbij mooi zijn. Maak die en stuur ze naar Rutger, dan kan hij ze online zetten.
Eindoordeel: net en duidelijk artikel.
En leuk dat er weer eens een JS artikel bij is.
I rather feel pain than nothing at all
- Theo
- Oprichter
- Berichten: 1795
- Geregistreerd: 11 Jun 2005 17:43
- Woonplaats: in_array()
Re: infoBox
door Baby Ghost » 28 Dec 2008 15:20
Aangepast, eerste 2 punten zijn toegepast.Theo schreef:Een paar opmerkingen:
* Het language-attribuut is 'deprecated' en wordt dus niet meer gebruikt.
* Het is 'Finishing touch', niet toutche
* Waarom moet je zowelobj alsbox invoeren... zijn die niet allebei hetzelfde? Volgens mij kun je box achterwege laten.
Verder zouden een paar online voorbeeldjes erbij mooi zijn. Maak die en stuur ze naar Rutger, dan kan hij ze online zetten.
Eindoordeel: net en duidelijk artikel.
En leuk dat er weer eens een JS artikel bij is.
Obj en box zijn 2 hele verschillende elementen, obj is namelijk de element waar de term in staan(<a></a>) en box is in dit voorbeeld een div box. Obj is dus de term en box de box waar de uitleg/informatie in staat.
Dit kan inderdaad een beetje verwarrend overkomen de eerste keer, maar later wordt het wat duidelijker en zo is het flexibel.
Rutger heeft de code, dus dit kan hij wel doen
Bryan.
"Make everything as simple as possible, but not simpler" - Albert Einstein
"Make everything as simple as possible, but not simpler" - Albert Einstein
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
- Mauz
- Globale moderator
- Berichten: 963
- Geregistreerd: 24 Okt 2005 18:41
- Woonplaats: Groningen
Re: infoBox
door eXo » 29 Dec 2008 12:20
http://www.crazyexo.org/Master/master.htm
Dit kan van pas komen, ziet er goed uit
Hij doet het niet meer... hij deed het wel.. heb niks veranderd aan de code.
Dit kan van pas komen, ziet er goed uit
Hij doet het niet meer... hij deed het wel.. heb niks veranderd aan de code.
- eXo
- Berichten: 75
- Geregistreerd: 23 Dec 2008 13:53
Re: infoBox
door Baby Ghost » 29 Dec 2008 13:09
Het url naar de javascript is niet juist, en de code was geloof ik gewijzigt van de begin post.
Bryan.
"Make everything as simple as possible, but not simpler" - Albert Einstein
"Make everything as simple as possible, but not simpler" - Albert Einstein
- Baby Ghost
- Teamlid
- Berichten: 509
- Geregistreerd: 28 Mei 2006 02:09
- Woonplaats: den haag
Re: infoBox
door eXo » 29 Dec 2008 14:07
Baby Ghost schreef:Het url naar de javascript is niet juist, en de code was geloof ik gewijzigt van de begin post.
nu doet ie het weer. weet alleen niet voor hoelang xD
- eXo
- Berichten: 75
- Geregistreerd: 23 Dec 2008 13:53
-
Fluring Lifes - Beheerder
- Berichten: 1155
- Geregistreerd: 28 Sep 2005 19:54
- Woonplaats: Alkmaar - Nederland
9 berichten
• Pagina 1 van 1
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 1 gast