jquery: Runde Kanten an Bilder, um zu Überschneidungen

Donnerstag, 30. Oktober, 2008

Aufgrund der unterschiedlichen Rendering zwischen verschiedenen Browser, der sicherlich finden Sie im Microsoft Internet Explorer zu berücksichtigen, müssen wir immer Mittel zu beantragen artifizi Effekte, die jetzt sollte ein Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe", hergestellt durch die vollständige Unfähigkeit zur Erreichung einer Standard ernsthaft auf Seite Rendering HTML / CSS. Es gibt zahlreiche Networking-Lösungen, die Ihnen die Möglichkeit zu "Auswirkungen" (Auswirkungen Freistellung dall'HTML als abgerundeten Kanten, Schatten Effekte, Reflexionen, etc ...) mit Patches auf den Blättern der Stile, spezielle Tricks mit div veredelt, Bibliotheken Javascript, die Nutzung von canvas etc ...
Aus rein pädagogischen ich würde erklären, weitere technische (Cross-Browser), die für die abgerundeten Kanten der Bilder:

Demos und Quellen

Weiter zu lesen ... "

Verwandte Post

Wordpress: Schritt für Schritt, wie Sie ein Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie die Schaffung eines persönlichen Login-Prozedur, mit Ajax-Funktionalität via jquery. Es gibt verschiedene Möglichkeiten zum Anpassen der Login Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir benutzen ein Low-Level, obwohl wir noch Schnittstellen zu den Kernel Wordpress. Achten Sie außerdem darauf, zur Validierung eines Nutzers durch die doppelte E-Mail / Passwort ein.

Warum erstellen Sie ein Login?

  • In manchen Kontexten zurückkehren können uitle haben die Kontrolle über die Login-Seite, auf, einen benutzerdefinierten Layout an unsere registrierte Benutzer. Sie können auch bereichern die Seite mit Informationen, ein Logo von der klassischen "Passwort vergessen?"
  • Um den Zugang per E-Mail (wie hier gezeigt-Vertrag) statt user_login Standard Wordpress
  • Zu können, geben Sie einen Login-Panel in der Seitenleiste von unserem Blog
  • Und schließlich, haben ein Skelett - und eine Idee - für eine gute Plugin : D

Umgebung

In unserem Beispiel / Tutorial Arbeit an der Wurzel von Wordpress in einem Ordner mylogin Ich habe zwei PHP-Dateien in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle von unseren Login, mit allen Funktionen Javascript / jquery denen wir dienen. Die zweite Datei, logon.php wird der Code zur Validierung der Benutzer. Dann erstellen wir einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder sind ein klassisches Ajax-Loader: erzeugen Sie sie online unter AjaxLoad.info. Am Ende sollten Sie:

  • mylogin
    • index.php
    • logon.php
    • css
      • layout.css
      • Bilder
        • ajax-loader.gif

Weiter zu lesen ... "

Verwandte Post

jquery: Animierte HintergrundFarbe

Mittwoch, 15. Oktober, 2008

Ich habe es nicht verstehen, wenn es sich um einen Fehler oder etwas gewünscht, aber es bleibt die Tatsache, dass die Methode animate() jquery funktioniert nicht mit einigen CSS-Eigenschaften, einschließlich der background-color (die als camelize ist backgroundColor Zum Beispiel der folgende Code erzeugt keine Wirkung:

HTML:
  1. > <style type = "text/css">
  2. # div-Box (background-color: # EEE; width: 100px; height: 100px)
  3. </ Style>
  4. <! - .... ->
  5. > </div> <div id = "box"> </ div>

JavaScript:
  1. ) . animate ( { backgroundColor: "#f90" } ) ; $ ( "# Feld Abt."). Animieren ((Hintergrundfarbe: "# F90"));

Um dieses Problem zu beheben ist die Installation eine Erweiterung: jquery Color Animationen. Dies ermöglicht es Ihnen, "Animation" sull'attributo backgroundColor und darüber hinaus:

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Verwandte Post

Wordpress: wie man eine Antwort auf den Kommentar mit jquery

Freitag 3. Oktober, 2008

