Een uitschuif menu met jQuery maken

Soms is er ruimte te kort op je website, of wil je extra informatie tonen die alleen op aanvraag getoond wordt. Dan is het makkelijk om een menu te hebben die kan uitschuiven. In dit artikel ga ik bespreken hoe je zo'n menu zelf in elkaar kunt zetten.

De HTML opbouw

De HTML is vrij eenvoudig, en ziet er als volgt uit:

  1. <div id="top-menu">
  2.         <div id="top-menu-content">
  3.                 Hier komt de content van het menu.
  4.         </div>
  5.         <div id="top-menu-label">
  6.                 Label
  7.         </div>
  8. </div>

Ook de CSS is relatief eenvoudig opgebouwd:

  1. div#top-menu {
  2.         position: fixed;
  3.         z-index: 9999;
  4.         background: #fff;
  5. }
  6.  
  7. div#top-menu-label {
  8.         background: #fff;
  9.         position: absolute;
  10.         width: 100px;
  11.         height: 25px;
  12.         left: 50%;
  13.         margin-left: -50px;
  14. }

Het daadwerkelijke verbergen van de content gaan in de volgende stap met jQuery doen. Dan blijft enkel het labeltje zichtbaar.

Achtergrond die altijd past

Als eens tegen het probleem aangelopen dat je een achtergrond als foto wilde, maar dat dit niet goed lukte? Ik ook, en naar wat zoeken ben ik achter de oplossing gekomen. Uiteindelijk bleek dat dit helemaal niet zo moeilijk is

Website wrapper

Om te beginnen moet de website binnen één DIV element staan. De meeste moderne sites worden op deze manier opgebouwd, dus dat zal geen probleem zijn. Hier moet er nog een DIV element toegevoegd worden, naast de wrapper. Hierin wordt dan een IMG tag geplaatst die weer naar de afbeelding verwijst. Globaal ziet dit er dan ongeveer zo uit:

Ajax progressbar met jQuery

Wanneer in je web applicatie opties hebt die een lange tijd nodig hebben om te voltooien, kan het makkelijk zijn om een laadbalk te tonen. Zodoende weet de bezoeker waar deze aan toe is en blijft daardoor op de site. Het maken van een progressbar op zich is niet zo moeilijk, jQuery heeft daar zelf een plugin voor. De techniek die erachter schuilt kan wat lastiger zijn. De methode die ik hier gebruik kijkt niet daadwerkelijk hoever het proces is, maar hakt het proces in stukjes. Afhankelijk van hoeveel stukjes al gedaan zijn kan uitgerekend worden hoever het proces is.

SSL certificaat uitlezen in PHP

Soms kan het nodig zijn om een SSL certificaat in PHP uit te lezen. Zo kan bijvoorbeeld de verloop datum van het SSL certificaat uitgelezen worden, wat weer makkelijk kan zijn voor het beheer hiervan. Ik ben een behoorlijk tijd hiermee aan het stoeien geweest, en wil dit daarom graag delen.

Gegevens opvragen

Het opvragen van de gegevens gebeurt met behulp van een stream, en ziet er zo uit:

E-mail versturen via SMTP

Bij een aantal script die ik in het verleden gemaakt heb, worden via een cronjob aangeroepen. Probleem hierbij is dat wanneer een script een e-mail verstuurd er zoiets staat als info@domain.nl namens server-naam. Omdat ik gebruik maak van een shared hosting staat dat niet erg netjes wanneer deze e-mails naar derden verstuurd worden. De oplossing daarvoor is door de e-mails te versturen via een SMTP server. Toen ik opzoek ging hiernaar bleek het vrij lastig om hier een script voor te vinden. Daarom deel ik deze met de rest van de wereld.

jQuery Lightbox Voorbeelden

Er zijn een hoop manieren om je foto's mooi te presenteren. In veel gevallen wordt er gebruik gemaakt van een zogenaamde Lightbox. Dit is een soort popup binnen in het browser scherm waarin de foto wordt getoond, en waarbij ook verder geklikt kan worden. Inmiddels zijn er tientallen verschillende ligtboxen beschikbaar, de ene nog mooier en uitgebreider dan de andere. Zo is het bijvoorbeeld mogelijk om externe content in te laden, of om flash video's te tonen. In dit artikel laat ik een overzicht zien van een aantal verschillende lightboxen.

