First off, take a look at the demo (or download):

 
 
So, how to do this?
It’s easy, all you need is jQuery, a single PHP file and a font (*.ttf / *.otf). First off, we prepare the markup. As we want the whole thing to be as unobtrusive as possible, the markup we’re going to start with is very simple:

    <div class="accordion" title="Panel 1">Text</div>
    <div class="accordion" title="Panel 2">Text</div>
    <div class="accordion" title="Panel 3">Text</div>
    <div class="accordion currentAccordionPanel" title="Panel 4">Text</div>
    <div class="clearBoth"></div>

And that’s our accordion as it’s interpreted by the browser:

Doesn’t look too sexy… but adding some CSS may already do the job:

.accordion {
	font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color: #EAF3FA;
	border: 1px solid #EAF3FA;
	padding: 3px;
	margin: 0px;
	float: left;
	width: 200px;
	height: 300px;
	overflow: auto;
}
 
.accordionTitle { /* This one will be generated by the jQuery part */
	background-color: #72A8CF;
	color:#FFFFFF;
	border: 1px solid #72A8CF;
	border-right: 1px solid #FFFFFF;
	cursor: pointer;
	padding: 3px;
	margin: 0px;
	float: left;
	height: 301px;
	overflow: auto;
}
 
.clearBoth { clear: both; }

Hey, guess what? - We’re done with the markup! Now a few lines of jQuery magic and the whole thing is ready to use
 

jQuery(document).ready(function() {
	var elementToTransform = ".accordion" // The element we transform into an accordion
	var accordionTitleCass = "accordionTitle";
	var currentClass = ".currentAccordionPanel";
	var textRotatePath = "path/to/rotateText.php";
	var bgColor = "72A8CF";
	var fontColor = "FFFFFF";
 
	jQuery(elementToTransform).each(function() {
		jQuery(this).before('<div class="'+accordionTitleCass+'"><img src="'+textRotatePath+'?text='+jQuery(this).attr("title")+'&bgColor='+bgColor+'&fontColor='+fontColor+'" alt="'+jQuery(this).attr("title")+'" /></div>');
	});
	jQuery(elementToTransform).hide();
	jQuery(currentClass).show();
	disableAccordion = false;
	jQuery("."+accordionTitleCass).click(function() {
		if(disableAccordion != true) {
			disableAccordion = true;
			jQuery(elementToTransform+":visible").hide(400);
			jQuery(this).next(elementToTransform).show(400, function() {
				disableAccordion = false;
			});
		}
	})
});

 
What exactly does the code do?

	var elementToTransform = ".accordion" // The element we transform into an accordion
	var accordionTitleCass = "accordionTitle";
	var currentClass = ".currentAccordionPanel";
	var textRotatePath = "path/to/rotateText.php";
	var bgColor = "72A8CF";
	var fontColor = "FFFFFF";

Here we define some variables. You’re allowed to change their values. If you change the first two, don’t forget to change the CSS too The last three are used for a PHP script that generates you a 90 degrees rotated text. The first of them is self-explanatory, the last two also - but they should match with the CSS values for “background-color” and “color” (from “accordionTitleCass “, of course).
 

jQuery(elementToTransform).each(function() {
		jQuery(this).before('<div class="'+accordionTitleCass+'"><img src="'+textRotatePath+'?text='+jQuery(this).attr("title")+'&bgColor='+bgColor+'&fontColor='+fontColor+'" alt="'+jQuery(this).attr("title")+'" /></div>');
	});

This one ads the accordion titles to your accordion. (in the example those are the dark blue strips). And it takes the title attribute from each of your accordion panels and converts it into a 90 degrees rotated image containing your text. Nice, isn’t it?
 

	jQuery(elementToTransform).hide();
	jQuery(currentClass).show();

We’re hiding all panels and then showing the one that has the “current” class. If you don’t wan’t to show any of the panels as default, just don’t add such a “current” class to none of the panels.
 
