Der findes mange gode lightbox scripts til jQuery. Min personlige favorit var indtil i går var Fancybox, men i forbindelse med et nyt WordPress tema jeg arbejder på (glæd dig!), stødte jeg ind i problemer mellem den og jQuery pluginet Roundabout. Jeg arbejdede bogstavlig talt i flere timer på en løsning af problemet – Jeg kom tæt på, men fandt den aldrig.

Jeg begyndte derfor, at lede efter et nyt script. Der findes rigtig mange, men ikke rigtig nogen der passede indtil jeg kom forbi Colorbox. Jeg prøvede det, det virkede og det er vildt niiice!

Grunde til at bruge Colorbox

Her er nogle af grundene fra Colorboxs hjemmeside til at bruge Colorbox.

• Understøtter billeder, billede grupper, slideshow, ajax, inline, og iframe indhold
• Lightweight: mindre end 9KB javascript!!
• Det er dejlig let at ændre udseendet via CSS
• Kræver ingen ændringer i din HTML
• Genererer valid XHTML

En af fordelene er, at det er så dejlig let. Både at arbejde med og i filstørrelse. Plugin filen er bare 9kb, der bruges kun 2 billeder og der skal næsten ingen CSS til.

Der er 5 forskellige styles til at starte med, men det er nemt at lave sin egen ved, at skifte grafikken ud og tilføje noget CSS.

Her er et eksempel fra det WordPress tema jeg arbejder på. Få linjer CSS og en enkelt billede udskiftning. Kan det blive nemmere?

Så står du og mangler et jQuery lightbox, så anbefaler jeg klart Colorbox. Nu er det godt nok ikke meget, jeg har fået arbejdet med Colorbox, men indtil får det 5/5 stjerner.

Download Colorbox og læs meget mere om hvad du kan gøre med Colorbox

Internet Explorer 7 har nogle mærkelige fejl. En af dem er, hvordan den håndterer z-index. Det kan den slet ikke finde ud af. Hvis du har prøvet at lave en dropdown-menu, har du garanteret stødt på dette problem – Det har jeg i hvert fald.

En hurtig Google søgning fandt en hel masse sider med løsninger på problemet. De fleste af dem involverede jQuery, men jeg blev ved med at søge ,for at finde en mere simpel og bedre løsning.

Og jeg fandt den!

Onlinebrand.dk havde en meget simpel CSS løsning. Løsningen er simpelthen, at give overordnet (Parent) element et højere z-index værdi end elementet selv.

Dette skyldes, at IE7 nulstiller z-index værdien på alle positionerede elementer. Dette fungere selvfølgelig ikke, da hele ideen med z-index, er at man skal kunne positionere sine elementer foran eller bagved hinanden.

Lad os sige du har denne markup:

<ul id="menu">
<li><a href="#">Forside</a></li>
<li><a href="#">Om</a>
  <ul>
    <li><a href="#">Om</a></li>
  </ul>
</li>
<li><a href="#">Kontakt</a></li>
</ul>

Så skal du give #menu en højere z-index værdi end #menu li

#menu {
z-index: 10;
}

#menu li {
z-index: 5;
}

Det behøver ikke være 10 og 5, men det er dejlig lette tal.

Google gave me 8 invites. To get an invite just sent me an email on email removed
The first 8 will get one, so you better be quick

Update: Sorry, but I don’t have anymore invites.

I continue my November Christmas and it’s now in week 2, which means I’ll giveaway the second theme out of 3. HTML5 and CS3 is hot topics for web developers right now. Especially CSS3, because it’s so much easier to build beautiful websites. HTML5 is also so much nicer than HTML4.

It wasn’t the plan to actually release this theme, but it was so fun to make and I really like it, so I want to share it with all of you.

HTML5, CSS3 – What?!

HTML5 is the next major revision of HTML. Instead of, let’s say <div id="header"></div>, can you now use <header></header>. Cool, right? You can read more about HTML on Wikipedia or on html5doctor.

CSS3 is currently under development, but the most modern browsers as Safari, Chrome and Firefox support some of the features. Read about CSS3 on CSS3.info, or use Google to find something about it.

