Archiv für den Monat: Mai 2013

Das Grauen in Frauenhandtaschen

Bislang dachte ich, die am meisten verseuchtesten Plätze auf dieser Welt sind Fukushima, Norilsk, Tschernobyl und die Feuchtgebiete der Autobahnraststätte Münsterland-West. Hm, und vielleicht Herrn Mahakalas verlassene Messi-Wohnungen. Aber es gibt Schlimmeres, Grauenvolleres, bei weitem Entsetzlicheres. Forscher haben mir am Wochenende bestätigt: eine Frauenhandtasche ist keimverseuchter als eine öffentliche Toilette.
Es ist nun nicht so, dass ich um die Gefährlichkeit der Frauenhandtasche an sich bislang nicht Bescheid wusste. Ich selbst habe es mir zur Angewohnheit gemacht, jede Frau, die sich mir auf weniger als zwei Meter nähern will, zunächst zu zwingen, ihren Handtascheninhalt auf einem Analysetisch vor mir zu entleeren. Dann fordere ich sie auf, sich in einem Sicherheitsabstand von 5m auf den Boden zu knien und sich per Self-Bondage Hände und Füße zu fesseln. Sicher ist sicher. Manche Doppel-X-Chromosomenträger können nämlich plötzlich sehr aggressiv werden, wenn man die seltsamen Gegenstände und mutmaßlichen Opfergaben in ihren heiligen Aufbewahrungsbeuteln untersucht.
Während der Tascheninspektion trage ich selbstverständlich Einmalhandschuhe und zertifizierte Ganzkörperschutzanzüge, wie sie Tatortreiniger von amerikanischen Schulmassakern verwenden. Das hat mir bislang das Leben gerettet, wie ich nun erfahren musste, da Frauenhandtaschen reine Brutstätten für heimtückische Bakterien und bärbeißige Keime sind.
Primär ist Handtaschenanalyse für mich eine Art Profiling für potenzielle zukünftige Zickerei, eine Art visionäre Precog-Wahrnehmung für unerkannte Inkompatibilitäten – übrigens eine absolut sichere Methode.
Aus ihrer genetischen Historie als steinzeitliche Sammlerin verfügt Frau nämlich über keine inhaltliche Sinngebung des Handtascheninhalts – sie plant das Universum ihres Taschenbiotops nicht als logische Konsequenz eines bestimmten Zwecks, sondern bietet es wissenden Männern als unfehlbaren Einblick in das Konglomerat vergangener Ereignisse oder Nichtereignisse, eine Musterkollektion der Bruchstücke ihrer fragilen Psyche.
Nichts, was sich in einer Frauenhandtasche findet, ist ohne Bedeutung. Alles hat seine intuitive Existenzberechtigung, auch, wenn wir Männer es mit den uns verfügbaren Ressourcen nicht begreifen können. Ob Hundeleckerchen, Ersatzwindeln, vor 3 Jahren abgelaufene Kondome, eingeschweißte Fleischwürste, Socken, Notfalltampons oder der Kugelschreibervorrat einer großen Aktiengesellschaft: stellen Sie keine Fragen. Nehmen Sie es einfach zur Kenntnis, legen Sie es schweigend zurück, lächeln Sie, lassen Sie sich nichts anmerken.
Ziehen Sie Ihre Schlüsse – und ziehen Sie sie schnell. Wenn Sie der Tascheninhalt verstört hat: Laufen Sie! Noch kniet die Frau gefesselt in 5m Abstand! Sie können es schaffen, denn noch haben Sie einen leichten Vorsprung! Aber seien Sie sicher: Frau hat bereits das Klappmesserchen aus ihrem Handtaschennageletui in der Hand und sägt an den Seilen.
Mein Name ist Neon. Ich habe dies oft überlebt. Ihr findet mich in Düsseldorf. Ich werde täglich um die Mittagszeit am Hafen sein, wenn die Sonne am höchsten steht. Wenn Ihr da draußen seid, wenn irgend jemand da draußen ist, ich kann Nahrung, Schutz und Sicherheit bieten. Für alle Männer da draußen: Ihr seid nicht allein!
Neon!

Twoday-Tipp #1 – Backstretch

2daychange.jpg

Nicht, dass hierüber irgendwelche Zweifel aufkommen: Form follows Function und Content geht vor Layout. Aber der eingeschlafene, selbst-konservierende Twoday-Blog-Alltag mit der Innovationsintensität eines ZDF-Fernsehgartens verdient wirklich jede Bemühung, vehement für ein wenig Farbe, Gestaltung und – schreien wir es müde heraus – Veränderung zu werben.