Vor kurzem Cristiano Fino eine Gewinn-Plugin für Wordpress können zwei Links zu jeder Kommentar von einem Post (vielleicht haben Sie installiert eine ähnliche, angesichts der Tatsache, dass das Verzeichnis Wordpress.org Ich habe ein paar Irre, sondern als ein italienischer Software wäre die Veranstaltung zu Ehren der ausgezeichneten Arbeit von Cristiano). Diese Link (Antwort & shares), treffen und / oder ein Zitat der Autor von einem Kommentar, indem Sie die langweilige Betrieb, um das Zeichen an (@), um anzuzeigen, an wen sie gerichtet ist. In diesem Tutorial möchte ich erklären - in den mittel-erfahrene Benutzer - wie Sie diese beiden Features "auf der Hand", ohne all'istallazione Plugin. Auch nutzen die Möglichkeiten der jquery an die Partei, in Javascript. Die Technik stellt die gleichen I verwendet, um diese Funktion in diesem Blog.

Hinweis: Die Verwendung eines Plug ist die beste Lösung für diejenigen, die häufig zur Änderung ihrer Vorlage Wordpress oder zumindest, hat in der Erwartung zu tun. Dieses Tutorial soll nur zeigen, wie Sie gezielt in den Code Wordpress und ist für die meisten neugierig.

Ändern Sie die Datei comments.php

Die erste Änderung zu machen ist, geben Sie den Link "Antwort" und "Einheiten" innerhalb jeder Kommentar. Um dies zu tun, bearbeiten Sie die Datei comments.php befindet sich im Ordner unserer Thema. Diese Datei enthält alle Anweisungen, die Ihnen erlauben, um die Kommentare am Ende eines Posts. Der Abschnitt, der uns interessiert (die können geringfügig vom Thema zu Thema) ist die Schleife Schaffung der verschiedenen Stellungnahmen, erkennbar durch:

Lesen Sie weiter ... "

Verwandte Post

jquery: wie man ein Plugin-Erweiterung

Dienstag, 23. September, 2008

Wie alle Bibliotheken dieser Art auch jquery können, ihre grundlegenden Funktionen mit echten Plugin. Einhaltung der Regeln seiner Tätigkeit, nämlich restituiendo immer einen Zeiger auf den ausgewählten oder jquery selbst, können Sie ein Plugin mit ein paar Zeilen Code. Nehmen Sie als Beispiel den Code in jquery gegen alle: ein Benchmark mit 5 Browser, der war (nach der Korrektur von Luca):