The Theme, please!

You are free to use this theme for any purpose – both private and commercial. You’re allowed to remove the credit link in the footer, but please, please leave it there. It allows me continuing creating free themes.

DownloadDemo

Features

• Uses HTML5 and CSS3
• Awesome design with a hot pink color!
• Fully working Ajax PHP contact form
• Modernizr for enabling of HTML5 elements & feature detects
• Respond.js – a lightweight polyfill for min/max-width CSS3 Media Queries
• Uses Droid Serif, loaded from Google Fonts, for the headings
• IE6 & IE7 warning (can easily be edited to IE6 only or removed)
• Free to use! (: – It’s released under New BSD License. The license is included in license.txt

The theme has been tested in all major browsers and it’s awesome! It looks a bit funny in IE6 and IE7, but who cares?

Any comments/suggestions are much appreciated

Other versions of the theme

The theme is available as both WordPress and Blogger theme as well

• Download WordPress version by Tyler Longren
• Download Blogger version by Rethnaraj Rambabu (old version of the theme)

Update March 25, 2010

• Dropdown menu support
• Cleaner and better code
• More CSS3 included

Update September 1, 2010

Rethnaraj Rambabu has converted into a Blogger template. Download it here.

Update September 6, 2010

Version 1.2 has been released. Code improvements and more CSS3. The theme it now released under New BSD License.
Read the full 1.2 update post

Update April 16, 2011

Tyler Longren has made a WordPress theme of this theme.
Download now at his website

Update May 19, 2011

Version 2.0 of the theme has been released! New design and major improvements. Click the link to read more.

javascript:(function(){var d=0;setInterval(function() {document.body.style['-webkit-transform']= 'rotate('+ d +'deg)';d+=1},10)}());

Da filen der indeholder kontaktformen er en HTML fil, skal den først laves til en PHP fil. Omdøb filen fra index.html til index.php

Indsæt følgende kode under <h3>Kontakt mig</h3>

<?php
// Hvis der er trykket på send knappen
if( isset($_POST['submit']) ) {

}
?>

Næsten alt vores PHP kode vil være inde mellem { og }, og vil først blive kørt når der bliver trykket på Send knappen.

Først skal vi skaffe informationer fra kontaktformen: Navn, Email og Besked

$navn = htmlspecialchars( $_POST['navn'] );
$email = htmlspecialchars( $_POST['email'] );
$besked = htmlspecialchars ( $_POST['besked'] );

Husk at koden skal være mellem { og }

Vi rykker videre med at skrive nogle informationer, der skal bruges for at kunne sende mailen. Skriv din email og det emne mailen skal have.

$adresse = ""; // Din email som mailen vil blive sendt til
$emne = "Emne her"; // Emnet som emailen skal have

$header = 'From: '. $email . "\r\n";

Nu skal vi have sendt den besked

if(!empty($_POST['navn']) && !empty($_POST['email']) && !empty($_POST['besked']) && filter_var($email,FILTER_VALIDATE_EMAIL) ) {

$sendt = mail($adresse, $emne, $besked, $header); // Send emailen

  if($sendt){
	echo '<p class="success">Din besked blev sendt.</p>'; // Succes besked
   } 

} else {
	echo '<p class="error">Der var en fejl med at sende beskeden. Tjek venligst alle felter.</p>'; // Fejl besked
}

Først tjekker vi om alle felter er udfyldt, og om emailen er gyldig. Hvis du vil læse mere om FILTER_VALIDATE_EMAIL, kan du læse Getting Clean With PHP på Net.tutsplus.com

Mail sender mailen, og hvis den er blevet sendt får brugeren en succes besked. Hvis en eller flere af felterne er tomme, får brugeren en fejlbesked.

Nu rykker vi videre til formen, hvor der skal gives fejlbeskeder. Erstat den gamle form med den nye

<p>
    <label for="navn">Navn</label>
    <input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />
    <?php
	// Hvis navn er tomt
	if(isset($_POST['submit']) && $navn == "") {
		echo '<span class="error" id="navn">Udfyld venligst navn</span>';
	}
	?>
</p>

<p>
    <label for="email">Email
    <input type="text" name="email" id="email" value="<?php if(isset($_POST['submit'])) { echo $email; } ?>" />
    <?php
	if(isset($_POST['submit']) && $email == "" ) {
		echo '<span class="error" id="email">Udfyld venligst email</span>';
	}
	// Valider email
	if(isset($_POST['submit']) && !filter_var($email,FILTER_VALIDATE_EMAIL) && $email != "") {
		echo '<span class="error" id="email">Udfyld venligst en gyldig email</span>';
	}
	?>
</p>
<p>
	<textarea name="besked" id="besked" rows="10" cols="30"><?php if(isset($_POST['submit'])) { echo $besked; } ?>
    <?php
	if(isset($_POST['submit']) && $besked == "") {
		echo '<span class="error" id="besked">Skriv venligst en besked</span>';
	}
	?>
</p>
<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>

Her er noget af koden forklaret bedre

<?php
// Hvis navn er tomt
if(isset($_POST['submit']) && $navn == "") {
	echo '<span class="error" id="navn">Udfyld venligst navn</span>';
}
?>

Hvis der er blevet trykket på Send knappen og navn feltet er tomt, vil der komme en fejlbesked

<input type="text" name="navn" id="navn" value="<?php if(isset($_POST['submit'])) { echo $navn; } ?>" />

Hvis der er blevet trykket på Send knappen vil navnet blive skrevet i input feltet, så brugeren er fri for at skrive det igen.

Det samme gælder for de andre. Dog er der også lidt email validering ved email feltet.

Download det samlet script, hvor der også er lidt ekstra CSS style og noget jQuery for at kunne lukke fejlbeskederne.

I denne tutorial vil jeg vise, hvordan du ret enkelt kan lave en pæn HTML/CSS kontaktform. Jeg vil bruge nogle nye CSS3 features, som runde hjørner og text shadow, såsom giver et ekstra wow i moderne browsers, men stadig er pæn i gamle browsere. Det er desværre ikke en funktionel form (endnu?), det er bare hvordan man koder designet til en.

Here er kontaktformen, som du vil lære at lave, og indbygningen af den.

Vi starter med en form

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" /> <!-- Måske iso-8859-1 -->
<title>Kontakt form</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form action="" id="kontaktform">

<h3>Kontakt mig</h3>

<p>
     <label for="navn">Navn</label>
    <input type="text" name="name" id="navn" value="" />
</p>

<p>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" value="" />
</p>

<p>
	<textarea name="besked" id="besked" rows="10" cols="30"></textarea>
</p>

<p>
	<input type="submit" name="submit" id="submit" value="Send" />
</p>

</form>

</body>
</html>

Opret så filen style.css i samme mappe som din kontaktform fil (hvis ikke bliver du nødt til at rette i html koden).
Først starter vi med en global reset CSS, som nulstiller margins og paddings på alle elementer. (:focus fjerner en grim blå outline border agtig ting i browsers som Firefox og Safari)

* { margin: 0; padding: 0;}
:focus { outline: none; }

Hvis du bruger denne form på en side hvor der er flere elementer, burde du ikke bruge *, men i stedet fx Eric Meyers Reset CSS

Før vi går videre, kan du downloade filerne (der er inkluderet billeder og PSD fil)

body, #kontaktform input, #kontaktform textarea {
	font: 16px Arial, Helvetica, sans-serif;
	color: #333;
}

