Apache Subversion legt bei der Versionierung in jedem Ordner des versionierten Projektes einen Unterordner namens “.svn” an, in welchem die Historie der Codeänderungen gespeichert wird. Möchte man sein Projekt produktiv einsetzen und veröffentlichen, dann sind diese Unterordner störend. Mit einem svn export-Befehl können diese Ordner zwar entfernt -und das Projekt sauber ausgegeben werden, jedoch muss man dazu ein SVN-Tool installiert haben.
Unter Windows lassen sich die “.svn”-Ordner auch mit einer Batch-Datei rekursiv löschen. Dazu muss man nur folgendes tun:
- Eine Textdatei anlegen (z.B.
remove-svn.txt) - In diese Textdatei folgenden Inhalt schreiben:
FOR /F "tokens=*" %%G IN ('DIR /B /AD /S *.svn*') DO RMDIR /S /Q %%G - Die Endung der Textdatei von “.txt” auf “.bat” ändern (z.B.
remove-svn.bat) - Die Batch-Datei in den Ordner verschieben, in dem die svn-Ordner gelöscht werden sollen und dann durch einen Doppelklick ausführen
Today I saw a tiny JavaScript code on Stack Overflow which can be used as a jQuery plugin for preloading images. It is very handy and can be used easily:
jQuery.fn.preload = function() { this.each(function() { $('<img/>')[0].src = this; }); } jQuery(document).ready(function($) { $(['./images/image1.png', './images/image2.png']).preload(); });
I use this function to preload drag images which are used by event.dataTransfer.setDragImage but you can still preload everything else. It makes also much sense for hover images.
Detecting the viewport size of an Apple iPad is very easy with jQuery. You just have to use the following code example:
1 2 3 4 5 6 7 8 | <script src="./js/jquery.js"></script>
<script type="text/javascript">
var width = $(window).width();
var height = $(window).height();
var pre = document.createElement('pre');
pre.textContent = 'Viewport: '+width+'x'+height+' pixels';
document.body.appendChild(pre);
</script> |
The viewport for an iPad in landscape mode (with address bar) is 1024×690 pixels.
The viewport for an iPad in portrait mode (with address bar) is 768×946 pixels.
The viewport for an iPad in portrait mode (with address bar and debug console) is 768×896 pixels.
If you want to hide the address bar in portrait mode then you have to add the website to your homescreen and their must be this meta tag in your website’s header:
<meta name="apple-mobile-web-app-capable" content="yes" />
The viewport for a fullscreen portrait mode is then 768×1004 pixels.
The resolutions are based on the following setting:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
If you do not have this setting (or if you use different values for it), then the viewport will be lager or even smaller.
Mit dem Internet Explorer 8 hat Microsoft die Kompatibilitätsansicht eingeführt. Mit der Kompatibilitätsansicht wird die Rendering-Engine des Internet Explorers auf eine Vorversion gestellt, wodurch Webseiten, die für ältere IE-Versionen entworfen wurden, besser angezeigt werden können. Der “Compatibility Mode” wird durch ein Icon in der Adresszeile eingeschaltet.
Kompatibilitätsansicht im IE9
Für Webdesigner ist das Icon der Kompatibilitätsansicht ein Dorn im Auge, da es aussieht wie ein zerrissenes Dokument und dadurch der Eindruck entsteht, dass etwas mit der eigenen Webseite nicht in Ordnung ist. Um das Icon zu entfernen, muss die eigene Webseite selbst den Kompatibilitätsmodus bestimmen. Dazu wird der kompatible User-Agent als Meta-Tag für den Internet Explorer im head-Bereich der Seite angegeben:
1 2 3 4 | <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > <title>My Web Page</title> </head> |
Die gezeigte Variante stellt die Render-Engine des Internet Explorers auf die Version von Internet Explorer 7 um, was dazu führt dass beispielsweise ein Internet Explorer 9 die Webseite anzeigt wie der IE7.
Möchte man sich nicht auf eine spezielle IE-Version festlegen, sondern immer die Aktuellste benutzen, so muss folgender Eintrag gemacht werden:
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
Dank HTML5 gibt es modernen Browser drag und drop-Events, welche natives Drag & Drop ermöglichen. Es ist sogar vorgesehen, dass man das Bild (welches während eines Drag-Vorgangs angezeigt wird) ändern kann. Dazu muss man sich der setDragImage bedienen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div id="wrapper"
style="width:200px;height:200px;background-color:blue;"
ondragstart="handleDragStart(event)">
</div>
<script type="text/javascript">
var divWrapper = document.getElementById('wrapper');
divWrapper.setAttribute('draggable', 'true'); // for Chrome
divWrapper.style.backgroundColor = 'red';
function handleDragStart(event)
{
// Drag Image
var image = document.createElement('img');
image.src = './images/logo.png';
// Event
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', this.innerHTML);
event.dataTransfer.setDragImage(image, -10, -10);
}
</script> |
Anstelle eines Bildes (img) ist es auch erlaubt das neue HTML5 canvas-Element einzusetzen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div id="wrapper"
style="width:200px;height:200px;background-color:blue;"
ondragstart="handleDragStart(event)">
</div>
<script type="text/javascript">
var divWrapper = document.getElementById('wrapper');
divWrapper.setAttribute('draggable', 'true'); // for Chrome
divWrapper.style.backgroundColor = 'red';
function handleDragStart(event)
{
// Drag Image
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 100;
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(255, 0, 255)';
context.fillRect(0, 0, canvas.width, canvas.height);
// Event
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', this.innerHTML);
event.dataTransfer.setDragImage(canvas, -10, -10);
}
</script> |
Hinweise:
- Damit ein Objekt die Drag-Eigenschaft aufweist, muss es das Attribut
draggable="true"erhalten - Damit das
draggable-Attribut auch im Safari funktionert, muss folgender CSS-Stil gesetzt werden:1 2 3 4 5 6 7
[draggable=true] { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; user-select: none; }
- Für den Mozilla Firefox ist es notwendig, dass es ein
ondragstart-Event gibt - Es muss zuerst
dataTransfer.setDataaufgerufen werden, damitdataTransfer.setDragImagefunktioniert dataTransfer.setDatakann im Firefox nur in einemondragstart-Event benutzt werdendataTransfer.setDragImageerwartet ein Bild und eine Position (x,y). Die Position gibt ausgehend vom Mauszeiger an, an welcher Stelle das Drag Image angezeigt wird- Der Google Chrome erlaubt kein
canvas-Element als Bild insetDragImage. Deshalb muss vorher dascanvas-Objekt mittoDataURLin eine BASE64-kodierte Zeichenkette umgewandelt werden:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <div id="wrapper"
style="width:200px;height:200px;background-color:blue;"
ondragstart="handleDragStart(event)">
</div>
<script type="text/javascript">
var divWrapper = document.getElementById('wrapper');
divWrapper.setAttribute('draggable', 'true'); // for Chrome
divWrapper.style.backgroundColor = 'red';
function handleDragStart(event)
{
// Drag Image
var image = new Image();
image.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var canvasImage = new Image();
canvasImage.src = canvas.toDataURL('image/png');
// Event
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', this.innerHTML);
event.dataTransfer.setDragImage(canvasImage, -10, -10);
}
</script> |
Mit JavaScript ist es möglich ein Bild (image) dynamisch zu erstellen und einem Element (z.B. einem Div) zuzuweisen. Das folgende Code-Beispiel veranschaulicht diesen Effekt:
1 2 3 4 5 6 7 8 | <div id="wrapper"></div>
<script type="text/javascript">
var divWrapper = document.getElementById('wrapper');
var image = document.createElement('img');
image.setAttribute('src', './images/logo.png');
image.src = './images/logo.png'; // Alternative!
divWrapper.appendChild(image);
</script> |
Hinweis: Die Pfadangabe zum Bild kann absolut oder relativ (ausgehend vom HTML-Dokument!) sein.
1