JavaScript:
  1. ) . css ( 'cursor' , 'pointer' ) . click ( $ ( 'H2.dropdown "). CSS (" Cursor "," Zeiger "). Klicken Sie auf (
  2. Funktion () (
  3. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  4. )
  5. );

Lesen Sie weiter ... "

Verwandte Post

jquery gegen alle: ein Benchmark mit 5 Browser

Mittwoch, 17. September, 2008

Bild Ein guter Entwickler hat kein Problem, um von einer Programmiersprache in einen anderen. Die Wahl, sich auf eine bestimmte Sprache, Rahmen-und Entwicklungsumgebung, ist diktiert mehr durch die Verfügbarkeit von Zeit und Art der Arbeit, die stattfinden. Es wird jedoch ein wichtiger Faktor, Mai Einfluss auf die Wahl der "Rahmen" wie, ist die Sympathie oder die Krankheit, die im Laufe der Zeit reifen.
Genauer gesagt, ich wollte zu analysieren einige - nicht alle - Javascript Rahmen verfügbar heute, denn "empfohlen", sich in erster Linie auf jquery.
Die Entwickler von mootools (eins der beliebtesten JavaScript Framework) zur Verfügung gestellt hat, ein Instrument, um einen Test der Geschwindigkeit und der Gültigkeit von fünf bekannten Rahmen Javascript: Slickspeed. Diese Prüfung, die Ergebnisse nicht Rabatt auf alle, ist wichtig, da die Rahmenbedingungen Javascript Client-Seite, die wird von unserem Browser. Gerade aus diesem Grund, dass einige finden Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox. Allerdings ist diese oft hängt von der Art der Seite, die Sie sich ansehen. In der Tat ist, kann sehr gut passieren, dass eine bestimmte Website ist wirklich mehr "schnell", wenn sie im Safari, aber dies bedeutet nicht, dass "alle Seiten werden schneller mit Safari! Natürlich, diese Rede ist gültig für alle anderen Browser.

Die Benchmark

In Tests habe ich mit Slickspeed Ich habe den Browser auf meinem Rechner (Utilmate Windows Vista 64bit - Intel Core 2 Quad 2,4 GHz mit einer 8GB RAM).
Leider sind die Tests nicht in der Lage sind, um es mit Internet Explorer 7, denn blockieren das Auto, auch Ausgehen der Skala mit den Ergebnissen! Noch einmal, herzlichen Glückwunsch Microsoft.
Ich crercato identisch mit Beibehaltung des Status der PC während der Prüfung, bei der Eröffnung der Browser separat und nicht jemand anders Senden laufenden Prozess.

Hinweis: Wenn Sie der Meinung sind wie Sie ein oder mehrere dieser Tests können Sie Kommentar zu diesem Beitrag im Falle von "neugierig" und unterschiedliche Ergebnisse.

Bild

Google Chrom ist wirklich schnell, mit einem Wert von 68 (Durchschnitt) in den Test mit jquery. Je langsamer, jedoch erschien es Flock, trotz der aus dem gleichen "Mutter" Mozilla. Dieses schlechte Ergebnis für Flock ist wirklich neugierig angesichts ihrer Schneiden Social Network, denn es ist die Social Network Web 2.0 nutzen viele von Javascript Rahmen zur Verfügung, um so eine Navigation und Interaktion wirklich innovativ.
Eine Überraschung Beat Firefox und Opera hat auch eine Menge ", auch immer ein 74 in der Dojo! Firefox und Safari, nachdem alle, sind gleichermaßen, mit Safari schneller in Tests mit Mootools und jquery.

Was Rahmen zu wählen?

Ist dies nicht der Fall badiamo, um die Schnelligkeit bei der Ausführung und wir kümmern uns nicht um die Größe in KByte der gleichen Rahmen, die Antwort könnte ", was für Sie" oder, wenn Sie es bevorzugen, "was Sie wissen am besten, oder ist mehr harmonische mit Ihrem Stil der Programmierung. "
Letztlich sind diese Rahmenbedingungen wird sich etwas "alle (siehe die Verwendung von $ zum Beispiel), obwohl einige wichtige und wesentliche Unterschiede, die springen in den Augen eines Sachverständigen oder wirklich gedrängt in einer bestimmten Bibliothek. Im Prinzip, in der Tat alles, was erreicht werden kann, mit jquery, zum Beispiel, können Sie auch mit mootools oder Prototyp! Wenn jquery hat eine sehr kompakte Syntax, da alle Methoden immer wieder die jquery Objekte angegeben werden, wodurch endlose Dateien von oggetto.metodo().metodo().metodo()... ist nicht gesagt, dass es sich hierbei um auf allen Kosten einer Stärke, vor allem für diejenigen, die haben zu debuggen!
Bibliotheken als prototype.js sin vielleicht in Ermangelung von grafische Effekte, selbst einfache, zwingt die Entwickler zur Umsetzung als Spin-Off scriptaculous.js, schwere und entfernten aus der Bibliothek erste Wahl.

Ein Beispiel

Genau dieser letzte Grund, zum Beispiel, nahm mich an die Stelle der gekoppelten Prototyp / scriptaculous mit jquery, um die interaktiven Tafeln / animierte hier in der Sidebar des undolog.com. Tatsächlich, auch mit Google-API-Bibliotheken zu importieren, ist eine Verschwendung laden Sie die gesamte Bibliothek scriptaculous für eine slideDown und slideUp. Für Informationen und Probe, hier gestern Javascript-Code in Verbindung mit dem Prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown "). Jeder (
  3. element ) { Funktion (Element) (
  4. = "pointer" ; Element. Stil. Cursor = "Zeiger";
  5. 'click' , Element. beobachten ( "klicken Sie auf",
  6. event ) { Funktion (event) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. next (). Stil. Display == "") neuen Effekt. BlindUp (this. next (), (duration. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Wirkung sonst neu. BlindDown (this. next (), (Dauer:. 3));
  9. event ) ; Event. Stop (event);
  10. )
  11. )
  12. )
  13. );

und es ist jetzt mit jquery:

