Kategorie: JavaScript

Webseite mit Zurbs Foundation 6 Framework

24. März 2016 - CSS, JavaScript, wordpress

Nachdem mein langjähriger Favourit für responsive Webseiten, YAML, seit zwei Jahren zu meinem Bedauern keinen „Puls“ mehr hat, musste ich meine Webseite auf ein neues Framework umstellen und habe dafür Foundation 6 gewählt.

Foundation ( oder besser Foundation for Sites) ist bei uns weniger bekannt als Bootstrap.

Bootstrap 3 kannte ich schon aus einigen Projekten.  Die Version 4 ist schon seit vielen Monaten ( oder Jahren?) in Beta, und wenn man etwas Neues machen möchte, kam die alte Version nicht in Frage.

Zurb ist darüber hinaus eine interessante Company. Neben Foundation for Sites gibt es noch Foundation for Emails (=responsive HTML Emails) und Foundation for Apps (=responsive Web Apps für AngularJS). Beide zusätzlichen Produkte möchte ich in der nächsten Zeit ebenfalls ausprobieren.

Wenn man schon mit Bootstrap gearbeitet hat, kommt man mit Foundation gut zurecht. Die Klassen haben andere Namen aber ansonsten ähnliche oder sogar identische Funktionen.

Hier ist eine ausführliche Gegenüberstellung der Funktionen von Bootstrap und Foundation 6

Besonderheiten bei Foundation:

Mit „Interchange“ kann man für die verschiedenen Ausgabegeräte unterschiedliche HTML Fragmente oder unterschiedlich große Bilder anwählen. So wird z.B. die Ladezeit  der Webseite verbessert.

Mit „Block Grid“ kann man auf einfache Weise eine Anzahl von Content-Blöcken in einer Zeile gleichabständig verteilen.

 

Als Basis für meine Webseite habe ich das auf Foundation 6 basierende Theme Joints WP verwendet und modifiziert.

UI dialog verschiebt das Markup eines Dialogs: einfacher Workaround hier

2. Juli 2014 - JavaScript

Man hat einen mit display: hidden vesteckten Dialog auf der Seite und kann ihn aber nur einmal aufrufen. Der Grund dafür ist: UI dialog verschiebt das Markup beim Aufruf an eine andere Stelle.

English Summary: A second call to a hidden dialog on your page may fail. The reason is, that UI dialog moves the markup to another location.

Beispiel
HTML

<div class='product'>  <!-- product 1-->
...
<a href='#' class='description_link'>description</a>
<div class='description_markup'> <!-- hidden dialog 1 -->
..
..
</div>
</div>

<div class='product'>  <!-- product 2-->
...
<a href='#' class='description_link'>description</a>
<div class='description_markup'> <!-- hidden dialog 2 -->
..
..
</div>
</div>

...

JS