Doch wollen wir nicht unmäßig rumquengeln, denn es bleibt immerhin zu konstatieren, dass Twoday die Plattform in der kargen Free-Variante kostenfrei bereitstellt und man das CMS durch Modifikation der zugrunde liegenden HTML- & CSS-Dateien durch eigene Hände Arbeit doch weitgehend nach individuellen Wünschen gestalten kann – wenn man denn will.

Daneben gibt es noch weitgehend unbekannte Perlen wie etwa die in Twoday aktivierbare jQuery-Komponente, eine Standard-Javascript-Bibliothek, auf welcher wiederum viele freie und nützliche Zusatzscripte basieren, mit deren Hilfe sich das eigene Blog weiter pimpen lässt.

CSS, jQuery, Scripte, das alles klingt komplizierter, als es wirklich ist. In dieser neuen Rubrik werde ich periodisch Lösungen vorstellen, die helfen sollen, die bislang überschaubaren Gestaltungsoptionen eines Twoday-Bloggers etwas zu vermehren.

Als kleines Beispiel dafür, was mit dem Einsatz von jQuery auf Twoday möglich wird, stelle ich heute „Backstretch“ vor.

Einsatzmöglichkeiten

Was ist „Backstretch“?

script/backstretch.jpg/

Einfach gesagt, füllt Backstretch jedes HTML Blockelement mit einem vorgegebenen (Hintergrund-)Bild.

Wird dieses Element durch den Nutzer verkleinert, passt Backstretch die Größe des Hintergrundbildes automatisch an („responsives Verhalten“). Bei bestimmten Ereignissen kann Backstretch auf Wunsch angezeigte Hintergrundbilder ändern. Auch verschiedene, in Zeitabständen wechselnde Bilder (Slideshows, Gallerien) sind möglich.

Anwendungsbeispiele

Dies ist ein einfaches, selbst definiertes DIV-Element mit einer festgelegten Breite und Höhe. Schon beim Laden der Webseite erhält es durch Backstretch ein vorgegebenes Hintergrundbild.

Das Bild lässt sich ereignisgesteuert auswechseln, z.B. durch Klick auf eine Schaltfläche.

Auch der Start einer zeitgesteuerten Anzeige von beliebig vielen Bildern ist möglich.

Natürlich beschränkt sich die Anwendung von Backstretch nicht nur auf selbstdefinierte Blockelemente in einem Beitrag, sondern kann auch DIV-Elemente des Twoday-Templates selbst verändern.

Damit ergibt sich z.B. die sehr kundenorientierte Möglichkeit, Ihren besonders verdienten Twoday-Abonnenten jederzeit eine Blogatmosphäre anzubieten, in denen sie sich ganz besonders wohl fühlen:



Installation

1. jQuery aktivieren

script/jquery.jpg/

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript. Mit jQuery und speziellen, darauf aufbauenden Scripten wird es für Twoday-Nutzer sehr einfach, auch durchaus komplexere Funktionalitäten in ihr Blog zu integrieren.

Falls Sie jQuery noch nicht aktiviert haben, müssen Sie dies als ersten Schritt durchführen:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf AdminModuleExtension Module
  2. Klicken Sie beim Eintrag „JQuery Integration“ (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf „ja“.
  3. Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird beim nächsten Aufruf Ihres Blogs automatisch mit eingebunden. Die Durchführung dieser Aktivierungsschritte ist nur einmalig erforderlich!

2. Backstretch integrieren

Um Backstretch nutzen zu können, müssen Sie es als Script in Ihre Twoday-Webseite einbetten. Führen Sie dazu einmalig folgende Schritte aus:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf
    AdminVorlagen HTMLHauptseite (Site.page)
  2. Scrollen Sie im Textfeld nach unten und positionieren Sie den Cursor (per Klick) direkt vor das HTML-Tag </body>
  3. Fügen Sie dort die folgenden zwei Zeilen ein:
    <!-- Backstretch Script -->
    <script src="http://cdn.jsdelivr.net/jquery.backstretch/2.0.3/jquery.backstretch.min.js"></script>
  4. Klicken Sie anschließend auf Speichern und Schließen um Ihre Änderung zu sichern. Damit ist die Backstretch-Komponente bereits einsatzfähig. Im nächsten Schritt werden die Instruktionen für Backstretch erstellt.

Anwendung

Einem Blockelement ein Bild zuweisen

Um einem bestimmten HTML-Blockelement ein Hintergrundbild mit Backstretch zuweisen zu können, ist es wichtig, dass dieses über eine eindeutige Kennung (ID) verfügt.

Beispiel:  <div id=“meinekennung“></div>

Die meisten von Twoday definierten Template-Blockelemente besitzen i.d.R. eine ID oder Klassenzuordnung. Für eigene Blockelemente (z.B. in einem Blogbeitrag) sollten Sie auch eine eindeutige ID vergeben. Eindeutig heißt, dass auf Ihrer angezeigten Twoday-Webseite kein zweites Element dieselbe ID besitzt.

Im ersten Beispiel definieren wir im Text ein Blockelement (DIV) und weisen diesem per Backstretch ein Bild zu (siehe HTML und Javascript Tab).

Zur besseren Übersicht kann man sich das Zusammenspiel der einzelnen Komponenten auch in jsFiddle ansehen: Beispiel #1

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>
<script type="text/javascript">
$("#twins").backstretch("https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/twintowers.jpg");
</script>

Dieses Script fügen Sie in der Hauptseite (Site.page) ein, und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe ‚Installation‘).