JavaScript:
  1. / / Jquery
  2. ) . each ( $ ( 'H2.dropdown "). Jeder (
  3. i ) { Funktion (en) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). CSS ( "Cursor", "Zeiger"). Klicken Sie auf (
  5. Funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Denn auf allen, ich glaube nicht, dass es einen großen Unterschied! Aber wie ich bereits sagte vor dem ... Frage ist, "gut" des persönlichen Geschmacks.

Verwandte Post

jquery Restyling

Sonntag 31 August, 2008

In diesen Tagen (im Rat ...) Ich war auf der Suche auf jquery, eine Bibliothek Stil prototype.js, scriptaculous.js, mootools, zum Beispiel ... und hier und heute, dass die gesamte Website wurde komplett neu gestaltet:

Bild

Sehr gutem Start in meinen Horizont erweitern auf diese Art von Bibliotheken! Demnächst veröffentlichen einige interessante Artikel, insbesondere über die Unterschiede zwischen jquery und anderen Bibliotheken "ähnlich".

Verwandte Post

Shadowbox 2.0: Release Candidate 1

Dienstag, 8. Juli, 2008

shadowbox Es wurde freigegeben Release Candidate 1 (RC1) Version 2.0 Javascript-Bibliothek Shadowbox, Michael Jackson JI, hilfreich zu öffnen Fenster für die Ansichten der verschiedenen Arten von Medien, von Flash auf QuickTime zu HTML-Seiten. In dieser neuen Version sind:

  • Die Webseite ist voll von Informationen und jetzt auch ein Assistent (im Stil von mootools), um on-the-fly ein Paket von benutzerdefinierten Bibliothek auf unsere Bedürfnisse
  • Fähigkeit zur Nutzung einer Form Standalone-Basis, ohne notwendigerweise auch - Adapter für - wie prototype.js externe Bibliotheken, jquery, etc. ...
  • Verbesserungen an der Verwaltung und Durchführung der Haut
  • Standort

Die Bibliothek ist auch auf SVN unter:

  http://michaeljackson.googlecode.com/svn/trunk/shadowbox 

Verwandte Post

Google AJAX API-Bibliothek: ein Wendepunkt für Entwickler

Donnerstag, 29. Mai, 2008

AJAX API-Bibliotheken Google, in der zweiten perdiodo, hat eine Vielzahl von Werkzeugen für Entwickler, ständig aktualisiert ihre Releases. Jetzt läuft eine Vereinbarung mit beliebten AJAX-Rahmen, und nicht nur zu zentralisieren die Verteilung der Bibliotheken jquery, Prototyp, script.aculo.us, mootools und Dojo!

In der Praxis, können Sie Zugriff auf diese Bibliotheken mit der Infrastruktur und die Google-Netzwerk, mit erheblichen Vorteilen in Bezug auf Geschwindigkeit und Sicherheit.

Die Geschwindigkeit, der Verladung, der ist garantiert von der selben Netzwerk, dass Google und per se eine verteilte Server, so dass (standardmäßig) Be-komprimierte (gzip / minify) Bibliothek. Die Hosting-Google näher an die Anfrage wird verwendet, um den Code, und wenn nicht erreichen oder vorübergehend, die Google-Netz wird immer noch senden Sie die Javascript-Code!

Lesen Sie weiter ... "

Verwandte Post

Light-Bibliothek: Slimbox von einem Shadowbox, Galerien in Javascript

Wednesday 13 Februar, 2008

Einige könnten sagen - nicht zu Unrecht - genug! JavaScript-Bibliotheken (unaufdringlich - nicht aufdringlich oder teilweise) für die Verwaltung von Bildern und Galerien gibt es wirklich hoch. Wie auch immer hier ist die Liste, mit Stärken und Schwächen, desto besser fühlte ich mich.

SLIMBOX 1,41

Äußerst minimal, 7K (Version 1.41), erfordert mootools zu arbeiten. Wie bereits auf der Startseite ist ein echter Klon Grafik Leuchtkasten, die wir siehe unten. Ehrlich gesagt, abgesehen von der extremen Kompaktheit der Bibliothek, hat keine Besonderheiten. Am selben Ort, jedoch, finden Sie auch ein Skript zu generieren Ideen Laufzeit ... zu begrenzen Dies kann sinnvoll sein, ;)

Bewertung: - 6 - Home Page Slimbox, Home Page Reflection.js für mootools

Lightbox2

Lightbox2 Einer der bekanntesten und einfach. Ist in diesem Release sind Bilder (nicht mit QuickTime, Flash oder andere). Für den Betrieb benötigt Prototype und Scriptaculous. Verwenden Sie das Attribut rel zur Identifizierung der Verbindungen der Bilder verarbeitet werden:

HTML:
  1. rel = "lightbox" title = "my caption" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> Bild # 1 </ a>

Wie bei anderen Bibliotheken, dass wir sehen werden, unterstützt die Diashow-Modus, wobei in Klammern eine Identifikation in einer Reihe von Link / Bild:

HTML:
  1. rel = "lightbox[roadtrip]" > image #1 </a> <a href = "images/image-1.jpg" rel = "lightbox[roadtrip]"> Bild # 1 </ a>
  2. rel = "lightbox[roadtrip]" > image #2 </a> <a href = "images/image-2.jpg" rel = "lightbox[roadtrip]"> Bild # 2 </ a>
  3. rel = "lightbox[roadtrip]" > image #3 </a> <a href = "images/image-3.jpg" rel = "lightbox[roadtrip]"> Bild # 3 </ a>

Bewertung: 6 - Home Page Lightbox2

LIGHTWINDOW 2,0

LightWindow 2,0 Dies ist recht verbreitet! Denn, wie zu verstehen, was ist das am meisten benutzte? ;). Wie dem auch sei ist umfassend und äußerst vielseitig. Auf der Website steht ein Antrag für Spenden an einen Mac kaufen ... ein wenig invasive und drücken ... Jedoch, wie seine Vorgänger, für seinen Betrieb vorgesehen werden, erfordert Prototype und Scriptaculous. Im Gegensatz zu den vorhergehenden ein, aber dieser macht moltisiimi Arten von Dateien aus Bildern, QuickTime-Filme, Flash-Filme, externe HTML-Seiten und PDF. Im Gegensatz dazu nutzt mehrere Attribute, einige optional author, caption title Anforderungen class und params - Verhalten Bibliothek). Zum Beispiel, um eine Galerie oder eine Diashow mit dem Attribut rel

