Wie ich es gemacht habe: wie man ein Aufkleber-Band in 3 Schritten

Dienstag, 2. Dezember 2008

Der Aufkleber (oder Band) sind die Bilder, die sich in der oberen rechten Ecke oder oben links, und sie bilden gemeinsam eine Band Winkel. Es gibt verschiedene Arten, von einfachen Bildern zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, um ihre Position auch bei navigieren Sie den Inhalt des Browser-Fenster.
Wenn Sie nicht möchten, dass sich auf Dienstleistungen wie QuickRibbon.com, sondern wollen ein Band der eigenen, hier sind 3 einfachen Schritten zu folgen.

1. Wir schaffen das Bild

Zunächst erstellen wir das Bild, das wollen wir in einer Ecke, links oder rechts. Das Bild unten, bis 163x163 Pixel, ecostruita auf der oberen linken Ecke.

Ribbon Sticker

Um die volle Wirksamkeit der Überschneidung muss sich bei der Rettung, ein Format, das Transparenz, wie GIF oder PNG.

2. Der HTML-Code

Gespeicherte unser Image können wir es in unseren Seiten, die Umhüllung der das img mit einem div die Sie verwenden können, um das Bild in:

Plain Text
HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>

Wenn unsere Aufkleber sollte ein Link, wir können den map um einen sensiblen Bereich, ist nicht rechteckig. Die Aufkleber, die in diesem Beispiel, in der Tat, Sie haben eine Neigung und Transparenz zeigt perfekt die Konturen. Es wäre daher unangemessen, lassen klicken Sie auf einen leeren Bereich, indem Sie einfach ein Tag a introno Bild. Dann haben wir mit dieser Syntax:

Plain Text
HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink"> </ div>
  2. > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map name = "ribbonlink"> <area Form = "poly" Coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ map>

Das Attribut coords area definiert die Koordinaten unserer Band.

3. der CSS

Nun fügen wir die Definitionen der Stile, die zulassen, dass unsere Aufkleber auf Ihrer Seite zu positionieren sie richtig:

Plain Text
CSS:
  1. div.ribbon (
  2. ; position: absolute;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)
  9. div.ribbonimg (
  10. ;padding: 0 ;margin: 0 ; border: 0; padding: 0; margin: 0;
  11. } background-image: none)

Wenn wir wollen, dass die Band zu bleiben "stecken" in dem Video, auch beim Scrollen Sie das Fenster, nur die Art absolute Stil position fixed

Plain Text
CSS:
  1. div.ribbon (
  2. ; Position: fixed;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)

Hinweis: die fixed die im Stil position bis vor kurzem war es nicht von allen Browsern unterstützt. Um die Wirkung, in der Tat, war gezwungen, eine JavaScript-Funktion, dass in regelmäßigen Abständen kontrolliert die Strömung von den möglichen Inhalt des Fensters und ersetzen das Band, um den Eindruck zu bleiben im Wesentlichen unbeweglich. Zum Glück, heute, mit einigen veralteten Version von Explorer, von allen Browsern unterstützt die Art fixed

Verwandte Post

Tags:
Veröffentlicht in CSS, Internet, Javascript, Entwicklung, Tutorials | Kein Kommentar »

jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelten , JavaScript-Bibliotheken, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

Tags:
Veröffentlicht in CSS, Design & Grafik, Internet, Javascript, Entwicklung, Tutorials, jQuery | Kein Kommentar »

Wordpress: Schritt für Schritt, wie Sie ihre eigenen Login

Freitag, 24. Oktober, 2008

In diesem Tutorial werden wir sehen, wie man ein persönliches Login-Verfahren, mit Ajax Funktionalität mit jQuery. Es gibt mehrere Möglichkeiten, um Ihre Anmeldung bei Wordpress, zum Beispiel durch den Einsatz von Haken und Filter add_action() add_filter() Wir fahren zu einem Low-Level, auch wenn es Schnittstellen zu den Kernel, aber Wordpress. Auch stellen Sie sicher, dass die Validierung eines Benutzers Dupla per E-Mail / Passwort ein.

