Examples

1. Example 1 - Standard without any options
2. Example 2 - with Thumbnail navigation
3. Example 3 - Clean without any navigations
4. Example 4 - left Descriptiontext and 10 Elements
5. Example 5 - all options used

Features

• easy to use and to customize via options
• different effects
• optional number or image navigation
• optional next/prev navigation
• optional Image Caption Text
• You can link every image if you want
• use as lot images/Elements you want
• small with just 5kb of size

Options

Here is the complete option Reference with standard Values and possible values

HTML Structure

Example Structure with 3 Elements:

<ul id="slider">
<li><a href="optional_link.html"><img src="myimage1"/></a><div><h2>Title 1</h2><p>Image Caption Text 1</p></div></li>
<li><a href="optional_link2.html"><img src="myimage2"/></a><div><h2>Title 2</h2><p>Image Caption Text 2</p></div></li>
<li><a href="optional_link3.html"><img src="myimage3"/></a><div><h2>Title 3</h2><p>Image Caption Text 3</p></div></li>
</ul>

Browser Support

Works perfect with: Firefox, Chrome, Opera, Safari, IE8, IE9
Not yet testet with IE6 and IE7 (could you? Thanks.)

Known Issues

- You cant use multiple Sliders on one page at the moment (there is a small bug (problem with multiple setInterval Methods - need HELP!))

Ideas for next Release?

Please just leave a comment if you're missing a feature.

Download

Feel free to use and download this Plugin. You can use it for privat and commercial projects.
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.

Example

Check out the Example | Beispiel ansehen
Works with: IE6, IE7, IE8, IE9, Firefox, Chrome, Safari and Opera

The HTML Part

<div id="newsbox">
<a href="#link1" title="Rafael Nadal" class="b1"><span><strong>Rafael Nadal</strong>Der Sandplatzkönig und die Nr.1 der Welt!</span><img src="box1.jpg" width="256" height="192" alt=""/></a>
<a href="#link2" title="Novak Djokovic" class="b2"><span><strong>Novak Djokovic</strong>Der Serbe mit einer der längsten Siegesserien der Open Era.</span><img src="box2.jpg" width="256" height="192" alt=""/></a>
<a href="#link3" title="Roger Federer" class="b3"><span><strong>Roger Federer</strong>16. Grand Slam Siege und der wohl beste aller Zeiten.</span><img src="box3.jpg" width="256" height="192" alt=""/></a>
</div>

The CSS Part

#newsbox {width:500px; height:192px; overflow:hidden; position:relative;  background:url(box0.jpg) no-repeat;  box-shadow:1px 2px 2px 2px #666;  -webkit-box-shadow:1px 2px 2px 2px #666; -moz-border-radius:15px; margin:30px auto;}
#newsbox a {outline:none; text-decoration:none;}
#newsbox a span {position:absolute; z-index:1; width:214px; height:55px;  padding:5px 15px; color:#333; left:256px; background:#f5f5f5; background:-moz-linear-gradient(top,#f5f5f5,#c0c0c0); background:-webkit-linear-gradient(top,#f5f5f5,#c0c0c0);}
#newsbox a strong {text-transform:uppercase; display:block;}
#newsbox a.b1 span {margin-top:0px;}
#newsbox a.b2 span {margin-top:65px;}
#newsbox a.b3 span {margin-top:130px;}
#newsbox a img {display:none; position:absolute; border:none;}
#newsbox a:hover img, #newsbox a:focus img {display:block;}
#newsbox a:hover span, #newsbox a:focus span {background:#d60000; background:-moz-linear-gradient(top,#d60000,#970000); background:-webkit-linear-gradient(top,#d60000,#970000); left:230px; width:222px; padding:5px 25px 5px 25px; color:#fff; border-top-left-radius:1500px; border-bottom-left-radius:1500px;}

Download the CSS3 Easy Newsbox Example

You can use the CSS3 Easy Newsbox Script wherever you want. Have fun!

Live Ansicht

Anleitung

Zuerst muss man eine neue Static FBML Anwendung hinzufügen. Das ganze findet man als Administrator seiner Facebook Seite unter "Seite bearbeiten" und dann auf "Anwendungen". Hier sollte dann Static FBML stehen - falls nicht dann auf "Weitere Anwendungen durchstöbern" klicken und nach Static FBML suchen. Wenn man die Anwendung hinzugefügt hat, stehen einem 2 Eingabefelder zur Verfügung: Titel des Feldes und FBML.
Im ersten Feld schreiben wir den Namen hinein den der Tab haben soll also in unserem Fall am Besten "Einladen" - ins große FBML Feld kommt unser Code hinein:

<fb:request-form method="get" type="Kollermedia.at" invite="true" content="Werde Freund von Kollermedia.at<fb:req-choice url='http://www.facebook.com/kollermedia ' label='GO' /> ">
<fb:multi-friend-selector actiontext="Erzähle deinen Freunden von Kollermedia.at!" rows="3" showborder="true" cols="3"/>
</fb:request-form>

Am einfachsten ihr kopiert euch die 3 Zeilen Code hinein und ändert jeden Kollermedia.at Wert auf euren Facebook Seiten Namen. Wichtig ist nur, dass die URL stimmt bei req-choice url - in meinem Fall ist die URL der Facebookseite http://www.facebook.com/Kollermedia

Danach auf speichern klicken & fertig ist die Einladungsseite. Viel Spass damit!

Gehen wir mal davon aus, das wir eine simple XHTML 1.0 stricte Website umsetzen wollen, mit einer klassischen Struktur die Header, Navigation, Suche, Content, Sidebar und Footer enthält.

Accessibility Checkliste

• html Element benötigt das lang attribute (zb: lang="de")
• Title Element aussagekräftig und für jede Seite individuell gestalten
• mind. 4 meta angaben machen - language (meta name="language" content="de" ), description, keywords und charset
• Getrennte CSS Files für Screen & Print einbinden
• Favicon einbinden (link rel="shortcut icon" href="favicon.ico")
• Die Hauptstruktur mit id's statt mit class umsetzen (id="content", id="navigation", id="suche")
• Skip Navigation einbauen (gleich nach dem body) die bei Focus zu sehen ist mit Sprungmarken zu #content, #navigation, #suche
• Navigationen mittels ul Listen definieren
• Accesskeys für Hauptnavigationspunkte und verlinktes Logo einfügen
• Jeder "a link" benötigt einen aussagekräftigen title
• Führen mehrere Links zur selben URL, sollte der Title ident sein
• Das Attribut target="_blank" ist nicht erlaubt in strict
• Jedes Bild benötigt eine aussagekräftige alt Beschreibung sowie width und height angabe
• Form Element einen title geben und KEIN name attribut (nicht xhtml strict valid)
• jedes Input feld benötigt zwingend ein label element, das kann aber gern mit css ausgeblendet werden
• jedes text input feld benötigt ein value attribut (kann auch ruhig leer sein)
• jedem Input feld einen title geben
• Setzt man Fieldsets ein, ist das element legend pflicht
• Am Besten nur eine h1 Überschrift definieren
• Mehrere h2, h3 Überschriften sind erlaubt - Reihenfolge beachten (kein h2 vor h1)
• Den Bereichen Header, Suche, Navigation und Content ein Aria Landmark role attribut geben - header bekommt role="banner", suche bekommt role="search", Navigation bekommt role="navigation", content bekommt role="main"

Im Prinzip reicht das für unsere simple Seite. Wenn der Quelltext an sich noch schön umgesetzt ist, wird die Seite durch sämtliche Tests kommen und auch ein WAI-AAA erhalten. Bei der XHTML Validierung erhält man für die role attribute eine Fehlermeldung, aber nur da der Validator das Element noch nicht kennt/berücksichtigt.

Hier noch ein paar unterstützende Code Segmente die euch vielleicht helfen:

Doctype XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Im HTML Tag darf das lang Attribut nicht vergessen werden.

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">

Bei den Metatags genügt es prinzipiell 4 Angaben zu machen, und zwar den charset, den language meta tag sowie description und keywords

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="de" />
<meta name="description" content="Descriptiontext" />
<meta name="keywords" content="keyword1, keyword2, keyword3" />

CSS und Favicon Angaben

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="shortcut icon" href="favicon.ico" />

Skip Navigation, gleich nach dem body - die via focus erscheint:

<ul id="nav_skip">
<li><a href="#content" title="Zum Hauptinhalt der Seite springen [accesskey i]" accesskey="i">Zum Inhalt springen</a></li>
<li><a href="#navigation" title="Zur Hauptnavigation der Seite springen [accesskey n]" accesskey="n">Zur Navigation springen</a></li>
<li><a href="#suche" title="Zur Volltextsuche springen [accesskey s]" accesskey="s">Zur Suche springen</a></li>
</ul>

Beispiel CSS für die Skip Navigation

#nav_skip {list-style:none; position:absolute;}
#nav_skip li a {position:absolute; left:-1000px; width:1px; height:1px; overflow:hidden;}
#nav_skip li a:focus, #nav_skip li a:active {left:0; top:0; width:140px; display:block; height:auto; overflow:visible;}

Beispiel einer simplen Textsuche