jQuery Fancybox

De jQuery Fancybox is een lightbox die, zoals de naam al doet vermoeden, er erg goed uitziet. Dit begint al vanaf het moment dat er op de afbeelding geklikt wordt. Er komt geen normale lightbox, maar de afbeelding schuift als het ware naar het midden, en wordt groter. Ook bied deze lightbox de mogelijkheid om tussen de verschillende afbeeldingen te schakelen door middel van scrollen.

Verbinding met meerdere databases tegelijk

Soms kan het nodig zijn om met meerdere database tegelijk verbinding te maken. Bijvoorbeeld wanneer een meerdere systemen aan elkaar gekoppeld dienen te worden. In deze tutorial zal ik laten zien dat het niet zo moeilijk is om met meerdere databases tegelijk verbinding te maken.

Link identifier

Om een onderscheid te maken tussen de database's moet er gebruik gemaakt worden van een zogenaamde Link identifier. Dit is een variabele waarin de database connectie wordt opgeslagen. Wanneer er een query uitgevoerd dient te worden wordt deze variabele meegeven, waardoor MySQL weet op welke database deze query uitgevoerd dient te worden.

  1. $database1 = mysql_connect('locasthost', 'gebruiker', 'wachtwoord');
  2. mysql_select_db('database_naam', $database1);

wanneer er verbinding gemaakt dient te worden met meerdere database tegelijk wordt de code op deze manier uitgebreid:

Spammers van je website weren (PHP)

Spam bots zijn vervelende dingen waar soms lastig vanaf te komen is. Er zijn al een heleboel verschillende soorten manieren bedacht en gemaakt om spam tegen te gaan: Teksten over typen, rekensommetjes doen, katten herkennen, geluiden herkennen, en zo kan ik nog wel even doorgaan. Omdat spammers dit vaak op grote schaal doen, zijn er al databases aangelegd met de IP-adressen van deze personen. Het is daarom stukken makkelijker om hier gebruik van te maken. Stop Forum Spam.com heeft een dergelijke database beschikbaar via een API. Hier zal ik dan ook gebruik van gaan maken.

IP adres controleren

De eerste stap is het controleren van het IP-adres van de bezoeker. Deze kan eenvoudig via de API opgevraagd worden:

E-mailadres valideren (jQuery & PHP)

Waar de eindgebruiker zijn gegeven kan invoeren, is het vaak ook nodig om het e-mailadres in te laten voeren. Indien je wilt voorkomen dat de gebruiker een verkeerd e-mailadres invoert kan het soms lastig zijn hier een goede functie voor te vinden. Speciaal daarvoor heb ik deze tutorial geschreven, om dit soort problemen te voorkomen.

PHP

PHP 5 < 5.2.0

Bij nieuwere PHP versies is er al een functie hiervoor ingebouwd, bij oudere PHP versies zul je dit zelf moeten regelen. Het makkelijkste is om dit met een zogenaamde reguliere expressie te regelen. De code ziet er dan als volgt uit:

  1. ereg("^[a-zA-Z0-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$]", $email);

Dit kan ook eenvoudig in een functie gegoten worden:

  1. function checkEmail($email) {
  2.         return ereg("^[a-zA-Z0-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$]", $email);
  3. }

Deze functie kan dan als volgt worden aangeroepen:

jQuery slider

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum imperdiet dignissim. Sed ut tristique dui. Phasellus risus ante, malesuada at aliquam ac, consectetur ac diam. In lacinia neque eu nibh rutrum volutpat. Nullam faucibus, elit vitae varius consectetur, dui augue sollicitudin est, sed dictum enim orci nec mi. Suspendisse vitae velit ut ante suscipit viverra eget nec est. Nam cursus molestie scelerisque. Nulla est tellus, vulputate ac tempus sed, posuere ac nibh. Integer ornare accumsan mattis. Pellentesque pellentesque dui vel sem dapibus pharetra. Mauris sagittis, lectus nec feugiat fringilla, mauris magna pretium neque, ut molestie metus lectus eget metus. Nam at sem nulla, eget accumsan ante. Phasellus volutpat feugiat pulvinar. Pellentesque sed diam nec massa fringilla laoreet nec vitae lectus. Sed est est, placerat non vulputate quis, dictum eu felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Inhoud syndiceren