Eine Bildergallerie anzeigen

Zur Aktivierung der Galleriefunktion übergibt man Backstretch mehrere, durch Komma getrennte und in eckige Klammern eingebettete Bildadressen sowie verschiedene Zusatzparameter, die festlegen, wie die Bildabfolge ablaufen soll:

  1. duration:nnnn Anzeigedauer eines Bildes in ms (nnnn)
  2. fade:nnnn Überblendedauer in ms (nnnn)

Auch hierzu gibt es ein zugehöriges jsFiddle: Beispiel #2

<div id="bildgallerie"></div>
$("#bildgallerie").backstretch( [
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/obst.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/erdbeeren.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/beeren.jpg" ],
{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Gallerie im Hintergrund der Webseite

Eine Bildergallerie ist nicht auf selbstdefinierte Blockelemente beschränkt. Prinzipiell kann man jedes Blockelement, das eine eindeutige ID besitzt, von Backstretch mit Hintergründen versorgen lassen. Will man den gesamten Hintergrund der Webseite ausfüllen, lässt man den Selektor einfach weg.

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/twintowers.jpg",
"https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/bigben.jpg" ],
{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Ereignisgesteuerte Hintergrundänderung

Backstretch-Anweisungen zur Änderung eines Hintergrundes können nicht nur automatisch beim Laden der Webseite ausgeführt werden, sondern nach Bedarf an bestimmte Ereignisse gekoppelt werden.

In diesem Beispiel verwende ich eine (stark) vereinfachte HTML-Struktur eines Twoday-Blogs mit zwei Beiträgen. Die Überschriften in Twoday-Blogbeiträgen (Element „h3“) besitzen die CSS-Klasse „storyTitle“ – sie können also einfach über den jQuery-Selektor „h3.storyTitle“ für Veränderungen ausgewählt werden.

Nach dem Klick auf einen Button werden die Hintergründe aller „h3.storyTitle“-Überschriften durch Backstretch mit einer Grafik hinterlegt. Hier das entsprechende jsFiddle: Beispiel #4

Es gibt viele definierte Blockelemente in Twoday-Blogs, denen man mittels Backstretch einen einmaligen oder wechselnden Hintergrund zuweisen kann, so z.B.

  • div#container Eigentlicher Seiteninhalt (Text und Sidebars)
  • div#content Gesamtheit der angezeigten Blogbeiträge
  • div.story Ein einzelner Blogbeitrag
  • div.storyContent Textbereich des Blogbeitrags
  • div.storyDate Autor und Erstellungsdatum
  • div.storyLinks Links und Anzahl Kommentare
  • div#sidebar01 Sidebar-Module
  • und viele mehr.
$("#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("https://googledrive.com/host/0B87rILW4RVIJNlN3eUJxVWN5ZWM/headerbg.jpg");
});

Tageszeitabhängiger Hintergrund

Kann man dem eigenen Twoday-Blog beibringen, das angezeigte Hintergrundbild (wie auf manchen Smartphone-Widgets) tageszeitabhängig zu ändern? Yep, wenn auch hierzu ein Handvoll mehr Javascript-Zeilen erforderlich sind. Hier das entsprechende jsFiddle: Beispiel #5

Falls Sie das Script ausprobieren möchten, kopieren Sie es inkl. einleitendem <script type="text/javascript"> und schließendem </script>-Tag in die Hauptseite (Site.page), und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe ‚Installation‘). Führen Sie außerdem folgende Script-Anpassungen durch:

  1. Ändern Sie die Bildadresse (URL) in der Variablen bildurl auf die Adresse, unter der Ihre tageszeitabhängigen Bilder zu finden sind.
  2. Ändern Sie die Variable bildervonbis dahingehend ab, dass in jeder Zeile ein Bildname, die Beginnstunde der Anzeige und die Bis-Stunde der Anzeige – jeweils durch Komma getrennt – aufgeführt sind.
  3. Das Script legt die Bilder per $.backstretch(..) vollflächig auf den gesamten Webseitenhintergrund. Wollen Sie die zeitabhängigen Bildwechsel in einem anderen Blockelement durchführen, müssen Sie die Backstretch-Anweisung anpassen: z.B. $(„#meinbildbereich“).backstretch(..).

Vertiefende Lesequellen

jQuery Dokumentation (EN)
jQuery Einführung und Grundlagen (DE)
Backstretch Script-Dokumentation von Scott Robin (EN)
Backstretch Script-Dokumentation auf GitHub (EN)

Fragen und/oder Feedback gerne hier oder per Mail. Viel Spaß beim Twoday-Pimpen! ;)

Schöner Bloggen auf Twoday #1

Nicht, dass hierüber irgendwelche Zweifel aufkommen: Form follows Function und Content geht vor Layout. Aber der eingeschlafene, selbst-konservierende Twoday-Blog-Alltag mit der Innovationsintensität eines ZDF-Fernsehgartens verdient wirklich jede Bemühung, vehement für ein wenig Farbe, Gestaltung und – schreien wir es müde heraus –
Veränderung zu werben.

Doch wollen wir nicht unmäßig rumquengeln, denn es bleibt immerhin zu konstatieren, dass Twoday die Plattform in der kargen Free-Variante kostenfrei bereitstellt und man das CMS durch Modifikation der zugrunde liegenden HTML- & CSS-Dateien durch eigene Hände Arbeit doch weitgehend nach individuellen Wünschen gestalten kann – wenn man denn will.

Daneben gibt es noch weitgehend unbekannte Perlen wie etwa die in Twoday aktivierbare jQuery-Komponente, eine Standard-Javascript-Bibliothek, auf welcher wiederum viele freie und nützliche Zusatzscripte basieren, mit deren Hilfe sich das eigene Blog weiter pimpen lässt.

CSS, jQuery, Scripte, das alles klingt komplizierter, als es wirklich ist. In dieser neuen Rubrik werde ich periodisch Lösungen vorstellen, die helfen sollen, die bislang überschaubaren Gestaltungsoptionen eines Twoday-Bloggers etwas zu vermehren.

Als kleines Beispiel dafür, was mit dem Einsatz von jQuery auf Twoday möglich wird, stelle ich heute „Backstretch“ vor.

Einsatzmöglichkeiten

Was ist „Backstretch“?

Einfach gesagt, füllt Backstretch jedes HTML Blockelement mit einem vorgegebenen (Hintergrund-)Bild.

Wird dieses Element durch den Nutzer verkleinert, passt Backstretch die Größe des Hintergrundbildes automatisch an („responsives Verhalten“). Bei bestimmten Ereignissen kann Backstretch auf Wunsch angezeigte Hintergrundbilder ändern. Auch verschiedene, in Zeitabständen wechselnde Bilder (Slideshows, Gallerien) sind möglich.

Anwendungsbeispiele

Dies ist ein einfaches, selbst definiertes DIV-Element mit einer festgelegten Breite und Höhe. Schon beim Laden der Webseite erhält es durch Backstretch ein vorgegebenes Hintergrundbild.

Das Bild lässt sich ereignisgesteuert auswechseln, z.B. durch Klick auf eine Schaltfläche.

Auch der Start einer zeitgesteuerten Anzeige von beliebig vielen Bildern ist möglich.

Natürlich beschränkt sich die Anwendung von Backstretch nicht nur auf selbstdefinierte Blockelemente in einem Beitrag, sondern kann auch DIV-Elemente des Twoday-Templates selbst verändern.

Damit ergibt sich z.B. die sehr kundenorientierte Möglichkeit, Ihren besonders verdienten Twoday-Abonnenten jederzeit eine Blogatmosphäre anzubieten, in denen sie sich ganz besonders wohl fühlen:



Installation

1. jQuery aktivieren

jQuery ist ein Quasi-Industriestandard und umfasst sehr nützliche Basisfunktionen für die Analyse und Änderung von Webseiteninhalten mittels Javascript. Mit jQuery und speziellen, darauf aufbauenden Scripten wird es für Twoday-Nutzer sehr einfach, auch durchaus komplexere Funktionalitäten in ihr Blog zu integrieren.

Falls Sie jQuery noch nicht aktiviert haben, müssen Sie dies als ersten Schritt durchführen:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf AdminModuleExtension Module
  2. Klicken Sie beim Eintrag „JQuery Integration“ (ganz unten) auf Einstellungen und stellen Sie den Auswahlwert auf „ja“.
  3. Sichern Sie Ihre Änderung. Damit ist jQuery als zugrunde liegende Basiskomponente aktiviert und wird beim nächsten Aufruf Ihres Blogs automatisch mit eingebunden. Die Durchführung dieser Aktivierungsschritte ist nur einmalig erforderlich!

2. Backstretch integrieren

Um Backstretch nutzen zu können, müssen Sie es als Script in Ihre Twoday-Webseite einbetten. Führen Sie dazu einmalig folgende Schritte aus:

  1. Melden Sie sich in Twoday mit Ihrer Kennung an und klicken dann in Ihrem Blog oben auf
    AdminVorlagen HTMLHauptseite (Site.page)
  2. Scrollen Sie im Textfeld nach unten und positionieren Sie den Cursor (per Klick) direkt vor das HTML-Tag </body>
  3. Fügen Sie dort die folgenden zwei Zeilen ein:
    <!-- Backstretch Script -->
    <script src="http://cdn.jsdelivr.net/jquery.backstretch/2.0.3/jquery.backstretch.min.js"></script>
  4. Klicken Sie anschließend auf Speichern und Schließen um Ihre Änderung zu sichern. Damit ist die Backstretch-Komponente bereits einsatzfähig. Im nächsten Schritt werden die Instruktionen für Backstretch erstellt.

Anwendung

Einem Blockelement ein Bild zuweisen

Um einem bestimmten HTML-Blockelement ein Hintergrundbild mit Backstretch zuweisen zu können, ist es wichtig, dass dieses über eine eindeutige Kennung (ID) verfügt.

Beispiel:  <div id=“meinekennung“></div>

Die meisten von Twoday definierten Template-Blockelemente besitzen i.d.R. eine ID oder Klassenzuordnung. Für eigene Blockelemente (z.B. in einem Blogbeitrag) sollten Sie auch eine eindeutige ID vergeben. Eindeutig heißt, dass auf Ihrer angezeigten Twoday-Webseite kein zweites Element dieselbe ID besitzt.

Im ersten Beispiel definieren wir im Text ein Blockelement (DIV) und weisen diesem per Backstretch ein Bild zu (siehe HTML und Javascript Tab).

Zur besseren Übersicht kann man sich das Zusammenspiel der einzelnen Komponenten auch in jsFiddle ansehen: Beispiel #1

<p>Im Beitragstext wird ein leeres weißes Blockelement (Breite 300 Pixel, Höhe 200 Pixel) definiert:</p>
<div id="twins" style="width:300px;height:200px;background:white;">
<p style="text-align:center;color:white;">Text im Blockelement mit der ID "twins"</p>
</div>
<script type="text/javascript">
$("#twins").backstretch("http://content.wuala.com/contents/NeonWilderness/Public/images/twintowers.jpg");
</script>

Dieses Script fügen Sie in der Hauptseite (Site.page) ein, und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe ‚Installation‘).