Ther rest of the code just enables the accordion to slide it’s panels and isn’t worth explaining. So yup, we’ve done it! Our accordion is ready to use
Here’s how it looks:

 
 
You can download all the files here. Have fun!

Did you ever created a website that validated according to W3C, placed a “valid” Icon / Text on your site and after some days / weeks / months you had to notice that the site became invalid? To me this happens pretty often, mainly when I have to create a CMS based website for a customer. Everything validates perfectly until the customer begins to mess it up with his own HTML. Of course the “valid” Icon then loses his usefulness.

For a new project I was looking out for a script that would validate the current site in the background and only show a “valid” Icon if the current site passed validation. So I searched for such a solution but didn’t find anything useful and ended up writing it myself.
I came up with a jQuery Plugin that does exactly what I wanted it to do: it validates the current site (using the online W3C Validator), checks the result and shows then some HTML (”valid” Icon, Text or whatever) for both possible results (valid, invalid).

The Plugin consists of a JavaScript file (what you would call the ‘plugin’) and a PHP file. Latter does the validation (URL file access can be disabled, it’s done with cURL and should work for everyone).
Here’s how you use the plugin:

jQuery("#validHTML").w3cValidator({
	parserLocation: "path/to/w3cValidator.php",
	URL_isValid: '<a class="standardLink" href="http://validator.w3.org/check?uri=referer">valid HTML</a>', /* optional */
	URL_isInvalid: '' /* optional */
});

And here’s a demo (take a look at your Firebug console):
This Blog has:
 
Normally you wouldn’t tell your visitors that the current site has some errors
To see a site that validates you can go to the this project of mine and take a look at the footer (and here a specific page from the same project that doesn’t validate).
 
Well, I think the plugin is pretty self-explanatory, so I won’t write a novel about it. If you think you could use it somewhere, just download the two plugin files, upload them to your server, insert the javascript file into you markup

<script style="text/javascript" src="path/to/jquery.w3cValidator.js"></script>

call the plugin

jQuery("#validHTML").w3cValidator({
	parserLocation: "path/to/w3cValidator.php",
	URL_isValid: '<a class="standardLink" href="http://validator.w3.org/check?uri=referer">valid HTML</a>', /* optional */
	URL_isInvalid: '' /* optional */
});

and you’re done! (But don’t forget that it is a Plugin and you’ll need jQuery to use it.)

If you want change the output just stick with “URL_isValid” and “URL_isInvalid” which are allowed to contain any HTML.
 
 
 
Changelog:
13/Aug/2008 - Minor change to the PHP file. added urlencode();

That said, let’s come to the article itself. It’s all about a handy tooltip script based on the famous jQuery framework. Below you’ll find some examples of what effect can be achieved using it:

Basic tooltip
Tooltip with multiple lines
Tooltip with title
Forgot to define the tooltip text (nothing should happen)
Tooltip displaying an image (HTML)
Tooltip with some basic HTML (only inline elements)
SPAN element with a tooltip

I know that there are many tooltip scripts out there, but I couldn’t find any that would fit my needs, so I wrote my own. It’s easy to use and implemented within seconds. All you have to do to get it to work is to insert the JavaScript file into your site and define some CSS (feel free to change it’s look and feel)

To be inserted into your site:

<script src="path/to/jqueryTooltip.js" type="text/javascript"><!--mce:1--></script>

CSS:

/* Tooltips */
#tooltip {
	position: absolute;
	padding: 4px;
	color: #FFF;
	font-size: 11px;
	display: none;
	text-align: left;
	background-color: #000;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
}
 
.tooltipTitle {
	font-weight: bold;
	color: #CEE1EF;
}

You’re already done! Now just give any element you want to show a tooltip the class “tooltip” (this is the default class, change it if you wish in the JavaScript file) and put your tooltip text into the title attribute. Below you’ll find different examples on how to use the script:

Basic tooltip:

<a class="tooltip" title="visit google.com" href="http://www.google.com">Google</a>

» Google

Tooltip with multiple lines:
You can force a line wrap by writing a “::”

