DIV-Container mit 100 Prozent Höhe

0

7. November 2011

Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:

HTML

1
2
3

<body>  
  <div id="wrapper"></div>
</body>

CSS

html, body 
{
  height: 100%;
}
 
div#wrapper
{
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-color: seagreen;
  width: 300px;
}

Tags: CSS, %, 100, container, div, höhe, Prozent

Eigenes jQuery-Plugin selbst schreiben

0

2. November 2011

Das JavaScript-Framework jQuery lässt sich ganz leicht mit eigenen Plugins erweitern. Wie das geht, seht ihr hier:

HTML-Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>jQuery Plugin Example</title>
  </head>
  <body> 
    <div id="my_div"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
  </body>
</html>

my_jquery_plugin.js

(function($)
  {
    $.fn.myPlugin = function(title, params)
    {      
      var object = $(this);
      $.extend(object, params); 
      alert(title);
      alert(object.greeting);
      alert(object.isReceived);
      return this; // to allow jQuery chaining
    }
  })(jQuery);
 
$('#my_div').myPlugin('This comes from my jQuery plugin.',
{
  greeting: 'Hello World!',
  isReceived: true
});

my_jquery_plugin.js mit Standard-Einstellungen

(function($)
  {
    $.fn.myPlugin = function(params)
    {      
      var settings = 
      {
        firstName:'Max',
        lastName:'Mustermann'
      };
      if (params) 
      { 
        $.extend(settings, params);
      }
      alert(settings.firstName+' '+settings.lastName);
      return this;
    }
  })(jQuery);
 
$('#my_div').myPlugin({firstName:'Benny'});

my_jquery_plugin.js mit Funktionsnamen als Parameter

(function($)
  {
    function myRedFunction(element, settings)
    {
      $(element).css({
        width:'200px', 
        height:'200px', 
        backgroundColor:'red'
      }).html(settings.firstName+' '+settings.lastName);
    }
 
    $.fn.myPlugin = function(params)
    {
      var settings = 
      {
        firstName:'Max',
        lastName:'Mustermann',
        callback:myRedFunction
      };
      if (params) 
      { 
        $.extend(settings, params);
      }
      return settings.callback(this, settings);
    }
  })(jQuery);
 
function myBlueFunction(element, settings)
{
  $(element).css({
    width:'200px', 
    height:'200px', 
    backgroundColor:'blue'
  }).html(settings.firstName+' '+settings.lastName);
}
 
$('#my_div').myPlugin({
  firstName:'Benny', 
  lastName:'Neugebauer',
  callback:myBlueFunction
});

Eine gute Basis für ein jQuery-Plugin könnte wie folgt aussehen:

HTML-Code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My jQuery-Plugin</title>
    <style type="text/css">
      * { margin: 0; padding: 0; border: 0; }
      html { background-color: wheat; }
      #testdiv
      {
        width: 400px;
        height: 400px;
        background-color: sienna;
      }
    </style>
  </head>
  <body>
    <div id="testdiv"></div>
    <script src="./js/jquery.js"></script>
    <script src="./js/my_jquery_plugin.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function($)
      {
        $('#testdiv').myPlugin();
      });
    </script>
  </body>
</html>

JavaScript Code-Code:

(function($)
  {
    function mergeSettings(parameters)
    {
      var settings = {
      };
      if (parameters) 
        $.extend(settings, parameters);
      return settings;
    }
 
    $.fn.myPlugin = function(parameters)
    { 
      var element = $(this);
      var settings = mergeSettings(parameters);
      alert('Plugin activated on: '+element.attr('id'));
      return element;
    }
  })(jQuery);

Tags: JavaScript, jQuery, Plugin, schreiben, selbst

iPad bouncen verhindern

0

27. Oktober 2011

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:

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

Es gibt übrigens folgende Touch-Events:

touchmove
touchstart
touchend
touchcancel

Tags: JavaScript, bounce, ipad, move, prevent, touch

Call by reference with JavaScript

0

26. Oktober 2011

Example:

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

Tags: JavaScript, Call by reference

Div Container übereinander legen

0

26. Oktober 2011

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

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

CSS

#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:

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

Tags: CSS, absolute, container, div, legen, position, relative, übereinander, z-index

Android Akkulaufzeit erhöhen

4

16. Oktober 2011

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.

Tags: Hardware, Akku, Android, erhöhen, Laufzeit, verlängern