jQuery(document).ready(
function() {
jQuery('.description_link').click( function(e) {
e.preventDefault();
jQuery(this)
.next('.description_markup')
.dialog({
...
buttons: {
'Close': function() {
jQuery(this).dialog('close')
}
}
...

Nachdem der Dialog geschlossen wurde, funktioniert .next(..) nicht mehr, weil ‚description_markup‘ jetzt woanders auf der Seite steht.

Workaround:

jQuery(this)
.next('.description_markup')
.clone()
.dialog({
...
buttons: {
'Close': function() {
jQuery(this).dialog('destroy').remove()
}
}

Der Dialog wird mit einem Duplikat gestartet und das Duplikat beim Schließen des Dialogs gelöscht.

jqgrid multiselect in Apple and Windows Style – Mehrfachselektion von Tabellenzeilen

16. Juni 2014 - JavaScript

Oleg von Trirand.com hat auf stackoverflow eine Lösung angegeben, bei der man in jqgrid Tabellenzeilen wie unter Windows mit Shift- und Control-Key selektieren kann.
Die daraus entwickelte Lösung ist auch noch zum Apple (Command-key) kompatibel

 

English Summary: Below a solution for  jqgrid multiselect that works with shift-, control- and command key in both windows and apple os style

beforeSelectRow: function (rowid, e) {
var _this = $(this), rows = this.rows,
// get id of the previous selected row
startId = _this.jqGrid('getGridParam', 'selrow'),
startRow, endRow, iStart, iEnd, i, rowidIndex;

if (!e.ctrlKey && !e.shiftKey && !e.metaKey) {
_this.jqGrid('resetSelection');
} else if (startId && e.shiftKey) {
_this.jqGrid('resetSelection');

// get DOM elements of the previous selected and the currect selected rows
startRow = rows.namedItem(startId);
endRow = rows.namedItem(rowid);
if (startRow && endRow) {
// get min and max from the indexes of the previous selected
// and the currect selected rows
iStart = Math.min(startRow.rowIndex, endRow.rowIndex);
rowidIndex = endRow.rowIndex;
iEnd = Math.max(startRow.rowIndex, rowidIndex);
for (i = iStart; i <= iEnd; i++) {
// the row with rowid will be selected by jqGrid, so:
if (i != rowidIndex) {
_this.jqGrid('setSelection', rows[i].id, false);
}
}
}

// clear text selection
if(document.selection && document.selection.empty) {
document.selection.empty();
} else if(window.getSelection) {
window.getSelection().removeAllRanges();
}
}
return true;
}

 

jQuery simple Alternative zu js alert() mit Selbstzerstörung

23. Januar 2014 - JavaScript

In der vorhergehenden Version war ein Fehler: der ist hier korrigiert (Zeilen 27 und 28)
Error correction in code lines 27, 28

Hier ist ein einfaches Beispiel für eine Meldungsausgabe in einem js Programm, die den Benutzer informiert, aber seinen Workflow nicht unterbricht.

English summary: This is a minimalistic jQuery/ js example to alert a user but without corrupting his workflow. No clicking on ‚OK‘ is required. The information simply dissolves after some seconds. The example utilizes the jQuery promise interface to synchronize animations.

Ich benutze alert_dissolve() parallel zu alert()  immer dann, wenn ich dem Benutzer eine positive Rückmeldung geben möchte: alles gut, arbeite schön und unbesorgt weiter.

Einsatzfall ist z.B. ein post per ajax: der Benutzer legt irgend etwas an oder löscht etwas oder oder oder


$.post('mach_irgend_was.html',data,'json')
.done (function(data, status, xhr) {
var data = jQuery.parseJSON(data);
if(data.error)     {
alert(data.error); // schlimmer Fehler
.....
} else {
alert_dissolve(data.ok); // hab alles gemacht was du wolltest
}
})
.fail (function(data, status, xhr) {
alert('Systemfehler...');
.....
})

Die ‚mach_irgend_was.html‘ Seite  schickt zu diesem Zweck eine json decodierte Meldung mit einem Error Anteil und ggf. einem informativen Anteil.

In alert_dissolve() wird der informative Teil ein paar Sekunden unübersehbar angezeigt und verflüchtigt sich dann

Hier ist der Code


function alert_dissolve (text) {

//message centered in viewport
var viewportWidth=jQuery(window).width(),
viewportHeight=jQuery(window).height(),
documentScrollTop=jQuery(document).scrollTop(),
documentScrollLeft=jQuery(document).scrollLeft(),
minTop=documentScrollTop,
maxTop=documentScrollTop + viewportHeight,
minLeft=documentScrollLeft,
maxLeft=documentScrollLeft + viewportWidth;

var msg_box=jQuery("<div id='alert_dissolve'>"+text+"</div>")
.appendTo('body')
.css({
zIndex: 1500,
backgroundColor: 'rgba(255,255,255,0.1)',
color: 'green',
'font-family': 'Arial',
fontSize: 50,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 20,
paddingBottom: 20})
.hide();
// error correction:
var centerTop=documentScrollTop +(maxTop-minTop)/2 - msg_box.height()/2;
var centerLeft=documentScrollLeft + (maxLeft-minLeft)/2 - msg_box.width()/2;

msg_box.css({
position: 'absolute',
top: centerTop,
left: centerLeft})

.show()
.delay( 1200 )
.fadeOut(800);
msg_box
.promise()
.done(function() {
jQuery('#alert_dissolve').remove();
});
};

Er besteht nur aus drei Aktionen:

1. Füge ein formatiertes, unsichtbares <div> Element mit dem Text in den DOM ein

2. Positioniere es mittig im Viewport und über allem anderen Content
(mit z-index: 1500 liegt es dann auch über evtl. vorhandenen jQuery UI Dialogen)

3. Mache es animiert sichtbar und wieder unsichtbar und zerstöre es dann.

Das größte Problem ist es, das <div> mit remove() zu zerstören ohne die asynchronen Animationen zu beeinflussen. Deshalb verwende ich hier das promise Interface von jQuery.

jQuery Mobile – das kleine grosse Problem mit den Forms

5. Dezember 2013 - JavaScript

John Resigs jQuery hat mir schon immer gefallen. Es geht sehr elegant mit Javascript um und löst dabei fast unbemerkt Inkompatibilitäten der verschieden Browser.
Mit jQuery UI hat man schnell eine harmonische Webseite zusammengebaut, ohne viel mit CSS zu tun zu haben – was mit sehr entgegenkommt.

Die Kombination jQuery und jQuery UI (= JQuery Mobile) erschien mir daher die erste Wahl, wenn man die neuen Herausforderungen der inkompatiblen Betriebssysteme und Browser im mobilen Bereich angehen muss.

jQuery Mobile ist sehr ambitioniert und damit viel mehr als die reine Kombination von jQuery und jQuery UI.
Es ist ein neues Framework mit dem Versprechen, auf fast allem, was man mit sich herumtragen kann, maximal gut auszusehen.
Vielleicht ist es aber zu ambitioniert.

Nun zum Thema. Wir nehmen mal eine einfache Webseite

index.html
impressum.html

Damit wird jQuery Mobile leicht fertig. (Gilt auch z.B. für WordPress Seiten)
Ein paar neue Divs mit neuen Attributen wie data-role=“page“, data-role=“content“, data-role=“button“ usw, jQuery Mobile laden, ggf. ein theme mit dem themeroller erstellen wenn der Standard nicht gefällt.
Fertig.

Wir haben eine andere Webseite

index.html
impressum.html
kontakt.php

Üblicherweise hat kontakt.php am Anfang mehr oder weniger viel (PHP-)Code, der das Kontaktformular weiter hinten bearbeiten soll (Mails erzeugen, Datenbank …)
In einfachen Fall wird ja kontakt.php an sich selbst geschickt. <form action=“/“ …>

Also alles alter Kram.

Wenn man keine hohen Anspüche an den Dialog im Kontaktformular hat, wird jQuery Mobile auch damit leicht fertig.
Es gibt hierfür auch eine offizielle Demo

Leider zeigt diese Demo nicht die ganze Wahrheit. Nämlich den Fall, wo das Kontaktformular ein paarmal hin- und herläuft (z.B. wenn man gewünschte Termine erst im Backend mit der Datenbank verifizieren muss, wenn man ein Captcha einsetzt und und und.

Das Problem hat man auch erst, wenn man die Seite mit dem Dialog wieder verlassen möchte (und das zeigt die Demo schlauerweise nicht).
Sich selbst aufrufende Seiten erzeugen einen zusätzlichen Eintrag in jQuery Mobiles navigation stack. Für jQuery Mobile ist diese Seite dann mehrfach vorhanden.
Mit dem Effekt, dass man die Zurück-Taste mehrfach drücken muss, um wieder auf seine Ausgangsseite zu kommen. Bei fünf Hin- und Herläufen also fünf Mal 🙂

Da sich die Bildschirmanzeige nicht oder wenig ändert hat ein Benutzer den Eindruck, es tut sich nichts, die Anwendung hängt.

Dieses Verhalten gibt es wohl schon immer https://github.com/jquery/jquery-mobile/issues/3226 https://github.com/jquery/jquery-mobile/issues/5069. Die Threads sind schon älter und wurden vor ein paar Wochen wieder von den JQuery Mobile Entwicklern als issue geöffnet.

Die dort vorgeschlagene Lösung (data-history=false) funktioniert bei mir nicht.

Eine funktionierende Lösung ist etwas aufwändig. Man muss jQuery Mobile daran hindern, die kontakt.php mehrfach zu lesen und das Lesen selber durch AJAX übernehmen.
Eine kleine Hilfe war mir hier das promise Interface von jQuery .

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']);

Lösung eines jqGrid Performance Problems

7. August 2013 - JavaScript, PHP

jqGrid ist ein auf JavaScript/ jQuery basierendes Modul für die komfortable und professionelle Darstellung von HTML-Tabellen. Es gibt eine ganz gute Dokumentation, von der man aber nicht immer erwarten darf, dass sie aktuell ist.

Dafür sind die Entwickler von jqGrid in ihrem Blog und auf stackoverflow.com sehr bemüht, Probleme zu lösen und Beispiele zur Verfügung zu stellen. Das ist auch oft notwenig, denn jqGrid ist komplex und  besitzt gefühlte 2 Mio. Optionen.

Beim vorliegenden Fall handelte es sich um eine jqGrid Anwendung, die mit steigender Datenmenge nur noch einen weißen Bildschirm ablieferte.

Der „datatype“ in den Optionen von jqGrid war „local“, d.h. das Grid liest seine Daten von der Seite, auf der es aufgerufen wird. Zur Verringerung der Datenmenge gab es zwei Datumsfelder (von-bis), mit denen die Datenbankabfragen modifiziert werden konnten.

Lösung:

1. Umstellung auf ajax und XML, d.h. die Datenerzeugung und Vorverarbeitung wird auf einer zusätzlichen Seite (‚get_data_from_server.php‘) gemacht

Die neuen Optionen waren dann:

url:’get_data_from_server.php‘,
datatype: „xml“,
mtype: „POST“, …..

Dadurch spart man sich z.B. die im Falle „local“ notwendigen jQuery/ jqGrid Aufrufe, um die lokalen Daten in die entsprechenden Tabellenelemente zu kopieren:

jQuery(‚#………..‘).jqGrid(‚addRowData‘,….

Bei der Umstellung auf XML muss man etwas aufpassen. XML1.0  erlaubt eine Reihe von Zeichen nicht. Diejenigen, über die man in unseren Breiten am häufigsten stolpern wird, sind < und &.

Hier hilft es, < und & zu maskieren ( in PHP mit  htmlspecialchars() ) .
Alternativ können solche Daten auch mit CDATA  getagged werden. Die lässt der XML Parser auch passieren.

Unangenehm sind aber auch Steuerzeichen von 0x00 bis 0x1f. Hier akzeptiert XML nur 0x09 (HT), 0x0a (LF) und 0x0d (CR).

Steuerzeichen können z.B über eine Textbox ins System reinrutschen, in die ein Benutzer einenMS- Word-Text hinein kopiert.

Hier hilft z.B. bei PHP

preg_replace(‚/[\x00-\x08\x0b-\x0c\x0e-\x1f]/‘, ‚ ‚, $string);

oder wieder  CDATA  verwenden.

jqGrid zeigt bei nicht erlaubten Zeichen zwar die Anzahl der Datensätze richtig an, stellt sie aber nicht dar.

Also: schaut euch die js Konsolen eures Webrowsers gut an (bei Firefox sollte man den Firebug benutzen)

2. paging: Limitierung auf x Datensätze

Standardmäßig überträgt jqGrid vier Felder per POST an get_data_from_server.php

– die Sortierreihenfolge ( ab- oder aufsteigend)
– das Feld, nach dem sortiert werden soll (order by)
– die Anzahl der gewünschten Datensätze (limit)
– den Offset (mit welchem Datensatz wird begonnen)

Damit kann man sehr einfach die Datenmenge beschränken und dem Benutzer trotzdem die Möglichkeit geben, sich alle Datensätze ansehen zu können

In den Optionen kann man z.B. dann folgendes eintragen

rowNum: 10,
rowList:[10,20,100],…

rowNum ist der Standard, rowList erzeugt ein kleines Popup, mit dem der Benutzer die Anzahl der anzuzeigenden Datensätze umstellen kann

3. Limitierung auf bestimmte Datumsbereiche

Auch der Datumsbereich läßt sich noch in die neue Lösung einbauen. Dazu benutzt man die postData Option von jqGrid:

postData: {
from: function() { return $(„#von“).val(); },
till: function() { return $(„#bis“).val(); },
},…

#von bzw. # bis sind die IDs zweier Eingabefelder, die hier mit jQuery ausgelesen werden.

Damit werden zwei weitere Felder per POST an get_data_from_server.php gesendet, die man z.B. so auswerten kann:

if (isset ( $_POST [„from“] ) && $_POST [„from“] != „“) {
$from = $_POST [„from“] ;
$till = isset ( $_POST [„till“] ) && $_POST [„till“] != „“ ? $_POST [„till“] : $from;
} else {
$from = date ( „Y-m“ );
$till = date ( „Y-m“ );
}

Download Flash-Style loading Anzeige im eigenen jQuery Programm

3. September 2012 - JavaScript

Wenn ihr eine loading Anzeige im Flash-Stil in eurem jQuery Programm benötigt: hier ist ein kleines jQuery Programm dazu.

English Summary: The Flash style loading indicator is very popular on webesites. Here you can download a bundle of easy to use jQuery functions to achieve the same effect in your jQuery program.

Das js script bindet ihr mit

<script type='text/javascript' src='......
und das css mit
<link rel='stylesheet' href='.....

ein.

 

 

Die Animation startet (z.B. nachdem ein Formular per jQuery abgeschickt wurde) mit

jQuery.loading_effect_showLoading();

Sie wird beendet mit

jQuery.loading_effect_close();

oder wenn die Seite neu geladen wird.

Der Code wurde extrahiert aus dem Code von  Fancy Box von Janis Skarnelis und leicht verändert. Wenn ihr sehen wollt, wie es aussieht, schaut euch mal eine fancybox Webseite an.

Download  loading_effect

Viel Spass

Internet Explorer, display:none, image width = 0

1. März 2012 - HTML, IE, JavaScript

Wenn ihr ein Element (hier ein <div> mit einem img) auf eine Webseite stellt und es mit display: none versteckt, um es im Browser dynamisch anzupassen, kann es sein, dass ihr über einen kleinen feinen Unterschied zwischen dem IE und dem Rest der Browserwelt stolpert.

 

English Summary for „Internet Explorer, display:none, image width = 0“:

If it comes to hidden elements (display: none) on your website, your software may step over  some subtle differences between Internet Explorer and for example FireFox. FireFox and IE implement  „display:none“ elements in different ways that affect their width and height values.

IE und Firefox implementieren display:none unterschiedlich

Ich hatte per Plugin ein paar Zeilen in meine Seite eingefügt:

echo '<div id="bgimage" style="display: none; z-index: 0; overflow: hidden; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;">'
echo '<img src="'. plugins_url().'/hintergrundbild/images/'.$akt_image. '" alt="" width="'.$image_dims[0].'" height="'.$image_dims[1].'" style="z-index:1 ;" />';
echo '</div>';

Das Bild wollte ich im Browser per jQuery anpassen

...
var viewportWidth,viewportHeight,width_aspect_ratio,height_aspect_ratio,factor;
var bgimage=jQuery('#bgimage');
var imageWidth;
var imageHeight;
imageWidth=bgimage.find('img').attr("width");
imageHeight=bgimage.find('img').attr("height");
viewportWidth= jQuery(window).width();
viewportHeight= jQuery(window).height();
...

Das klappte auch beim FF ohne Probleme, aber der IE zeigte die Bilder nicht an.

Ursache war das „display:none“

Firefox baut das <div> so ein:

Internet Explorer ( Versionen 7-9) aber so:

Im ersten Fall waren die Bilddimensionen vorhanden, im zweiten Fall nicht.

Bilder nicht mit display: none verstecken

Also: in diesem Fall ist es besser, die Finger von display: none zu lassen und mit top:-32767 zu arbeiten.