Warum ein Login?

  • In einigen Fällen lässt sich die Rückkehr uitle haben maximale Kontrolle über die Login-Seite, um ein benutzerdefiniertes Layout für unsere registrierten Benutzer. Sie können auch bereichern die Seite mit nützlichen Informationen, ein Logo von der klassischen "Haben Sie Ihr Passwort vergessen?"
  • Um den Zugang per E-Mail (wie oben gezeigt,) statt user_login Standard Wordpress
  • Zu können, geben Sie einen Login-Panel in der Seitenleiste des Blogs
  • Und schließlich, um ein Skelett - und eine Idee - für eine gute Plugin : D

Umgebung

In unserem Beispiel / Tutorial wird auf die Wurzel des Wordpress in einem Ordner mylogin Ich habe zwei PHP-Datei in diesen Ordner: index.php und logon.php Die erste enthält die Schnittstelle unserer Protokoll mit allen Features Javascript / jQuery wir dienen. Die zweite Datei logon.php wird der Code, um die Nutzer. Dann erstellen Sie einen Ordner css und innerhalb dieser Datei layout.css und einen Ordner images Innerhalb der Ordner Bilder wird eine klassische Ajax loader: createlo online AjaxLoad.info. Am Ende sollten Sie:

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

Lesen Sie weiter ... "

Verwandte Post

Tags:
Veröffentlicht in Ajax, CSS, Internet, JavaScript, PHP, Entwicklung, Tutorials, WordPress, jQuery | 9 Kommentare »

Sehr kurze Trick: undefined Werte in Javascript

Mittwoch, 22. Oktober 2008

Es ist ein abgekürzter Form, um "fliegenden" einen Wert in eine Variable, wenn ein anderer ist nicht definiert (undefined), wobei die logische ODER-Operator (| |) - Doppel-Rohr:

Plain Text
JavaScript:
  1. / / Pluto zeigt undefined
  2. var Pluto;
  3. ; var foo = Pluto | |'5 ';
  4. pippo ) ; alert (foo);
  5. / / Ergebnis: 5

Diese Technik ist nützlich, um Funktionen mit Parametern:

Plain Text
JavaScript:
  1. param ) { miaFunc Funktion (param) (
  2. ; var p1 = param | | 'Parameter';
  3. / / ...
  4. )

Aber wir müssen darauf achten, benutzen Sie dieses Formular als Null-Werte als 0 oder false sind falsch, weil der "Schuld" der logischen oder verwendet werden:

Plain Text
JavaScript:
  1. ; Pluto var = 0;
  2. ; var foo = Pluto | |'5 ';
  3. pippo ) ; alert (foo);
  4. / / Ergebnis: 5
  5. ; Pluto var = false;
  6. ; var foo = Pluto | |'5 ';
  7. pippo ) ; alert (foo);
  8. / / Ergebnis: 5
  9. ; Pluto var = 1;
  10. ; var foo = Pluto | |'5 ';
  11. pippo ) ; alert (foo);
  12. / / Ergebnis: 1

Verwandte Post

Tags:
Im Internet veröffentlicht, Javascript, Entwicklung, Tutorials | Kein Kommentar »

Camelize, CamelCase

Montag, 20. Oktober 2008

Wie in der Post Vielzahl von Kodierung und Codierung der Ansätze, die ein Entwickler haben ein Problem zu lösen, sind unterschiedlich, und viele der verwendeten Programmiersprache. Hier ist, wie einige der beliebtesten Javascript Rahmen gelöst haben eine einfache Funktion der CamelCase:

Prototype.js

Prototype.js, Version 1.6.0.3, ausdrücklich vor, eine Methode camelize() um die CamelCase an einer Schnur. Der Ansatz des Autors ist sehr einfach und wird der Code erscheint selbsterklärend. In diesem Fall gab es keine Verwendung von Regular Expression!