#kontaktform {
	background: #ccc url(images/formgradient.png) repeat-x;
	border: 1px solid #aeaeae;
	margin: 50px auto 0; /* 50px fra toppen, 0 fra bunden og auto fra venstre og højre (center) */
	width: 420px; /* Bliver 500px med padding */
	padding: 40px 40px 0;
}

Først sætter vi alle skrifttyper til Arial i størrelse 16. Det næste er formen (husk vi gav formen id="kontaktform"). Vi sætter baggrunden til en gradient, men da den ikke er uendelig lang sætter vi også lige en baggrundsfarve

#kontaktform h3 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 30px;
}

#kontaktform p { margin-bottom: 30px; position: relative; overflow: hidden;}

#kontaktform label {
	float: left;
	font-size: 18px;
	height: 41px;
	line-height: 41px; /* Samme som højden, centrer teksten */
}

#kontaktform h3 er “Kontakt mig” overskriften. Alle elementerne i formen er wrappet ind i <p> tags, som vi sætter til margin-bottom: 30px; for at adskille dem fra hinanden. Vi sætter position: relative;, fordi vi senere sætter fejlbeskeden til position: absolute;.

Input felterne

Nu skal vi style input felterne. Da alle tekstfelterne har type="text", er det oplagt at style alle felterne med type="text" i stedet for at give felterne en class. For at style alle tekst input felterne bruger vi input[type=text]. Det virker godt nok ikke i IE6, men er det ikke ligemeget?