<form action="" method="get" id="suche" role="search" title="Volltextsuche">
<fieldset>
<legend>Volltextsuche</legend>
<label for="suchbegriff">Suchbegriff</label>
<input type="text" name="suchbegriff" id="suchbegriff" title="Bitte geben Sie hier Ihren Suchbegriff ein" value=""/>
<input type="submit" name="submit" id="submit" value="Suche" title="Suche starten"/>
</fieldset>
</form>

Korrekter link tag

<a href="http://www.seite.at/artikel/239" title="zum Artikel - Wie sollte ein richtiger title aussehen">den ganzen Artikel lesen</a>

Korrekter img tag

<img src="img/auto_mg_135.jpg" width="90" height="90"  alt="Silbernes Auto der Marke MG - Baujahr 2005" />

Weiterführende Links

Hier noch ein paar nützliche Links

W3C Validation Service
W3C CSS Validation Service
Section 508 und WAI Validation
WAVE - Web Accessibility evaluation Tool
WAI-ARIA 1.0 Working Draft

CSS3 & jQuery Polaroid Gallery Example

Check out the Example | Beispiel ansehen

Example

Check out the Example | Beispiel ansehen
Works with: IE6, IE7, IE8, Latest Firefox, Chrome, Safari and Opera Versions

Easy CSS Bar Chart - Horizontal Style

HTML

<dl class="horizontal">
<dt>Avatar</dt>
<dd><span style="width:100%;">$ 2.740 Mio.</span></dd>
<dt>Titanic</dt>
<dd><span style="width:80%;">$ 1.843 Mio.</span></dd>
<dt>Lord of the Rings</dt>
<dd><span style="width:43%;">$ 1.119 Mio.</span></dd>
<dt>Pirates of the Caribbean</dt>
<dd><span style="width:40%;">$ 1.066 Mio.</span></dd>
<dt>Alice in Wonderland</dt>
<dd><span style="width:38%;">$ 1.021 Mio.</span></dd>
<dt>The Dark Knight</dt>
<dd><span style="width:35%;">$ 1.00 Mio.</span></dd>
</dl>

CSS