Plain Text
JavaScript:
  1. camelize: function () (
  2. . split ( '-' ) , len = parts. length ; var = dieser Teile. Split ('-'), len = Teile. Länge;
  3. len == 1 ) return parts [ 0 ] ; if (len == 1) return Teile [0];
  5. . charAt ( 0 ) == '-' var = camelized diese. Charat (0) == '-'
  6. ? ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) Teile [0]. Charat (0). toUpperCase () + Teile [0]. substring (1)
  7. ] ; : Teile [0];
  9. var i = 1 ; i <len; i++ ) for (var i = 1; i <len; i + +)
  10. . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = parts [i]. Charat (0). toUpperCase () + Teile [i]. substring (1);
  12. camelized return;
  13. )

Lesen Sie weiter ... "

Verwandte Post

Tags:
Im Internet veröffentlicht, Javascript, Entwicklung | Kein Kommentar »

Vielzahl von Kodierung und Codierung

Dienstag, 14. Oktober 2008

Wer argumentiert, dass die Programmplanung ist eine Kunst, und letztlich kann ich nur zustimmen, wenn vor allem scovano sehr verschiedene Lösungen für dasselbe Problem. Um zu verstehen, wie das wahr ist, so muss in der gleichen Sprache medisimo (JavaScript) gelöst werden können, völlig unterschiedliche Ansätze und Original.

Halle links Null

Eine Zahl, aber die Rede ist, gilt auch für jede Saite, wie 123 sein kann auf der linken Seite - zum Ausgleich - mit einer Reihe von Nullen, z. B.: 00123 Diese Notwendigkeit ist bei verschiedenen Gelegenheiten und ist nützlich für an - oder zeigen - eine Reihe sauber, implizit, die ihre maximalen Wert. In dem Video, zum Beispiel die klassischen Ergebnis (das Ergebnis) wird oft mit 001234 dass bei den meisten wird es dazu führen, dass 999999 Hier ist, wie das Problem gelöst wurde von verschiedenen Entwicklern:

Plain Text
JavaScript:
  1. / **
  2. * Linke String Pad
  3. *
  4. * @ Von http://snipplr.com/view/8423/left-pad-string/
  5. * @ Author Web-http: / / www.mechanicmatt.com/
  6. *
  7. * @ Param num - Striga zu füllen
  8. * @ Param totalChars - Anzahl der Zeichen, einschließlich der "Null"
  9. * @ Param padWidth - Zeichen zu füllen, standardmäßig "0"
  10. * /
  11. num, totalChars, padWith ) { leadingZeros Funktion (num, totalChars, padWith) (
  12. num = num + "";
  13. ? padWith = (padWith)? padWith: "0";
  14. num. length <totalChars ) { if (Nr. Länge <totalChars) (
  15. num. length <totalChars ) { while (Nr. Länge <totalChars) (
  16. padWith + num = num;
  17. )
  18. { } Else ())
  20. num. length > totalChars ) { //if padWith was a multiple character string and num was overpadded if (Nr. Länge> totalChars) (/ / if padWith war ein Vielfaches Zeichenkette und num wurde overpadded
  21. num. length - totalChars ) , totalChars ) ; num = num. substring ((Nr. Länge - totalChars), totalChars);
  22. { } Else ())
  24. return num;
  25. )
  26. leadingZeros ( "asdf" , 10 , "0" ) ) ; alert (leadingZeros ( "asdf", 10 "0"));

Diese Lösung ist äußerst artikulieren, aber Sie können eine beliebige Zahl von 0 bis Anzahl num der Wahl der Art der Zeichen, die von padWidth statt der 0
Definitiv Original, aber diese Lösung:

Plain Text
JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Von http://snipplr.com/view/700/stringpad/
  5. * @ Author http://d.hatena.ne.jp/brazil/20060721/1153489937
  6. *
  7. * @ Param str - Striga zu füllen
  8. * @ Param len - Anzahl der Zeichen, einschließlich der "Null"
  9. * @ Param ch - Zeichen verwendet werden, um
  10. * /
  11. str, len, ch ) { return new Array ( len- ( '' +str ) . length + 1 ) . join ( ch ) + str } Pad-Funktion (S., len, CH) (return new Array (len-(''+ str). Länge + 1). join (CH) + str)
  13. pad ( 56 , 4 , '0' ) ) ; // 0056 alert (pad (56, 4,'0 ')); / / 0056

