Zum Inhalt

Schlagwort: jquery

JavaScripts/jQuery in Contao besser zusammenfassen

Wenn man wie im Artikel von Rocksolid unter Schritt 4 beschrieben, die JavaScript-/jQuery-Dateien in Contao zusammenfassen möchte, müssen erstmal die Dateipfade herausgefunden (die in Contao 3.5 kein einheitliches Muster haben*). Nachfolgend die kompletten Blöcke für deren Templates unter Berücksichtigung der Standard-Templates: Mediaelement (j_mediaelement.html5) <?php $GLOBALS[‚TL_JAVASCRIPT‘][] = ‚assets/jquery/mediaelement/‘.MEDIAELEMENT.’/js/mediaelement-and-player.min.js|static‘; ?> Colorbox (j_colorbox.html5) <?php $GLOBALS[‚TL_JAVASCRIPT‘][] = ‚assets/jquery/colorbox/‘.COLORBOX.’/js/colorbox.min.js|static‘; ?> Accordion (j_accordion.html5) <?php $GLOBALS[‚TL_JAVASCRIPT‘][] = ‚assets/jquery/ui/‘.JQUERY_UI.’/jquery-ui.min.js|static‘; ?> Slider (j_slider.html5) <?php $GLOBALS[‚TL_JAVASCRIPT‘][] = ‚assets/swipe/‘.SWIPE.’/js/swipe.min.js|static‘; ?> Table Sorter (j_tablesort.html5) <?php $GLOBALS[‚TL_JAVASCRIPT‘][] = ‚assets/jquery/tablesorter/‘.TABLESORTER.’/js/tablesorter.js|static‘; ?> Die Konstanten wie JQUERY_UI oder SWIPE sind unter system/config/constants.php definiert und geben die Versionsnummer der Scripts zurück. * sei es wegen verschiedenen Vendors oder anderer Dateistruktur

Slider-Extensions für Contao im Vergleich und Überblick