dl.horizontal {font-size:12px; font-family:Arial; width:500px;}
dl.horizontal dt {float:left; width:150px; clear:both; margin:0 0 5px 0; padding:3px;}
dl.horizontal dd {float:left; width:300px; border:1px solid #aaaaaa; margin:0 0 5px 0; padding:2px; -moz-box-shadow: 1px  1px 3px #aaaaaa;}
dl.horizontal dd span {background:#1770d3; display:block; color:#ffffff; text-indent:4px;}

Easy CSS Bar Chart - Vertical Style

HTML

<dl class="vertical">
<dt>Avatar</dt>
<dd><span style="height:100%;">$ 2.740 Mio.</span></dd>
<dt>Titanic</dt>
<dd><span style="height:80%;">$ 1.843 Mio.</span></dd>
<dt>Lord of the Rings</dt>
<dd><span style="height:43%;">$ 1.119 Mio.</span></dd>
<dt>Pirates of the Caribbean</dt>
<dd><span style="height:40%;">$ 1.066 Mio.</span></dd>
<dt>Alice in Wonderland</dt>
<dd><span style="height:38%;">$ 1.021 Mio.</span></dd>
<dt>The Dark Knight</dt>
<dd><span style="height:35%;">$ 1.00 Mio.</span></dd>
</dl>

CSS

dl.vertical {font-size:12px; font-family:Arial;}
dl.vertical dt {float:left; width:60px; margin:260px 0 0 0; text-align:center;}
dl.vertical dd {float:left; width:60px; height:200px; margin:50px 15px 0 -60px; padding:0px 2px 0px 2px; border:1px solid #aaaaaa;  position:relative; -moz-box-shadow: 1px  1px 3px #aaaaaa;}
dl.vertical dd span {width:60px; display:block; position:absolute; bottom:0px; background:#d3179c; color:#ffffff; text-align:center;

Der einzige Unterschied zwischen Horizontal & Vertical im HTML ist, dass bei der Horizontalen Version der span eine Breite bekommt und bei der vertikalen Version eine Höhe.

Download Horizontal & Vertical Version

Facebook Activity Feed von Kollermedia.at

Facebook Activity Feed von Facebok.com

Beispiele

Users: https://graph.facebook.com/btaylor (Bret Taylor)
Seiten: https://graph.facebook.com/cocacola (Coca-Cola page)
Events: https://graph.facebook.com/251906384206 (Garage Austin)
Gruppen: https://graph.facebook.com/2204501798 (Emacs Gruppe)
Anwendungen: https://graph.facebook.com/2439131959 (Graffiti applikation)
Statusmeldungen: https://graph.facebook.com/367501354973
Photos: https://graph.facebook.com/98423808305 (Photo der Coca-Cola Seite)
Photo albums: https://graph.facebook.com/99394368305 (Coca-Cola's wall photos)
Videos: https://graph.facebook.com/614004947048
Notes: https://graph.facebook.com/122788341354

Hier zum Beispiel alle Infos über mich

Friends: https://graph.facebook.com/juergen.koller/friends
News feed: https://graph.facebook.com/juergen.koller/home
Profile feed (Wall): https://graph.facebook.com/juergen.koller/feed
Likes: https://graph.facebook.com/juergen.koller/likes
Movies: https://graph.facebook.com/juergen.koller/movies
Books: https://graph.facebook.com/juergen.koller/books
Notes: https://graph.facebook.com/juergen.koller/notes
Photos: https://graph.facebook.com/juergen.koller/photos
Videos: https://graph.facebook.com/juergen.koller/videos
Events: https://graph.facebook.com/juergen.koller/events
Groups: https://graph.facebook.com/juergen.koller/groups

Alle detaillierten Informationen darüber gibts auf der Facebook API Seite

Demo

Check out the live demo

Download

Funktionalitäten

• Tags können via "," oder "enter" eingetragen werden
• Doppelte Tags werden automatisch ignoriert und sind nicht möglich
• Leere Tags sind nicht möglich
• Entfernen der Tags mittels schließen Link (x)
• Drag & Drop (optional) zum sortieren der Tags (Values der tags werden auch mitsortiert)
• Livesearch Funktionalität zum einfachen suchen von tags
• 5kb klein bzw. 3kb packed

HTML

Im HTML muss lediglich eine Zeile definiert werden:

<div id="my_tags"></div>

Javascripts

Im Javascript Teil muss zuerst das easytags plugin aufgerufen werden, danach (optional) das drag&drop plugin.

<script type="text/javascript">
$().ready(function() {
$("#my_tags").easytags();  //easytags plugin
$("#my_tags #tags ul").dragsort({dragEnd: function() {$.easytags.reorder_tags();}}); //for drag&drop support
});
</script>

Plugin Options

Beim Plugin Aufruf können noch folgende Optionen definiert werden:

Example:

$("#my_tags").easytags({starttags:"kollermedia, jquery, tags", fieldname:"all_tags"});

Plugin - HTML Structure

Das Plugin erzeugt folgende HTML Struktur, die dann natürlich via CSS beliebig optisch angepasst werden kann.

<div id="my_tags">
<input style="display: none;" name="all_tags" value="" type="text" id="all_tags" />
<div id="tags">
<ul><li>tag example</li><li>tag example2</li></ul>
<input type="text" id="tag_new" />
</div>
<div id="tagsearch">&nbsp;</div>
</div>

Livesearch PHP Example Code

Wieviele Tags bei der Livesuche ausgegeben werden sollen, kann via PHP bzw. der MySQL Abfrage beliebig angegeben werden. Hier ein Beispielcode für das PHP File:

$searchtag = $_GET["searchtag"]; //Get the search string
//Database Connection
$dbconnect = mysql_connect(localhost,"db_username","db_password") or die ("keine Verbindung möglich. Benutzername oder Passwort sind falsch");
mysql_select_db("db_name") or die ("Die Datenbank existiert nicht.");
//search in Database and output the result
$query = "SELECT tag FROM tablename WHERE tag LIKE '%$searchtag%' LIMIT 10";
$result = mysql_query($query);
while($row = mysql_fetch_object($result))
{
echo " <a href=\"#\">".$row->tag."</a>";
}

Works with...

• IE 8
• Firefox
• Safari
• Chrome
• Opera

Download

Example (Safari & Chrome only)

Check out the CSS3 Car Animation

HTML Code

<a href=""><strong>HOVER ME TO START THE CAR</strong>
<img src="car.jpg" width="300" height="164" /> //car image
<img src="gear.png" width="60" height="60" /> //gear image
<img src="gear.png" width="60" height="60" /> //gear image
</a>

Important CSS Parts

/* Define Animation Speed */
img{
-webkit-transition: all 3.1s ease-in-out;
-moz-transition: all 3.1s ease-in-out;
transition: all 3.1s ease-in-out;
}
/* Car image Animation */
a:hover img:nth-of-type(1) {
-webkit-transform: translate(700px,0px) rotate(0deg);
-moz-transform: translate(700px,0px) rotate(0deg);
transform: translate(700px,0px) rotate(0deg);
}
/* Gear images Animation */
a:hover img {
-webkit-transform: translate(700px,0px) rotate(1000deg);
-moz-transform: translate(700px,0px) rotate(1000deg);
transform: translate(700px,0px) rotate(1000deg);
}