Gleichen Ergebnis, mit einer völlig anderen Ansatz. Auch hier haben wir die Möglichkeit zu entscheiden, die Anzahl der Zeichen durch die Polsterung Parameter len und die Schrift, die ch Nicht, den Standard zu verwenden, die in der vorherigen Funktion.
Was ich stattdessen ...:

Plain Text
JavaScript:
  1. / **
  2. * String_pad
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ Web http://www.undolog.com
  6. *
  7. * @ Param s - Striga zu füllen
  8. * @ Param l - Ein String, der den Charakter ist, dass die Länge
  9. * ZB "0000"-Zeichen = "0" Länge 4
  10. * /
  11. s,l ) { return ( l. substr ( 0 , ( l. length -s. length ) ) +s ) ; } padding-Funktion (s, l) (return (l. substr (0, (l-s Länge. Länge)) + s);)
  12. padding ( '123' , '0000' ) ) ; alert (padding ('123 ','0000'));

Wenn Sie andere interessante Lösungen, zögern Sie nicht zu kommentieren : D

Verwandte Post

Tags:
Veröffentlicht in Javascript, Entwicklung | 16 Kommentare »

Eine Klasse Countdown in Javascript

Montag, 13. Oktober, 2008

In der Nachkriegszeit 3D-Countdown mit FIVe3D (Siehe wie ich es gemacht habe: Schreiben Sie eine Countdown in Flash), war eine Klasse Vorschlag für die Schaffung eines Objektes in Actionscript Countdown, hier ist eine ähnliche Version in Javascript:

Plain Text
JavaScript:
  1. / **
  2. * Countdown-Klasse
  3. *
  4. * @ Author Giovambattista Fazioli
  5. * @ @ E-Mail g.fazioli undolog.com
  6. * @ Web http://www.undolog.com
  7. *
  8. * @ Param dd (string) "Tag Monat, Jahr"
  9. *
  10. * /
  11. dd ) { Countdown-Funktion (dd) (
  12. / / Init Ziel Zeit
  13. Date ( dd ) ; var target = new Date (dd);
  14. = target. getTime ( ) ; dieser. targetTime = Ziel. getTime ();
  16. / **
  17. * Refresh Countdown
  18. * /
  19. = function ( ) { dieser. refresh = function () (
  20. Date ( ) ; var heute = new Date ();
  21. ( ) ; var = currentTime heute. getTime ();
  22. / / Time left
  23. this . targetTime - currentTime ) ; dieser. _leftMilliseconds = (this. targetTime - currentTime);
  24. ( this ._leftMilliseconds / 1000 ) ; dieser. _leftSeconds = Math. Stock (this. _leftMilliseconds / 1000);
  25. ( this ._leftSeconds / 60 ) ; dieser. _leftMinutes = Math. Stock (this. _leftSeconds / 60);
  26. ( this ._leftMinutes / 60 ) ; dieser. _leftHours = Math. Stock (this. _leftMinutes / 60);
  27. / / Nein-Modul
  28. = Math. floor ( this ._leftHours / 24 ) ; dieser. leftDays = Math. Stock (this. _leftHours / 24);
  29. / / Für die Druckausgabe
  30. = this ._leftMilliseconds % 1000 ; dieser. leftMilliseconds = diese. _leftMilliseconds% 1000;
  31. = this ._leftSeconds % 60 ; dieser. leftSeconds = diese. _leftSeconds% 60;
  32. = this ._leftMinutes % 60 ; dieser. leftMinutes = diese. _leftMinutes% 60;
  33. = this ._leftHours % 24 ; dieser. leftHours = diese. _leftHours% 24;
  34. )
  35. ( ) ; dieser. refresh ();
  36. )

Beispiel

Plain Text
JavaScript:
  1. countDown ( '1 1, 2009' ) ; var cd = new Countdown ('1 1, 2009 ');
  2. / / Anzeigen, wie viele Tage, Stunden, Minuten, Sekunden und Millisekunden in den ersten Januar 2009
  3. cd. leftDays + "," + cd. leftHours + "," + cd. leftMinutes + "," + cd. leftSeconds + "," + cd. leftMilliseconds ) ; Dokument. schreiben (dh leftDays + "," + CD. leftHours + "," + CD. leftMinutes + "," + CD. leftSeconds + "," + CD. leftMilliseconds);

