Suche
Suche Menü
3. September 2011

Redirect UDT

Calguy hat heute ein Snipplet veröffentlicht, mit welchem man Redirects Einfach in eine Webseite einbauen kann.

if( isset( $params['to'] ) )
  {
    global $gCms;
    $manager =& $gCms->GetHierarchyManager();
    $node =& $manager->sureGetNodeByAlias($params['to']);
    $content =& $node->GetContent();
    if (isset($content) && is_object($content))
       {
         if ($content->GetURL() != '')
         {
            redirect($content->GetURL());
         }
       }
    else return '<!-- redirect udt - page not found: '.$params['to'].' -->';
  }

Nun kann man z.B. mittels if / else Abfragen festlegen auf welche Seite weitergeleitet wird. (Achtung: Das UDT sollte nicht direkt ohne if / else Abfrage ins Template eingefügt werden, da dies sonst zu einem Loop führen könnte)

3. September 2011

TinyMCE geht nicht

Immer wieder kommt im Forum die Frage, dass der TinyMCE nicht angezeigt wird. Hier ein paar Möglichkeiten die man durch checken kann.

Statische Konfigurationsdatei

Eine Möglichkeit um den TinyMCE zum laufen zu bringen, ist eine statische Konfigurationsdatei zu verwenden. Diese Einstellung findet sich unter «Weitere Optionen».

TinyMCE - statische Konfigurationsdatei

Standard-Editor

Erscheint der TinyMCE nicht mehr obwohl er installiert ist, oder ist er nur bei bestimmten Konten zu sehen, kann es sein, dass der TinyMCE nicht mehr als Standard-Editor ausgewählt ist. Bei jedem Benutzer kann eingestellt werden, welcher Editor verwendet werden soll.

Global

Global als Standard-Editor

Global als Standard-Editor

 

Benutzerebene

Standard-Editor auf Benutzerebene

Standard-Editor auf Benutzerebene

 

Firefox 11 – Ein Inhalt nicht sichtbar

Hat ein Template mehr als ein Inhalt, so verschwindet der Inhalt des einen Inhaltsfeldes. Dieses Problem ist ein Bug in Zusammenhang mit Firefox 11. Ein Update auf die neuste Version von Firefox hilft hier.

Weitere Möglichkeiten

Hilft all das nichts kann wie folgt vorgegangen werden:

  • Dateien des TinyMCE nochmals hochladen
  • Falls es nicht funktioniert: Deinstallieren und nochmals installieren
  • Falls es immer noch nicht geht, nochmals die statische Konfiguration und die Standard-Editor Einstellung kontrollieren
  • Cache unter «Webseiten-Administration –> Globale Einstellungen –> Weitere Einstellungen» löschen
  • Browsercache löschen und Seite mit Ctrl+F5 neuladen

Falls es nun noch immer nicht läuft, mir bei der Lösung die entsprechende Lösung senden 🙂

1. September 2011

Facebook und Google+ Buttons ohne direkte Einbindung

Facebook und Google+ Buttons sind aus der Sicht des Datenschutzes bedenklich. Ein weiterer Grund der gegen die direkte Einbindung dieser Buttons spricht, ist die Preformance welche rapide sinkt. Behelfen kann man sich mittels eines statischen Buttons der bei Klick den «richtige» Facebook oder Google+ Button nach lädt.

Folgende 2 Seiten haben hierzu interessante Anleitungen geschrieben:

Andiministrator Facebook / Google+
Media-Deluxe (Google+)

31. August 2011

HTML5Pattern

Eine interessante Anwendung von HTML5 ist das «Pattern» Attribut welches für Input Felder eingesetzt werden kann. Damit lassen sich mit regulären Ausdrücken die Eingaben in einem Feld überprüfen und auswerten. Auf der Seite HTML5Pattern sind diverse Beispiele dazu veröffentlicht. Ein Beispiel daraus:

<input type="text" name="p7" value="" pattern="((^|:)([0-9a-fA-F]{0,4})){1,8}$" required />

Mit diesem Beispiel lassen sich IPV6 Adressen überprüfen. Mit den auf HTML5Pattern aufgeführten Beispielen lassen sich Kreditkarten-Nummern, Benutzernamen, Passwörter, Datum, Postleitzahlen und weiteres prüfen.

 HTML5Pattern

6. August 2011

Yahoo! Webplayer

Yahoo! hat mit dem Webplayer ein sehr einfach zu nutzendes Tool geschaffen, mit welchem Mp3, Videomaterial oder auch youtube Videos in die eigene Webseite integriert werden kann.

Yahoo! Webplayer

Der Player wird wie folgt eingebunden:

<script type="text/javascript" src="http://webplayer.yahooapis.com/player-beta.js"></script>