<a class="tooltip" title="visit google.com::and find what you're looking for" href="http://www.google.com">Google</a>

» Google

Tooltip with title
You can define the title by using a BB-Code like Syntax: [!]Text[/!]

<a class="tooltip" title="[!]Important[/!]visit google.com::and find what you're looking for" href="http://www.google.com">Google</a>

» Google

Tooltip showing an image
If you want to show an image just use HTML, but replace the “<” and “>” by “[" and "]”

<a class="tooltip" title="[img src='http://the-godking.com/wp-content/uploads/2008/08/jquerytooltip.jpg' /]" href="http://www.google.com">Google</a>

» Google

Tooltip showing basic HTML
If you want to use HTML within you tooltip, just use it, but replace “<” and “>” by “[" and "]“. Please note, that only inline elements are supported.

<a class="tooltip" style="text-decoration:underline;" title="[!]Important[/!]visit [strong]google.com[/strong]::and [em]find what you're [span style=" href="http://www.google.com">Google</a>

» Google

Tooltip on any element:
You can put tooltips on (almost) any element you wish.

<span class="tooltip" title="Google is a search engine">Google</span>

» Google

Feel free to use the script on your website. If you have any questions concerning it just ask (please use the comment form below). Have fun!

<div class="stepByStepWizard">Text...</div>

<script src="path/to/stepByStepWizard.js" type="text/javascript"></script>

/************************************************
*	Step by step wizard			*
************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.showCurrentStepNmbrDIV {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight: bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 90%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard {
	padding: 10px;
	border-bottom: 1px solid #999;
	background-color: #EAF3FA;
}
 
.stepByStepWizardNavigation {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight:  bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 10%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard_goto {
	width: 20px;
}
 
.showNavigationLinksForwardDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}
 
.showNavigationLinksBackDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}

 
 
English summary:
The script above shows a step by step wizard written with jQuery. It’s absolute unobtrusive (try it disabling JavaScript) and fully customizable (via CSS). You can use the script on you own site. Note that the script itself actually is written in english, so editing it won’t be big deal.
 
If you chose to run the script on your site you need to install it. That’s done in three simple steps:
First of all you need to insert the above JavaScript file into you website:

<script src="path/to/stepByStepWizard.js" type="text/javascript"></script>

In a second step you’re going to build the markup for your wizard. You can convert anything into such a wizard, but in this example we’ll stick with some DIV’s + a given class (stepByStepWizard). If you want to construct a wizard with three steps, all you have to write is:

<div class="stepByStepWizard">Step 1</div>
<div class="stepByStepWizard">Step 2</div>
<div class="stepByStepWizard">Step 3</div>

 
The last thing left to do ist to define some CSS. We’ll use the CSS for the wizard above, but you can modify it to look like the rest of your site:

/************************************************
*	Step by step wizard			*
************************************************/
.floatLeft { float: left; }
.floatRight { float: right; }
.clearBoth { clear: both; }
.showCurrentStepNmbrDIV {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight: bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 90%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard {
	padding: 10px;
	border-bottom: 1px solid #999;
	background-color: #EAF3FA;
}
 
.stepByStepWizardNavigation {
	color: #000000;
	border-bottom: 3px double #999;
	font-weight:  bold;
	font-size: 13px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 5px 0px;
	width: 10%;
	height: 14px;
	background-color: #CEE1EF;
	border-top: 1px solid #999;
}
 
.stepByStepWizard_goto {
	width: 20px;
}
 
.showNavigationLinksForwardDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}
 
.showNavigationLinksBackDIV {
	cursor: pointer;
	float: right;
	width: 15px;
}

You’re done! If you wish to change standard texts, starting step or which element should be transformed, open the script and edit the section “User specific variables”. If you encounter any problems or have a question just leave a comment.

Ein Bild sagt bekanntlich mehr als tausend Worte, also wozu lange um den heissen Brei schreiben; mache dir anhand der kleinen Demo unterhalb dieses Textes einen ersten Eindruck des Scriptes.