HTML:
  1. class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's super tasty!" author= "Unknown" > image #1 </a> <a href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption= "Look's super tasty!" author= "Unknown"> Bild # 1 </ a>
  2. class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption= "I shouldn't be doing this when I am hungry" author= "Unknown" > image #2 </a> <a href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Vorsicht vor warewolves ..." caption = "Ich sollte nicht dabei, wenn ich hungrig bin" Autor = "Unbekannt"> Bild # 2 </ a>
  3. class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption= "Take that sushi!" author= "Unknown" > image #3 </a> <a href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That wurde good!" caption= "Take, dass sushi!" author= "Unknown"> Bild # 3 </ A>

Bewertung: 8 - Home Page LightWindow 2,0

SHADOWBOX 1.0b

Shadowbox Obwohl Version 1.0 beta, das ist vielleicht die umfassendste Bibliothek, die beide funktionell und zur Unterstützung von Bibliotheken. Für seine Arbeitsweise, in der Tat, Sie können aus einer Reihe von Rahmen, dank der Datei "Adapter", besonders aus und die vom Autor:

Die visuelle Wirkung (konfigurierbar über die Haut / css), dann, im Gegensatz zu den anderen, ist sicherlich ansprechender. Die Attribute sind nur rel wo, in ihren internen Raum sind alle anderen Konfigurations-Parameter. Zum Beispiel, um eine Galerie, benutzen Sie einfach:

HTML:
  1. rel = "shadowbox[Vacation]" > The Beach </a> <a href = "beach.jpg" rel = "shadowbox[Vacation]"> The Beach </ a>
  2. rel = "shadowbox[Vacation]" > The Pier </a> <a href = "pier.jpg" rel = "shadowbox[Vacation]"> Die Pier </ a>

Wenn Sie möchten, um einige Optionen (siehe Website für vollständige Liste) nur verwenden Sie die folgende Syntax:

HTML:
  1. rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image </a> <a href = "myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}"> Mein Bild </ a>

Im Internet finden Sie andere, wie zum Beispiel Highslide JS. Tatsächlich, wenn Sie wollen, sagen einige andere Bibliothek ... Allerdings, ich persönlich bevorzuge Shadowbox für Einfachheit, Skalierbarkeit und Cross-Rahmen.

Bewertung: 9 - Home Page Shadowbox 1.0b

Verwandte Post