blog.exotec

TYPO3 . XHTML/CSS . JavaScript/AJAX . iPhone/iOS

Archive for the ‘JavaScript’ Category

Fancybox iframe mit dynamischer Größe

Dienstag, November 22nd, 2011

Dazu findet man bislang nur wenige hilfreiche Informationen. Hier bin ich irgendwann auf eine funktionierende Lösung gestoßen. Nur funktioniert eval() und auch window.top im Safari leider nicht. eval() wird aber auch gar nicht benötigt udn statt window.tp muss man nur window.parent verwenden, dann läuft es auch im Safari.

Hier der Code wie er bei mir nun läuft:

$(document).ready(function(){
	var w = $('body').width();
	var h = $('body').height();
	fb_resize(w,h);
});
function fb_resize(w,h) {
  var topWinHeight = window.parent.$('body').height();
  if (w > 0 || h > 0) {
  	// if content > viewport of browser
  	if(h > topWinHeight) {
		h = parseInt(topWinHeight)-120;
  	}
	window.parent.$("#fancybox-content").css( "height", h+"px");
	window.parent.$("#fancybox-content").css( "width", w+"px");
	// adds padding values to the height of parent window
	th = parseInt(h)+20;
	tw = parseInt(w)+20;
	window.parent.$("#fancybox-wrap").css( "width", tw+"px");
	window.parent.$("#fancybox-wrap").css( "height", th+"px");
	window.parent.$.fancybox.resize();
  }
}

Wenn man auf meiner neuen T3Touch Seite das Anmeldeformular öffnet, und dieses dann einfach mal ohne Angaben absendet, kann man das Script in Action sehen.

iScroll Integration in TYPO3 iPhone Extension

Sonntag, Mai 8th, 2011

Für das TYPO3 Inhaltselement “Text und Bilder” habe ich begonnen iScroll (sieht nur auf dem iPhone vernünftig aus!) einzubinden. Da treten aber heftige CPU Probleme beim Drehen des iPhone auf. Falls hier jemand schon Erfahrungen gemacht haben sollte, und mir Hinweise geben können wie ich hier die Abstürze des Safari auf dem iPhone verhindern kann, wäre ich sehr dankbar für jeden Tip.

Screenshot

Thumbnails für TYPO3 iPhone Extension

Sonntag, Mai 8th, 2011

Aus dem TYPO3 Inhaltselement “Bilder” wird nun eine typische Thumbnail Galerie generiert und auch die Beschriftung der Bilder ist nun möglich.

Screenshot Screenshot

TYPO3 iPhone Extension

Freitag, April 29th, 2011

Update: Bitte auch www.t3touch.de ansehen!
Ich habe eine auf JQTouch basierende TYPO3 Extension geschrieben. Etwas tricky war die Einbindung der Bildergalerie und das Versenden des Formulars. Für dieses habe ich dann auch eine kleine extra Extension anlegen müssen da Formulare via Ajax versendet werden sollten in JQTouch. Und beim Video wird via Userfunc das Inhaltselement einfach komplett mit dem neuen HTML Code ausgegeben.

Das Demo kann man sich momentan hier (auf einem iPhone) ansehen: Link

TYPO3 “Klick-Vergrößern” zweimal anders

Freitag, Oktober 9th, 2009

Hier noch 2 Beispiel wie man die clickEnlarge Funktion von TYPO3 abwandeln kann:
klicken für Demo 1
klicken für Demo 2

Wie genau das angestellt wurde zeige ich auch noch, heute ist es aber einfach schon zu spät dafür.

TYPO3 “Klick-Vergrößern” mit Lupensymbol

Donnerstag, Oktober 8th, 2009

von: www.elemente-websolutions.ms/blog/

Jeder TYPO3 Redakteur kennt die kleine Checkbox im Inhaltselement “Bild” oder “Text mit Bild”: “Klick-Vergrößern” für Bilder. Hinter diesem recht eigenartigen Wortkonstrukt verbirgt sich nichts anderes als die Funktionalität bei Mausklick auf ein kleines Vorschaubild eine entsprechend größere Variante des gewünschten Bildes in einem neuen Fenster anzuzeigen.
Das Problem dieser nützlichen Funktion zeigt sich allerdings an der Präsentation der selben auf der Website: Der Besucher kann auf dem ersten Blick diese gar nicht erkennen, sind die “klick-vergrößerten” Bilder von Normalen doch nicht zu unterscheiden. Eine Lupe als Symbol eignet sich gut, um dem Benutzer einen visuellen Hinweis zu bieten, aber dieses Icon jedes Mal in das gewünschte Bild zu integrieren und zu speichern ist recht praxisfern und kann für den normalen TYPO3-Redakteur nicht bewerkstelligt werden. Zudem würde die Lupe im Bild auch erscheinen, wenn der Besucher die vergrößerste Ansicht des Bildes betrachtet.
Die Lösung für dieses Problem liefern in ein paar Zeilen TYPOscript und eine Javascript-Funktion. Mit folgendem TYPOscript wird der stdWrap des Inhaltselements “IMAGE” um das Lupensymbol erweitert:

tt_content.image.20 {
  1 {
    stdWrap.innerWrap (
          |
          Klicken um Bild zu vergrößern
    )
    stdWrap.innerWrap {
      if.isTrue.field = image_zoom
      ifEmpty.field = image_link
    }
  }
}

Hiermit wird hinter dem eigentlichen Link für die “Klick-Vergrößern”-Funktionalität ein weiterer eingefügt, der mit der notwendigen Javascript-Funktion versehen ist und eine beliebige Grafik enthält – eben die besagte Lupe als Hinweis für den Besucher. Die Javascript-Funktion “openPreviousLink” ist ein Einzeiler und ruft das onclick-Ereignis des vorherrigen A-Tags auf:

function openPreviousLink(elem) {
    elem.parentNode.getElementsByTagName('a')[0].onclick();
}

Fertig ist unsere Lupe, die unter http://www.elemente-websolutions.ms als Plus-Symbol am unteren, rechten Bildrand integriert wurde. Mit ein wenig TYPO- und Javascript-Kenntissen kann die “Lupe” abgewandelt und auf Erweiterungen wie “tt_news” übertragen werden. Somit erhält der Besucher einer Website nun endlich ein hilfsreiches “Feature”, die Userability steigt.

Comment: Der Code hat mir bei einem aktuellen TYPO3 Template sehr geholfen. Danke

jQuery Performance Rules

Dienstag, September 29th, 2009

Die jQuery Performance Rules sollte man umbedingt lesen wenn man mit jQuery arbeitet.

jQuery jScrollPane Plugin

Donnerstag, September 10th, 2009

Mit dem jScrollPane Plugin können DIV die eine CSS Anweisung overflow:hidden; besitzen mit benutzerdefinierten Scrollbars versehen werden. Möglich sind hierbei ganz einfache Scroller, wie ich sie eben gerade im Template Shop angelegt habe, bis hin zu hübschen grafisch gestallteten Scrollbars. Das Plugin bietet aber noch viele weitere schöne Möglichkeiten.


92,157 Spam-Kommentare
blockiert von
Akismet