woensdag 6 oktober 2010
als sommigen zich afvragen, hoe je zo'n sidebar met slide effect in je blog krijgt (dan denk ik vooral aan mijn leerkracht nederlands) ik heb hier even opgeschreven in stapjes hoe je het doet:
je moet een gadget toevoegen: genaamd HTML/JavaScript. in dit gadget zul je html, css en JS code kunnen opnemen. voor het gemak gebruik ik Jquerry, een framework voor JS, in dit voorbeeld staat er een linkje naar de Jquerry op mijn server, als je de laadtijd (een halve seconde ofzo) te lang vind, moet je het maar even downloaden, en opslaan op je eigen server.
Als je het gadget gaat bewerken, kun je kiezen tussen rich text, en html (rechts boven het wit kadertje om te schrijven) je kiest html. hier ga je je code schrijven.
eerst moet je je kadertje opmaken, we beginnen onze html, style, en maken een div aan. (tags zoals head worden niet gebruikt in deze html editor van blogger, je kunt ze erbij zetten, maar hij verwijderd ze automatisch)
Laat code zien
Verberg code
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style type='text/css'>
div.boekenlijst {
color:#9fc5e8;
background-color:black;
border-style:solid;
border-color:#3d85c6;
border-width:1px;
width:100%;
height:auto;
font-size:12px;
font-family:arial;
position:absolute;
}
als je zelf de waarden wilt veranderen:
background-color: kleur naar keuze;
border-style: stijl voor de randen;
border-color: kleur naar keuze;
width: breedte van de div (best gewoon 100%);
font-size: grootte van de letters;
font-family: lettertype:
meer als dit verander je best niet, als je niets van css kent. Na deze lijnen, komen er nog wat opmaak lijnen:
Opmaak van de titels
.list_title {
text-align:center;
color:#9fc5e8;
font-size:17px;
font-family:arial;
font-weight:bold;
}
Opmaak van de inhoud van de lijst
.lijst {
margin-left:8px;
margin-right:8px;
}
</style>
Dan starten we het script, hierin zul je niets moeten veranderen, tenzij je meerdere/mindere rijen wilt hebben.
<script type="text/javascript" src="http://crusadersofpain.netau.net/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://crusadersofpain.netau.net/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
$('#open1').click(function () {
$('.lijst').slideUp(650);
$('#1').slideDown(500);
});
$('#open2').click(function () {
$('.lijst').slideUp(650);
$('#2').slideDown(500);
});
$('#open3').click(function () {
$('.lijst').slideUp(650);
$('#3').slideDown(500);
});
});
-->
</script>
moest je nog een menu erbij willen, voeg je deze code nog toe:
$('#open4').click(function () {
$('.lijst').slideUp(650);
$('#4').slideDown(500);
});
moest je er nog meer willen, moet je de 4 steeds veranderen in het getal erna: 4, 5, 6, 7,...
nu starten we het aanmaken van de lijst, bij deze code hoef je niets aan te passen, buiten hetgeen er in moet natuurlijk.
<body>
<div class='boekenlijst'>
<!-- BOEKEN -->
<span id='open1' style='cursor:pointer' class="list_title">
<br/>
<!-- BOEKEN TITEL -->
Mijn boekenlijst
<br/>
</span>
<span class='lijst' id='1' style='display:none'>
<!-- BOEKEN INHOUD -->
<u>Temeraire Reeks</u><br />
1. Temeraire<br />
2. De Jadentroon<br />
3. De buskruitoorlog<br />
4. Het ivoren rijk<br />
5. De zege van de adelaar<br />
6. Tongues of Serpents<br /><br />
<u>Eragon reeks</u><br />
1. Eragon<br />
2. Oudste<br />
3. Brisingr
</span>
<!-- FILM -->
<span id='open2' style='cursor:pointer' class="list_title">
<br/>
<!-- FILM TITEL -->
Mijn filmlijstje
<br/>
</span>
<span class='lijst' id='2' style='display:none'>
<!-- FILM INHOUD -->
1. The dark knight<br />
2. The prestige
</span>
<!-- MUZIEK -->
<span id='open3' style='cursor:pointer' class="list_title">
<br/>
<!-- MUZIEK TITEL -->
Mijn muzieklijst
<br/>
</span>
<span class='lijst' id='3' style='display:none'>
<!-- MUZIEK INHOUD -->
Iron Maiden - Fear of the Dark<br />
Iron Maiden - Run to the hills<br />
Iron Maiden - Killers<br />
Iron Maiden - Aces high<br />
Iron Maiden - Judas be my guide<br />
Iron Maiden - No prayer for the dying<br />
<br />
Breaking Benjamin - Follow<br />
Breaking Benjamin - Crawl<br />
Breaking Benjamin - Sugercoat<br />
<br />
Il nino - What comes around<br />
Il nino - Unframed<br />
Il nino - Cleansing<br />
Il nino - Evreything beatiful
</span>
</div>
</body>
</html>
</!doctype>stel dat je nu ook nog een vierde menu wil toevoegen, hoef je enkel:
<span id='open#' style='cursor:pointer' class="list_title">
<br/>
<!-- MENU # TITEL -->
Mijn extra lijst
<!-- einde MENU # TITEL -->
<br/>
</span>
<span class='lijst' id='#' style='display:none'>
<!-- MENU # INHOUD -->
inhoud # 1 <br/>
inhoud # 2 <br/>
inhoud # 3 <br/>
inhoud # 4 <br/>
<!-- einde MENU # -->
</span>
toe te voegen, en dan, zoals eerder gezegd, ook in het script de nodige lijnen toevoegen.
Mooie uitleg Brent.
Spijtig genoeg zaten er echter wel aan aantal foutjes in. ;P
Bvb, om een 4de groep bij te voegen plaatste jij :
$('#open4').click(function () {
$('.lijst').slideUp(650);
$('#4).slideDown(500);
});
Dat geeft echter een error, en iemand die niet veel van JQuery kent zou misschien niet weten hoe die op te lossen. Gewoon de $('#4) aanpassen naar $('#4')
Ook bij de code voor die 4de groep in de Body Tag zit er een voor ons begrijpelijke variable in, die echter niet zo duidelijk is voor anderen misschien.
Bij de stukjes code :
span id='open#' style='cursor:pointer' class="list_title"
en
span class='lijst' id='#' style='display:none'
Moet de # vervangen worden door het respectievelijke getal van het stuk (dus als je een 4de menu wilt toevoegen door een 4, een 5de door een 5, etc..)
Ook niet vergeten dat het stuk :
$('#open4').click(function () {
$('.lijst').slideUp(650);
$('#4).slideDown(500);
});
Achter de }); van de 3de en voor de }); die er net na komt. Anders doet het 4de menu niets. Wil je erna nog blokken toevoegen;, moeten die ook voor de laatste }); komen
Verder zag ik er niet meteen fouten/onduidelijkheden in het script.
Hopelijk is het voor iedereen nu wat duidelijker. Verdere vragen kunnen gericht worden aan Brent of mij zou ik zo zeggen ;D
Pfff. Voor mij is dit allemaal Chinees. Misschien moet ik eerst een cursus webdesign doornemen?
haha meneer Convens, voor mij is het simpel :p
maar wesley, er staat 1 foutje in, ik zie het jah, maar deze web editor app, doet heel vreemd moet je weten. hij delete stukken van mijn code en veranderd ze dan opnieuw... moet je zelf mss eens proberen, snap het niet zo goed, maar bedankt voor de 2 foutjes, ik verander ze ;-)