In der Agentur (so wollte ich schon immer mal einen Satz anfangen) arbeiten wir recht viel mit Contao, wenn wir Kunden-Websites neu aufziehen. Oftmals wird auch ein Slider benötigt – sinnvoll oder nicht –, der sich mit einer der vielen Extensions gut nachrüsten lässt. Leider weiß man aber nie so genau, welcher Slider was kann und was nicht, für welche Contao-Version er taugt, und und und … Daher habe ich mir vor ein paar Monaten die Mühe gemacht ein Google Doc hierfür aufzusetzen, welches die unterschiedlichen Kriterien auflistet. Unter anderem sind dies: 2.11-/3.0-kompabilität; HTML5/XHTML-Ünterstützung; ob nur Bild- oder auch andere Elemente verwendet werden können; die Verwendung nur als Modul oder Inhaltselement oder gar beides möglich ist; Responsiveness; Mootools/jQuery; und weitere … Da ich selbst nicht die Zeit und Muße hatte, diese Tabelle zu pflegen, habe ich sie für die Öffentlichkeit bearbeitbar gemacht. Und viele viele viele Leute aus der Contao Community haben mitgewirkt wofür ich mich auch an dieser Stelle noch einmal bedanke. DANKE! Google Spreadsheet: „Slider-Extensions für Contao im Vergleich“ (http://bit.ly/contaoslider) Contao-Community-Eintrag

Linkscheucher 23

Die Links der letzten Tage, es ist einiges zusammengekommen. Größtenteils CSS3- und Photoshop-Zeugs, aber auch jQuery und ein bisschen WordPress. Grafik, Photoshop, Design 240+ Flag Icons In Every Size You Need | Web Resources | WebAppersFlaggen in Icons, Icons aus Flaggen. NoiseGen – Saving Precious Seconds Since 2010Rauschen ist ja gerade total angesagt, noch leichter wirds hiermit. Setting up Photoshop for web, iPhone and iPad developmentFarbverbindlichkeit und so. GradientsGrundlagen der Photoshop-Verläufe Case Studies | EPIC AgencyGute Sachen dabei. CSS, @font-face 100 @font-face fonts and how to use them « Web Design Blog – WebDesignShockBeispiele und Anleitungen zu @font-face Ultimate CSS Gradient Generator – ColorZilla.comVerläufe mit CSS3 und halbwegs-Support für unseren Freund Internet Explorer jQuery 150 best jQuery effects for web designers and developers « Web Design Blog – WebDesignShockWooosh, Transform, Boooing. Advanced jQuery, for those that dare WordPress, facebook Mobile interface for WordPress websites : WordPress Mobile EditionWordPress Mobile Edition enhances your site’s interface for visitors using a mobile device. By automatically detecting mobile browsers, this plugin gives your blog a mobile/phone/PDA- friendly interface with progressive enhancement for advanced mobile browsers. Facebook Like Button – Design

Linktipps

Man kommt ja durchs Netz und findet da das ein oder andere wichtige, gutaussehende und gehaltvolle Zeug. Das möchte ich euch natürlich nicht vorenthalten, deswegen sammel ich das beste, interessanteste, best-betitelste und stelle es hier als dicke Linkpackung herein. Grid Based Design Toolbox Alles was man für ein anständiges Raster im Web braucht und wissen sollte Design by Grid: Showcase Zusammenstellung von Grid-/Raster-Layouts im Web Great Collection of Visual Identities sehr schicke Sachen dabei (via agenturblog) How To Quickly & Easily Remove A Background In Photoshop war mir irgendwie auch nicht so bewusst. Kannte bisher nur die Pfad- und Lasso-Methode, hörte von Lab-Kanälen (mal ausprobieren) und habe das Zauberstabwerkzeug als massiv ungeeignet eingestuft. 12 free grunge cement textures Grunge. Zement. Photoshop. 19 Top Fonts in 19 Top Combinations, via Webdesignblog Ja doch, kann man so machen Passfotos selbst gemacht da ich anscheinend einen neuen Personalausweis brauche, kommt das ja vielleicht ganz entgegen. Wobei. What looks real is just fake Möchte man kaum glauben, ist aber so. 5 Kundenausagen, die Webdesigner in Zukunft nicht mehr hören wollen verdammt viel wahres dran! Kopfbunt sehr schönes Weblog das sich mit Design und so beschäftigt. Textile und Markdown Gerrit van Aaken über die Vor- und Nachteile der beiden Auszeichnungssprachen Sliding Boxes and Captions with jQuery

Bilder zentrieren mit CSS und jQuery

Ich saß heute am neuen Layout und wollte die Bilder, die in den Artikeln auftauchen, mittig ausrichten. Ausnahmen sind Bilder mit den Klassen .alignleft und .alignright. Gut, dachte ich mir, versuchste es mal mit text-align: center; aber Pustekuchen. Nach ein wenig Recherche schien mir die einzig brauchbare Möglichkeit zu sein, den entsprechenden Bildern ein neues Elternelement zu verpassen, beispielsweise ein <div> oder ein <span> und dessen Inhalt (also auch das Bild) zentriert darzustellen. Da ich 1.) nicht in den Textpattern-Dateien rumwuseln wollte und 2.) das Extra-Markup nicht ins HTML gehört, hab ich mich für die JavaScript-Methode entschieden und dabei jQuery ausprobiert. Meine Erfahrungen mit JavaScript (oder ECMAScript) sind seit jeher gering, da ich es bisher nicht gebraucht habe und ich immer an Icons die den Mauszeiger verfolgen und sonstige Spielereien denken musste, die ich schon immer fragwürdig hielt. Der jQuery-Code, den ich dafür nutze, sieht folgendermaßen aus: $(document).ready(function(){ $(„.entry-content img[class!=alignleft][class!=alignright]“).wrap(„<span class=\“imgbox\“></span>“); }); Es macht nichts anderes als nach dem Laden des Dokuments allen Bildern, die in einem Element mit der Klasse .entry-content enthalten sind, ein <span>-Element mit der Klasse .imgbox drumherum zu verpassen. Eine Ausnahme bilden wie schon gesagt Bilder mit den den Klassen .alignright/left, die bekommen kein <span>. (.entry-content stammt übrigens aus dem hAtom-Mikroformat, über das ich schon mal geschrieben habe.) In HTML übersetzt (vereinfacht: <img src=“bildname.jpg“ /> wird zu <span class=“imgbox“><img src=“bildname.jpg“ /></a> Das CSS sieht so aus: .imgbox { text-align: center; display: block; } .entry-content img { border: 1px solid #CACACA; background: #FFF; padding: 5px 5px 5px 5px; text-align: center; } Das…