Eine Bildergallerie anzeigen

Zur Aktivierung der Galleriefunktion übergibt man Backstretch mehrere, durch Komma getrennte und in eckige Klammern eingebettete Bildadressen sowie verschiedene Zusatzparameter, die festlegen, wie die Bildabfolge ablaufen soll:

  1. duration:nnnn Anzeigedauer eines Bildes in ms (nnnn)
  2. fade:nnnn Überblendedauer in ms (nnnn)

Auch hierzu gibt es ein zugehöriges jsFiddle: Beispiel #2

<div id="bildgallerie"></div>
$("#bildgallerie").backstretch( [
"http://content.wuala.com/contents/NeonWilderness/Public/images/obst.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/erdbeeren.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/beeren.jpg" ],
{duration: 2000, fade: 750});
// Kommentar: 3 Bilder, Anzeigedauer jeweils 2 Sekunden, Übergang in 750ms

Eine Gallerie im Hintergrund der Webseite

Eine Bildergallerie ist nicht auf selbstdefinierte Blockelemente beschränkt. Prinzipiell kann man jedes Blockelement, das eine eindeutige ID besitzt, von Backstretch mit Hintergründen versorgen lassen. Will man den gesamten Hintergrund der Webseite ausfüllen, lässt man den Selektor einfach weg.

