zur Navigation

olaf-bosch.de

Von mir erstellte Vorlagen, PHP-Scripte und Ähnliches

Ihr findet hier einige Demoseiten jeweils mit einem Link zur Quelle, eine kurze Beschreibung und ein Link zur entsprechenden Seite.

Dynamischer Scrollbereich – dynamic ScrollArea

Ein Kunde brauchte ein Layout welches einen fixen Header und Footer sowie dazwischen einen scrollbaren Bereich enthielt. Dies ist mit sehr viel Verbiegungen auch mit reinem CSS möglich, hat aber den Nachteil, dass wenn die Höhe des Fensters geringer wird um so weniger ist in dem scrollbarem Bereich zu sehen. Weiterhin ist es nicht möglich ohne den fixen Elementen eine Höhe mitzugeben. CSS kann ja bekanntlich nicht rechnen. Also JQuery angeworfen und ein wenig Code…

Herausgekommen ist dies Template, es reagiert auf Schriftgrößenanpassungen und entfernt den Scroll wenn Höhe oder Breite nicht mehr ausreichen.

Externe Links mit Favicon kennzeichnen

Fast jede Webseite hat heutzutage ein Favicon im Root abgelegt um sich in Bookmarks zu identifizieren. Dies kann man sehr schön nutzen um auch die Links einer Webseite damit zu kennzeichnen.
Das Ganze hab ich hier mittels eines kleinen JQuery-Plugins automatisiert. Einfach das Script in den Head einbinden und Selector angeben, der Rest geht von allein. Es gibt 4 Möglichkeiten dies zu realisieren, 2x CSS und 2x mit IMG-Tag.

Demo anschauen

Leider ist es mir nicht gelungen eine Prüfung der Existenz eines Favicons einzubauen, deshalb ist die Verwendung der Varianten mit IMG eingeschränkt. Beachte dazu den Text auf der Demo.

Nifty Corners with JQuery

Screenshot von korrigierter VersionIch brauchte bei einem Projekt runde Ecken an gleich hohen Boxen, dabei fand ich einen kleinen Bug in der Portierung zu JQuery des wunderbaren Nifty. Es war nicht möglich mehr als 2 Boxen gleich hoch zu machen.
Mit dem originalem Script sieht das ganze nämlich so aus. Also hab ich mich dran versucht das zu fixen, zu Hilfe nahm ich mir Code aus VJustfy. Das Ergebnis gibts hier zu sehen. Falls das mal jemand braucht, ich stell es auch als Download zur Verfügung. Aber Achtung, verwendet auch beiliegende CSS, es ist eine kleine Anpassung für IE notwendig.

Der Dirigent – CMS

Screenshot von der damaligen DemoSeit Mai 2003 beschäftige ich mich mit dem CMS Der-Dirigent. Durch einige Anpassungen kann man damit sehr einfach den Standards entsprechende Seiten bauen.
Auf der Testseite beschreibe ich was man mit DEDI machen kann. Stelle angepasste Module vor und zeige deren Anwendung. Ich hab diese Seite mit dem Relaunch im Herbst 2008 vom Netz genommen!
Einige Projekte welche ich mit DEDI umgesetzt habe werden bei fertiges (Seite 2) vorgestellt.

Zeugnisverwaltung/-druckerei

Screenshot von der ZeugnisverwaltungAufgabe war, mir was einfallen zu lassen damit meine Michaela ihre Zeugnisse nicht mehr per Hand auszufüllen braucht. Also hab ich erst mal eine Seite mit Textfeldern erstellt und diese entsprechend positioniert, damit sie beim Ausdruck an der richtigen Stelle erscheinen. Nun macht es nur Sinn wenn sie schon alle Noten hat, da dies aber nicht der Fall war musste also eine Möglichkeit geschaffen werden die Angaben zu speichern.
Wie immer könnt ihr auf den Testseiten herumspielen und eure Zeugnisse eingeben, bearbeiten und ausdrucken. Löschen ist deaktiviert. Was ich nicht getan hab ist in allen Browsern zu testen, im Firefox gehts bestens.
Lasst euch die Druckvorschau der Zeugnisse anzeigen!
Dank an Oliver, der mir mit dem Java-Script geholfen hat.

Newsscript

Screenshot von der Ajax-AnwendungIch habe mich mal an einem Newsscript probiert. Damit das ganze schöner aussieht in ein einfaches Layout gepackt. Es läuft mit MySQL, kann mit oder ohne Login betrieben werden.
Passwort ist 12345, Beiträge löschen ist deaktiviert, also bitte überlegt was ihr schreibt.

Das gleiche gibts jetzt auch noch mal mit AJAX.

Ein fixiertes Menü

Screenshot - Fixes Menü auch für den IEOhne Einsatz von JavaScript oder Frames war es lange nicht möglich, eine feststehende Navigation zu realisieren, da der Internetexplorer kein position: fixed; unterstützt. Nun wurde aber eine Möglichkeit, dieses mittels CSS umzusetzen, gefunden. Damit ist es möglich Seiten ohne Frames zu erstellen, die aber genau so aussehen.
Die Demoseite ist aus dem Projekt des Freundeskreises Sachsen abgeleitet.

Quelle: devnull

Bildergalerie

Screenshot interaktive Bilder-GalerieAuf dieses Projekt bin ich mehr oder weniger zufällig gekommen. Da ich mich aber sowieso mehr mit PHP beschäftigen wollte, habe ich es ein wenig ausgebaut. Was dabei heraus kam könnt ihr besichtigen und ausprobieren. Es ist eine Bildergalerie mit Uploadmöglichkeit, es werden automatisch Thumbnails erzeugt die auch gleichzeitig in die Galerie aufgenommen werden. Die Orginale werden in einem Pop-Up angezeigt.

Quelle: Tutorial ist leider nicht mehr da, es gibt aber inzwischen ein paar Neue dort die sich mit dem Thema beschäftigen.

top