#kontaktform input[type="text"], #kontaktform input[type="email"] { float: right;} /* Alle inputfelter med typen text og email */
#kontaktform input[type="text"], #kontaktform textarea {
	background: #fff url(images/input.png) repeat-x;
	border: 1px solid #cbcbcb;
	color: #aeaeae;
	padding: 10px 5px;
}

#kontaktform input[type="text"]:hover, #kontaktform input[type="text"]:focus,
#kontaktform input[type="email"]:hover, #kontaktform input[type="email"]:focus,
#kontaktform textarea:hover, #kontaktform textarea:focus {
	border: 1px solid #aeaeae;
	color: #333;
}
#kontaktform input[type="text"], #kontaktform input[type="email"] { width: 333px; }
#kontaktform textarea { width: 408px; overflow: auto; } /* Overflow fjerner scrollbar i IE */

#kontaktform input[type="submit"] { /* Alle inputfelter med typen submit */
	background: #dedede url(images/submit.png) repeat-x;
	border: 1px solid #aeaeae;
	color: #000;
	font-weight: bold;
	font-size: 18px;
	padding: 10px 0;
	width: 175px;
	cursor: pointer;
}
#kontaktform input[type="submit"]:hover { border: 1px solid #949494; }

Læs mere om CSS selectors på Smashing Magazine

Fejl besked

Der skal selvfølgelig også være en fejlbesked. Vil ikke gå så meget i dybden med den.

span.error {
	background: #ffebe8;
	border: 1px solid #C00;
	font-size: 14px;
	position: absolute;
	padding: 5px;
	top: 7px; right: 10px;

       /* CSS3 */
	opacity: 0.75;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
         border-radius: 5px;
}

CSS3

Nu skal vi til det sjove, der kun virker i moderne browsers som Safari, Chrome og Firefox. Nemlig CSS3 features, som runde hjørner og tekst skygge.

Vi starter først med nogle runde hjørner på selve formen, input felterne og tekstfeltet

#kontaktform, #kontaktform input, #kontaktform textarea {
       border-radius: 10px;
}

Cool hva’? Lad os rykke videre til en næsten hvid tekst skygge på overskriften, labelsne og Send knappen.

#kontaktform h3, #kontaktform input#submit, #kontaktform label {
        text-shadow: #f6f5f5 1px 1px 1px; /* Tekst shadow i Safari, Chrome, Firefox og Opera10 */
}

Læs mere om CSS3:

• CSS3.info
• 5 Techniques to Acquaint You With CSS 3
• A Crash-Course in Advanced CSS3 Effects (video)

Download & Demo

Så var så alt for i dag. Har du spørgsmål eller kommentarer, er du velkommen til at skrive en kommentar, så skal jeg nok prøve at give dig svar.

Mastering WordPress Shortcodes

WordPress Configuration Tricks

Brug custom taxonomies til at lave en filmdatabase

Fjern en kategori fra dit RSS Feed

Gør dit tema oversættelse klar

Kender du andre gode WordPress tutorials du vil dele med os andre? Så skriv en kommentar med linket til den

Følg mig på Twitter ved at klikke her

Hvaa, er du også på Twitter? Så skriv da lige dit brugernavn så vi andre også kan følge dig.