Idealerweise wird das Script unmittelbar vor dem <body> Tag eingefügt. Um alles weitere kümmert sicher der Player selber. Damit der Player aktiv wird, muss nur ein Link auf eine Videodatei, eine MP3 Datei oder ein Youtube Vidoe erstellt werden:

  • Der Webplayer spielt einen verlinkten Youtube Video im eigenen Player ab.
  • Wird ein oder mehrere MP3 Dateien verlinkt, erstellt der Player automatisch daraus eine Playlist
  • Es ist möglich mit dem Webplayer Filmtrailer einzubinden welche im Text erwähnt sind (die Yahoo! Movie-Webseite muss dazu verlinkt sein). Den Einbau der Filmtrailer erfoglt automatisch.

Je nach Nutzungsart und Gusto kann der Player über umfangreiche Einstellungen konfiguriert werden.

zum Yahoo! Webplayer

3. August 2011

jQuery hoverInent – einfach gesteuertes Hovern

Gestern ist mir das jQuery Plugin hoverIntent über den Weg gelaufen. Mit diesem Plugin lässt sich das Hovern kontrolliert steuern. Die Konfiguration ist sehr einfach:

var config = {
 over: makeTall, // function = onMouseOver callback (REQUIRED)
 timeout: 500, // number = milliseconds delay before onMouseOut
 out: makeShort // function = onMouseOut callback (REQUIRED)
}; 
$("#demo").hoverIntent( config ) 
function makeTall(){ $(this).animate({"height":75},200);} 
function makeShort(){ $(this).animate({"height":50},200);}

Demo

Der Vorteil dieses Plugins im Vergleich zur normalen Hover funktion liegt darin, dass das Hovern zeitgesteuert kontrolliert werden kann. In der Demo können 4 Boxen gehovert werden. Fährt man schnell mit der Maus darüber, springen nicht alle Boxen auf. Erst nach einer bestimmten Zeit, welche über den Parameter «interval» verändert werden kann, greift das Hovern.

25. Juli 2011

Conditional HTML Class

Der Internet Explorer (IE) ist dafür bekannt, dass er einige HTML oder CSS Befehle anders umsetzt oder z.T. gar nicht kennt. Microsoft hat für mit den Conditional Comments eine Möglichkeit geschaffen, einfach die verschiedenen Browserversionen zu erkennen. Diese Möglichkeit lässt sich nutzen, um ohne die üblichen CSS Hacks einen einem sauberen CSS Code zu schreiben. Zuerst wird die entsprechende IE Version gecheckt und anschliessen die entsprechende Version als class dem HTML Tag zugewiesen. Um nun eine bestimmte IE Version anzusprechen, muss im CSS nur der entsprechende Parent-Selektor eingefügt werden (Bsp: .ie6 .box).

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]><html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9">
<![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Hier der gleiche Code für HTML 5 Webseiten:

<!--[if lt IE 7 ]> <html class="ie6" lang="DE-de"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="DE-de"> <![endif]-->
<!--[if IE 8 ]><html class="ie8" lang="DE-de"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9" lang="DE-de">
<![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="DE-de"> <!--<![endif]-->

Weitere Details zu den Conditional Comments gibt es direkt bei Microsoft.

15. Juli 2011

Bilder horizontal und vertikal zentriert ausrichten

Wer eine Bildergalerie erstellt stand sicher auch schon mal vor dem Problem, dass bei einer Umsetzung ohne Tabelle die Bilder nicht einfach horizontal und vertikal zentriert werden können. Hier eine Lösung für dieses Problem:

Bilder horizontal und vertial zentriert ausrichten

Stylesheet

<style type="text/css">
 .imageholder { 
    float: left;
    margin: 5px; 
    position:relative; 
    display:table; 
    height: 200px; 
    width: 200px; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid #CCCCCC; 
    text-align:center;
 }
 .inner { 
    width:100%; 
    display:table-cell; 
    vertical-align:middle; 
    position:relative; 
    text-align:center;
 } 
 .inner img{ 
    display:inline; 
    vertical-align:middle; 
 } 
</style> 
<!--[if lt IE 8]> 
<style type="text/css">
 .imageholder{overflow:hidden}
 .imageholder,.inner{display:block}
 .inner {top:50%;left:0;}
 .inner img{top:-50%; position:relative;display:block}
 </style>
 <![endif] -->

HTML-Code

<div class="imageholder">
    <div class="inner">
        <img src="bild1.jpg" alt="Img" width="180" height="135" />
    </div>
</div>
<div class="imageholder">
    <div class="inner">
        <img src="bild2.jpg" alt="Img" width="135" height="180" />
    </div> 
</div> 
<div class="imageholder"> 
    <div class="inner">
        <img src="bild3.jpg" alt="Img" width="100" height="150" />
    </div>
</div> 
<div class="imageholder">
    <div class="inner">
        <img src="bild4.jpg" alt="Img" width="180" height="100" />
    </div> 
</div>