jQuery-Plugin imageNavigation

23. März 2010, 17:29

Während der Arbeit an einer Webseite entstand das jQuery-Plugin imageNavigation. Wie der Name schon vermuten lässt, handelt es sich dabei um die Erzeugung einer Navigation, die man dazu nutzen kann durch eine Anzahl Bilder zu blättern.

Demo und kurze Dokumentation finden sich wie gewohnt unter code.systemfehler.net.

Kategorie: Javascript

Content-Bereich am Hintergrundbild ausrichten

2. Juli 2009, 17:38

Mit folgendem Code lässt sich ein Content-Div relativ zum zentrierten Hintergrundbild positionieren. Benötigt wird die Javascript-Bibliothek jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
  resize();
  $(window).resize(function(){ resize(); });
  $(window).load(function(){ resize(); });
}

function resize() {
  bg_width    = 1280;
  bg_height   = 852;
  margin_left = 15;
  margin_top  = 15;

  doc_height = $(window).height();
  if(bg_height < doc_height) {
    margin_top += ((doc_height - bg_height)/2);
  }
  $('#main').css('margin-top', margin_top+'px');

  doc_width = $(window).width();
  if(bg_width < doc_width) {
    margin_left += ((doc_width - bg_width)/2);
  }
  $('#main').css('margin-left', margin_left+'px');
}

Kategorie: Javascript

Manipulation von Select-Boxen

26. Februar 2009, 12:02

Ein kleines Beispiel wie man mit Hilfe von jQuery und des swapOptions-Plugins Werte in einer Selectbox selektieren und sie in eine andere übertragen kann.

Kategorie: Javascript

Manipulation von Radio- und Checkboxen mit jQuery

6. Januar 2009, 13:01

Da jQuery für sich allein leider zu wenig Funktionalität bietet, um Radio- und Checkboxen zu manipulieren, habe ich eine kleine Auflistung von Beispielen erstellt, die während der Arbeit mit jQuery entstanden sind.

Sollte ich mal die Zeit finden, werde ich die Beispiele zu einem Plugin verarbeiten.

Kategorie: Javascript

jQuery-Plugin swapOptions

16. Juli 2008, 12:04

Habe heute mein erstes jQuery-Plugin geschrieben und veröffentlicht. Es dient der Manipulation einer Selectbox.

Eine Demo und den Download-Link findet sich hier.

Kategorie: Javascript

E-Mail überprüfen

9. Dezember 2007, 18:52

Kleine Funktion zur Überprüfung der Gültigkeit einer E-Mail-Adresse.

1
2
3
4
5
6
7
8
function parseMail(email) {
  // not valid
  var reg1 = /(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)|\s/;
  // valid
  var reg2 = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  if (!reg1.test(email) && reg2.test(email)) return true;
  return false;
}

Kategorie: Javascript

Höhe eines IFrames an den Inhalt anpassen

16. Oktober 2007, 12:10

Um die Höhe eines IFrames an den Inhalt anzupassen, kann man folgenden Javascript-Code verwenden:

1
2
3
4
function resizeIFrame() {
  contentHeight = parent['shop'].document.body.offsetHeight;
  document.getElementById('shop').height = contentHeight;
}

Der Aufruf der Funktion erfolgt dann im einleitenden IFrame-Tag:

1
2
<iframe src="http://www.example.com" id="shop" name="shop" width="100%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" onload="resizeIFrame(this);">
</iframe>

Getestet unter: FF 2.x, IE 6.x (Win) und FF 2.x, Safari 2.x (Mac OS X).

Kategorie: Javascript