Verwandte Post

Tags:
Im Internet veröffentlicht, Javascript, Entwicklung | 4 Kommentare »

Wordpress: wie man eine Antwort auf Kommentar mit jQuery

Freitag, 3. Oktober 2008

Kürzlich Cristiano Bis eine Gewinn-Plugin für Wordpress können zwei Links zu jedem Kommentar von einer Stelle (vielleicht haben Sie eine ähnliche, angesichts der Tatsache, dass das Verzeichnis WordPress.org Ich habe ein paar Irre, aber es wäre ein Software-Italienisch die Veranstaltung zu Ehren der hervorragenden Arbeit von Cristiano). Diese Links (Antwort-Quote) in Reaktion und / oder eine Liste der Autor eines Kommentars, indem Sie die langweilige Betrieb, um die At-Zeichen (@), um anzuzeigen, an wen sie gerichtet ist. In diesem Tutorial werde ich erklären, - in den mittel-Experten - wie Sie sich diese beiden Merkmale dieser selbst, ohne die Installation von Plug-Ins. Außerdem, mit den Fähigkeiten von jQuery, um die Partei in Javascript. Die Technik, das ist es, die gleiche habe ich die Einführung dieser Funktion in diesem Blog.

Hinweis: Die Verwendung eines Plugins ist die beste Lösung für diejenigen, die eher zu häufig ändern Sie Ihre WordPress-Template, zu beschränken oder es in der Erwartung zu tun. Dieses Tutorial will nur, um zu zeigen, wie man gezielte Eingriffe in den Code Wordpress und ist für die meisten neugierig.

Ändern Sie die Datei comments.php

Die erste Änderung, die aus, um den Link zu "antworten" und "Quoten" in jeder Kommentar. Um dies zu tun, editieren Sie die Datei comments.php befindet sich in dem Ordner, der unser Thema. Diese Datei enthält alle Anweisungen, die es Ihnen ermöglichen, um die Kommentare am Ende der Nachricht. Der Abschnitt, die uns (die können sich leicht von Ausgabe zu Ausgabe) ist die Schleife, um die verschiedenen Stellungnahmen, erkennbar durch:

Lesen Sie weiter ... "

Verwandte Post

Tags:
Veröffentlicht in CSS, JavaScript, PHP, Entwicklung, Tutorials, WordPress, jQuery | 13 Kommentare »

jQuery: wie man ein Plugin Verlängerung

Dienstag, 23. September 2008

Wie alle Buchhandlungen dieser Art auch jQuery ermöglicht es Ihnen, ihre grundlegenden Funktionen mit echten Plugin. Die Einhaltung der Regeln seiner Tätigkeit, nämlich restituiendo immer einen Zeiger auf das ausgewählte oder jQuery selbst, können Sie ein Plugin mit ein paar Zeilen Code. Nehmen Sie als Beispiel den Code im jQuery gegen alle: ein Benchmark mit 5 Browser, die (nach der Korrektur von Lukas):

Plain Text
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

Tags:
Im Internet veröffentlicht, Javascript, Entwicklung, Tutorials, jQuery | 3 Kommentare »

jQuery gegen alle: ein Benchmark mit 5 Browser

Mittwoch, 17. September 2008

Bild Ein guter Entwickler ist kein Problem, von einer Programmiersprache zur anderen. Die Wahl auf eine bestimmte Sprache, Rahmen-und Entwicklungsumgebung, ist mehr diktiert durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfinden. Jedoch ein wichtiger Faktor, die möglicherweise Einfluss auf die Wahl der "Rahmen", wie ist die Sympathie oder die Krankheit, die im Laufe der Zeit reifen. <