Das zugehörige jsFiddle: Beispiel #3

$.backstretch( [
"http://content.wuala.com/contents/NeonWilderness/Public/images/twintowers.jpg",
"http://content.wuala.com/contents/NeonWilderness/Public/images/bigben.jpg" ],
{duration: 3000, fade: 1500});
// Kommentar: 2 Bilder, Anzeigedauer jeweils 3s, Übergang in 1.5s

Ereignisgesteuerte Hintergrundänderung

Backstretch-Anweisungen zur Änderung eines Hintergrundes können nicht nur automatisch beim Laden der Webseite ausgeführt werden, sondern nach Bedarf an bestimmte Ereignisse gekoppelt werden.

In diesem Beispiel verwende ich eine (stark) vereinfachte HTML-Struktur eines Twoday-Blogs mit zwei Beiträgen. Die Überschriften in Twoday-Blogbeiträgen (Element „h3“) besitzen die CSS-Klasse „storyTitle“ – sie können also einfach über den jQuery-Selektor „h3.storyTitle“ für Veränderungen ausgewählt werden.

Nach dem Klick auf einen Button werden die Hintergründe aller „h3.storyTitle“-Überschriften durch Backstretch mit einer Grafik hinterlegt. Hier das entsprechende jsFiddle: Beispiel #4

