Wer kleine Webseiten auf dem iPad hoch und runter gescrollt hat, wird sicherlich bemerkt haben, dass es dabei einen kleinen “bounce”-Effekt gibt, bei dem über den Rand der Seite hinaus gescrollt werden kann. Dieser Effekt sieht zwar nett aus, ist aber nicht immer wünschenswert.

Um diesen Bounce-Effekt abzuschalten, muss das Standardverhalten bei Touch-Events auf dem iPad verhindert werden. Das geht mit folgendem JavaScript-Schnippsel:

1
2
3
4

document.ontouchmove = function(event)
{
  event.preventDefault();
}

Es gibt übrigens folgende Touch-Events:

• touchmove
• touchstart
• touchend
• touchcancel

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13

var globalVariable = {};
globalVariable.arrayOne = [1, 2, 3];
var referenceVariable = globalVariable.arrayOne;
 
console.log('Size of arrayOne: '+globalVariable.arrayOne.length);
console.log('Size of referenceVariable: '+referenceVariable.length);
 
// Add something to the referenceVariable...
referenceVariable.push(72);
 
console.log('EFFECT OF CALL BY REFERENCE');
console.log('Size of referenceVariable: '+referenceVariable.length);
console.log('Size of arrayOne: '+globalVariable.arrayOne.length);

Output:

Size of arrayOne: 3
Size of referenceVariable: 3
EFFECT OF CALL BY REFERENCE
Size of referenceVariable: 4
Size of arrayOne: 4


Wenn man einen Div-Container über ein anderes Div-Element legen möchte, muss man dem umschließendem Eltern-Element das Attribut position: relative; zuweisen und den darin befindlichen Div-Containern die Eigenschaft position: absolute; geben. Dadurch liegt dann das Kinder-Div, welches zuletzt im Code definiert wurde, am Obersten. In meinem Beispiel liegt child_2 also über child_1:
HTML

1
2
3
4

    <div id="parent">
      <div id="child_1"></div>
      <div id="child_2"></div>
    </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#parent
{
  position: relative;
}
 
#child_1, #child_2
{
  width: 200px;
  height: 200px;
  position: absolute;
}
 
#child_1
{
  background-color: red;
}
 
#child_2
{
  background-color: green;
}

Möchte man die Reihenfolge der Überlappung selbst bestimmen, so muss man den z-index einsetzen. Ein Element mit höherem z-index liegt über Elementen mit niedrigerem z-index. Mit folgender CSS-Code-Änderung würde child_1 über child_2 liegen:

1
2
3
4
5
6
7
8
9
10
11

#child_1
{
  background-color: red;
  z-index: 2;
}
 
#child_2
{
  background-color: green;
  z-index: 1;
}

Das größte Problem moderner Android Smartphones ist die Akkulaufzeit. Kaum ein Multimedia-Bolide schafft es über einen Tag hinaus. Ich ärgere mich ständig über den Auflade-Piepton meines LG P990. Doch dafür gibt es Abhilfe! Dank der Einstellungsvielfalt und Hardware-Unabhängigkeit von Android lassen sich Stellschrauben finden, die die Akkulaufzeit verbessern. Ich habe mich auf die Suche nach dem Möglichen gemacht und einige Tipps zusammengestellt, die den Androiden zu mehr Ausdauer verhelfen.

…weiterlesen

Die sicherste Möglichkeit, um von jedem Android-Gerät einen Screenshot zu machen, führt über den Dalvik Debug Monitor Server (kurz DDMS). Dazu sind folgende Schritte nötig:

1. Android Smartphone USB Treiber installieren
2. Android Smartphone über USB am PC anschließen
3. Android SDK installieren
4. DDMS starten (Beispielpfad: C:\dev\android\android-sdk-windows\tools\ddms.bat)

Im Dalvik Debug Monitor kann man dann über Device - Screen capture... ein Bildschirmfoto vom gerade angezeigtem Inhalt machen:

Für Besitzer von Samsung oder LG Smartphones mit Android Version 2.2 und aufwärts gibt es einen noch einfacheren Weg.

…weiterlesen

The best gallery for jQuery I’ve found so far is the jQuery lightbox plugin. The usage is very easy:

Exact sequence of steps

1. Include jQuery
2. Include lightbox JavaScript
3. Include lightbox CSS
4. Write a little function that selects links which should be used by lightbox
5. Insert lightbox links which will have the fullsize image as target
6. Surround your thumbnail images with those links

…weiterlesen