If you see gramatical mistakes please leave me a comment so I can improve First off, take a look at the demo (or download): Lorem ipsum dolor sit amet, consectetur adipisci elit. Nunc ac ante sed ante imperdiet auctor. Fusce dignissim, magna eu feugiat tincidunt, nibh metus tincidunt augue, quis ullamcorper lorem pede a ante. Proin congue nisl a arcu. Donec et elit. Etiam ac eros nec metus molestie aliquam. Nullam vestibulum molestie magna. In varius quam in nulla luctus tristique. Nam et eros. Sed vitae sem a velit mattis dapibus. Sed blandit, sapien auctor adipiscing viverra, purus urna fermentum wisi, id luctus tortor augue et ligula. In quis libero. Sed urna arcu, malesuada in, adipiscing vitae, vehicula vitae, magna. Phasellus sit amet nisl at erat aliquet eleifend. Quisque malesuada porta elit. Lorem ipsum dolor sit amet, consectetur adipisci elit. Nunc ac ante sed ante imperdiet auctor. Fusce dignissim, magna eu feugiat tincidunt, nibh metus tincidunt augue, quis ullamcorper lorem pede a ante. Proin congue nisl a arcu. Donec et elit. Etiam ac eros nec metus molestie aliquam. Nullam vestibulum molestie magna. In varius quam in nulla luctus tristique. Nam et eros. Sed vitae ...

If you see gramatical mistakes please leave me a comment so I can improve 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 ...

This is my first article in english. If you find any errors please let me know so I can practice. Thank you! 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: 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 ...

You'll find an english summary below Ein Step-By-Step-Wizard, zu Deutsch "Schritt für Schritt Editor" ist eine Darstellungsmittel, um Benutzer Scritt für Schritt durch einen Prozess, zum Beispiel das ausfüllen eines langen Formulares, zu leiten. Der Prozess wird dadurch für den Benutzer vereinfacht und er erhält einen Überblick darüber, in welchen Teil des Prozesses er sich zu jedem gegebenen Zeitpunkt befindet.   Besonders praktisch wird ein solcher Step-By-Step-Wizard, wenn er ohne Seitenreload funktioniert, also zum Beispiel in JavaScript implementiert ist. Das hier vorgestellte Script basiert auf dem JavaScript Framework jQuery und erstellt aus einer beliebigen Anzahl Elemente einen "Schritt für Schritt Editor".   Diesmal agiert der ganze Blog-Eintrag als Demonstration des Scriptes. Das ist der erste Schritt des Step-By-Step-Wizards. Zum nächsten kommst du über die Navigation oben rechts. Im Grunde funktioniert das Script, indem du definierst, welches Element zu einem solchen Wizard umgeformt werden soll. In diesem Beispiel handelt es sich um einige DIV's mit der Klasse "stepByStepWizard":Text...Natürlich können auch einfach alle Paragraphen, Tabellen, Bilder o.Ä umgeformt werden. Wie gesagt, das Script basiert auf jQuery, ist also in JavaScript geschrieben. Jeder Benutzer ist in der Lage in seinem Browser JavaScript auszuschalten, und ca. 12% tun dies auch. Auf das Script hat das aber nur insofern Auswirkungen, als es ...

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. Mindestens 6 Zeichen. Und sei kreativ! 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 Neben dem jQuery Framework das eigentliche Passwortstärke-Script Ein paar Zeilen CSS Eine einzige Grafik (z.B der oben verwendete Graph)   Installation HTML: Mindestens 6 Zeichen. Und sei kreativ! JavaScript: 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.

Google Adsense ist den meisten wohl ein Begriff. Das System erlaubt es Webmastern, von Google verwaltete Werbung auf Ihrer Webseite einzubinden um im besten Fall Geld zu verdienen. 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 ...