Alle technisch forcierten User sind angehalten sich im Quelltext des Blogs an den entsprechenden Dateien zu bedienen. Das Script kann frei verwendet werden, Nennung des Autors ist nicht erforderlich. Alle anderen mögen weiterlesen.
 
Voraussetzungen
stellt der Passwortstärke-Indikator beinahe keine. Einzig das JavaScript Framework jQuery wird benötigt, da das Script auf dessen Basis erstellt ist.
 
Erforderliche Dateien

1. Neben dem jQuery Framework das eigentliche Passwortstärke-Script
2. Ein paar Zeilen CSS
3. Eine einzige Grafik (z.B der oben verwendete Graph)

 
Installation
HTML:

<input id="password_r" class="textInput" style="width: 282px;" name="myInput" type="password" />
<div id="result">
<div class="graph"><span id="gesamt" class="bar minifont" style="background: transparent none repeat scroll 0% 0%; width: 100%;">Mindestens 6 Zeichen. Und sei kreativ!</span></div>
</div>

JavaScript:

<script src="wp-content/demo/passwordStrength/passwordStrength.js" type="text/javascript"></script> <script type="text/javascript"><!--
jQuery(document).ready(function() {
$('#password_r').keyup(function(){ $('#result').html(passwordStrength($('#password_r').val())) });
});
// --></script>

CSS:

.minifont {
	font-size: 10px;
	color: #000;
	line-height: 1em;
}
 
/* PasswordStrength */
.graph { 
	position: relative; /* IE */
	width: 100%; 
	border: 1px solid #FFF; 
	width: 278px;
	padding: 2px;
}
 
.graph .bar { 
	display: block;
	position: relative;
	background-color: #fff;
	background: url(path/to/bar.jpg) repeat-y;
	opacity: 0.70;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	text-align: left; 
	height: 11px; 
}
 
.graph .bar span { 
	position: absolute;
	left: 1em; 
}

 
Nutzungsbedingungen
Es gibt keine. Mach mit dem Script was immer du willst; verwende, verändere und verbreite es, wie dir beliebt. Nennung des Autors ist nicht nötig.

Wer sich bereits einmal mit AdSense beschäftigt hat, der hat wahrscheinlich festgestellt, dass nur eine sehr beschränkte Anzahl verschiedener Bannergrössen zur Verfügung steht. Oftmals wird aber irgend eine Grösse vorausgesetzt, die nicht angeboten wird., zum Beispiel 175 x 265 Pixel. Ein klein wenig CSS kann hier Abhilfe schaffen und ermöglicht komplett individuelle Anzeigeblöcke!

.bannerBox {
	height: 265px;
	width: 175px;
	overflow: hidden;
}

Wie man am Beispiel zur Linken dieses Textes sehen kann, funktioniert der kleine CSS-Trick einwandfrei. Es handelt sich in Wirklichkeit um einen Banner der Grösse 160 x 600 Pixel, der im Grunde nach unten abgeschnitten wird. Dazu wird in einem ersten Schritt eine Element gebildet, in dem der gewüsnchte Anzeigeblockspäter angezeigt werden soll. (siehe obiges CSS). Diesem Element werden die Masse des gewünschten Anzeigeblocks gegeben z.B 175 x 265 Pixel) und die CSS-Eigenschaft “overflow:hidden;” gesetzt.

Diese Eigenschaft sorgt dafür, dass der überschüssige Teil des Anzeigeblockes, also der Teil der nicht mehr in die dafür vorgesehene Box hineinpasst, ausgeblendet wird. Wie man sehen kann behindert dies den sichtbaren Teil des Anzeigeblockes nicht in seiner Funktionalität, es braucht sich also niemand um seine Einnahmen zu fürchten.

Obwohl in diesem Beispiel nur eine Grösse (175 x 265 Pixel) behandelt wird, funktioniert es naturgemäss mit ziemlich allen Grössen.