Es gibt viele definierte Blockelemente in Twoday-Blogs, denen man mittels Backstretch einen einmaligen oder wechselnden Hintergrund zuweisen kann, so z.B.

  • div#container Eigentlicher Seiteninhalt (Text und Sidebars)
  • div#content Gesamtheit der angezeigten Blogbeiträge
  • div.story Ein einzelner Blogbeitrag
  • div.storyContent Textbereich des Blogbeitrags
  • div.storyDate Autor und Erstellungsdatum
  • div.storyLinks Links und Anzahl Kommentare
  • div#sidebar01 Sidebar-Module
  • und viele mehr.
$("button#btnGrafikAktivieren").click(function(e) {
e.preventDefault();
$("h3.storyTitle").backstretch("http://content.wuala.com/contents/NeonWilderness/Public/images/headerbg.jpg");
});

Tageszeitabhängiger Hintergrund

Kann man dem eigenen Twoday-Blog beibringen, das angezeigte Hintergrundbild (wie auf manchen Smartphone-Widgets) tageszeitabhängig zu ändern? Yep, wenn auch hierzu ein Handvoll mehr Javascript-Zeilen erforderlich sind. Hier das entsprechende jsFiddle: Beispiel #5

Falls Sie das Script ausprobieren möchten, kopieren Sie es inkl. einleitendem <script type="text/javascript"> und schließendem </script>-Tag in die Hauptseite (Site.page), und zwar direkt hinter die Zeile, mit der das Backstretch-Script eingebettet wurde (siehe ‚Installation‘). Führen Sie außerdem folgende Script-Anpassungen durch:

  1. Ändern Sie die Bildadresse (URL) in der Variablen bildurl auf die Adresse, unter der Ihre tageszeitabhängigen Bilder zu finden sind.
  2. Ändern Sie die Variable bildervonbis dahingehend ab, dass in jeder Zeile ein Bildname, die Beginnstunde der Anzeige und die Bis-Stunde der Anzeige – jeweils durch Komma getrennt – aufgeführt sind.
  3. Das Script legt die Bilder per $.backstretch(..) vollflächig auf den gesamten Webseitenhintergrund. Wollen Sie die zeitabhängigen Bildwechsel in einem anderen Blockelement durchführen, müssen Sie die Backstretch-Anweisung anpassen: z.B. $(„#meinbildbereich“).backstretch(..).

Vertiefende Lesequellen

jQuery Dokumentation (EN)
jQuery Einführung und Grundlagen (DE)
Backstretch Script-Dokumentation von Scott Robin (EN)
Backstretch Script-Dokumentation auf GitHub (EN)

Fragen und/oder Feedback gerne hier oder per Mail. Viel Spaß beim Twoday-Pimpen! ;)