Monat: November 2013

WordPress CSS3 Animationen in einem vorgegebenen Artikel/Post anzeigen

28. November 2013 - JavaScript, wordpress

Hier ist ein kleines Plugin, mit dem man CSS3 Animationen in einem Post anzeigen kann.

Als Vorbemerkung: es geht hier nicht um das Pro und Contra von CSS3 Animationen und auch nicht darum, auf welchem Browser welche Animation läuft.
sondern nur ganz schlicht darum:
Ihr habt eine euch gefallende CSS3 Animation gefunden (gestohlen, ausgeliehen, …) und möchtet sie in einem eurer Posts der Welt präsentieren.

Das Plugin

css3_plugin.php:

<?php
/*
Plugin Name: css3_plugin
Plugin URI: http://www.it-in-a-box.com/
Description: Fügt CSS3 Animation in single-post ein
Author: Norbert Felgendreher
Version: 1.0
Author URI: http://www.it-in-a-box.com/
*/

if ( !class_exists('Css3_in_post') ) {
class Css3_in_post {

function Css3_in_post() {
add_action('wp_print_styles', array (&$this, 'my_styles_css'));
add_action('wp_print_scripts', array (&$this,'my_scripts_css'));
}

function my_scripts_css() {
if  (!is_single(*** hier kommt die ID eures Posts hinein ***)) return;
wp_register_script('css3_animation_js', WP_PLUGIN_URL.'/css3_plugin/js/css3.js', array('jquery'),false,true);
wp_enqueue_script('css3_animation_js');
}
function my_styles_css() {
if  (!is_single(*** hier kommt die ID eures Posts hinein ***)) return;
wp_register_style('css3_animation_css',WP_PLUGIN_URL.'/css3_plugin/css/css3.css');
wp_enqueue_style('css3_animation_css');
}
} // End Class
$Css3_in_post = new Css3_in_post();
}
?>

Also: Post verfassen, PostID herausfinden, Plugin editieren und installieren.
Das ginge alles noch viel einfacher, klar, aber dies ist schliesslich kein kommerzielles Plugin.

css3.css

ist etwas länglich. Dafür gibt es hier zwei Animationen. Die eine habt ihr schon gesehen, wenn ihr einen zu  HTML5 kompatiblen Browser habt, die andere seht ihr, wenn ihr auf den Blogtitel klickt.
Geht nicht in Chrome (Warum? Ich weiss es nicht! )

@keyframes wheel{
0%{
opacity:0.2;
left:2px;
transform:scale(1) rotate(0deg);
}
100%{
left: 600px;
opacity:1;
transform:scale(2) rotate(2000deg);
}
}
@-webkit-keyframes wheel{
0%{
opacity:0.2;
left:2px;
-webkit-transform:scale(1) rotate(0deg);
}
100%{
left: 800px;
opacity:1;
-webkit-transform:scale(2) rotate(2000deg);
}
}

@keyframes jump{
0%{
transform:translate(0px,0px);
}
25% {
transform:translate(20px,30px);
color: red;
}
50%{
transform:translate(50px,100px);
color: blue;
}
100% {
transform:translate(100px,80px);
color: yellow;
}
}
@-webkit-keyframes jump{
0%{
transform:translate(0px,0px);
}
25% {
transform:translate(20px,30px);
}
50%{
transform:translate(50px,100px);
}
100% {
transform:translate(100px,80px);
}
}
.animate_me0 {

animation: jump 5s ease-in-out 1 normal;
-webkit-animation: jump 5s ease-in-out 1 normal;
animation-play-state: paused;
-webkit-animation-play-state: paused;
}

.animate_me1 {

animation: wheel 5s ease-in-out 1 reverse;
-webkit-animation: wheel 5s ease-in-out 1 reverse;
animation-play-state: running;
-webkit-animation-play-state: running;
//animation-fill-mode: forwards;
//-webkit-animation-fill-mode: forwards;
}

css3.js

ist dafür etwas schlichter

jQuery(document).ready(function() {

jQuery('h1.blogtitle').addClass('animate_me1');
var posttitle=jQuery('h2.posttitle');
posttitle.addClass('animate_me0');

posttitle.click( function() {

posttitle.css("-webkit-animation-play-state", "running");
posttitle.css("animation-play-state", "running");

});
});

Man kann auch die 2. Animation auch nicht durch erneutes Anklicken wiederholen, dafür müsste man mehr Gehirnschmalz in das .js stecken.

Vielleicht kann man aber dadurch auch erkennen, dass CSS3 noch viel weiter reifen muss, bis man es im Schlafe anwenden kann.

Fix und sicher – jQuery datepicker kombiniert mit altField

17. November 2013 - HTML, JavaScript

Das Lieferdatum steht in der Datenbank im date Format und wird dem Kunden nur angezeigt.
Plötzlich will der Kunde es änderbar haben und das möglichst vorgestern.

Ein Textfeld soll her!

Nein!!! Oh, Schock, mit dem Datum ist nicht zu spassen, es gibt ja schließlich mehrere Milliarden Möglichkeiten, was der Kunde da hineinschreiben könnte.
z.B. „drei Tage später“ oder „1,septemba zweitausendneun10“.
Wie bekommt man sowas wieder in die Datenbank zurück mutiert?

Die Lösung ist, wir nehmen den datepicker vom jQuery UI und nutzen dessen altField Option.
Wir brauchen noch zusätzlich im Formular ein hidden input field und (doch!) ein einfaches Text field, das wir aber eher ignorieren als nutzen.

<tr>
<th>Liefertermin</th>
<td>---hier wird der Liefertermin wie immer schon angezeigt  27. August 2019 </td>";
</tr>

<tr id='picker_start'>
<th>Liefertermin ändern:</th>
<td><input type='text' id='picker' ></td>   hier steht später das vom Kunden geänderte Lieferdatum
<input type='hidden' name='liefertermin' id='get_date' value='---hier schreiben wir das Datum aus der DB im date Format hinein--'></td>";
</tr>

Das ist alles bis auf das Javascript

$( "#picker" ).datepicker({
altField: "#get_date",altFormat: "yy-m-d",dateFormat: "d.M.yy"
});

Der datepicker poppt auf, wenn das Textfield mit der id „picker“ den Focus erhält, bezieht dann sein Start-Datum aus dem hidden field, der Kunde ändert das Datum und datepicker schreibt das neue Datum  in das hidden field und das Textfield, hier aber in etwas schönerer Form.
Wenn man deutsche Monatsnamen haben möchte, muss man dem datepicker dies mitteilen (weiter unten)
Wenn der Kunde das Formular abschickt, machen wir das update in die Datenbak vom hidden field.

Achtung: date in mysql hat die Form Y-m-d für den 27. August 2019, also 2019-08-27 , der datepicker hat aber eine eigene andere Formatanweisung: yy-m-d

Datepicker deutsch:

$.datepicker.setDefaults($.datepicker.regional['de']);

Tut sich dann nichts, muss man
$.datepicker.regional[‚de‘] von google herunterladen.
Zur Zeit sieht die Datei so aus:

$.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen',
closeText: 'schließen', closeStatus: 'ohne Änderungen schließen',
prevText: 'currentText: 'heute', currentStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen',
weekHeader: 'Wo', weekStatus: 'Woche des Monats',
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d',
dateFormat: 'dd.mm.yy', firstDay: 1,
initStatus: 'Wähle ein Datum', isRTL: false};
$.datepicker.setDefaults($.datepicker.regional['de']);