Archive for April, 2006

Apro25

Christian Decker

0

Lightbox Plugin for WordPress

{meraluna}Sisters of Mercy

I just found out that there is a really cool lightbox plugin for WordPress which uses Lokes Dhakar’s Lightbox Script.

Plugin that turns linked images into neat Javascript-powered overlay popups. This plugin includes the cool javascript done by Lokesh Dhakar and got transformed into a Wordpress Plugin by me who got inspired by Frankfrom 2d-sign. Version 0.1 till 0.5 featured Lightbox1. From Version 0.6 now featuring Lightbox2.
  • Share/Bookmark

Apro17

Christian Decker

0

Visual Form Feedback

In modern applications visual feedback is just as important as the application itself. With the Ajax boom we’re having a revolution of those nice immediate feedbacks in web applications.

To demonstrate what the little script does, here an example: enter something in the textbox below.

Just click on the buttons to see the effect.

So what does the script do? It inserts a span with the “status”-class directly after the input field. Once we have the status span we can then put the HTML that we want in it. Additionally we set the background color to either red, yellow or green, depending of the state.

 
var Feedback = {
  setError: function(element){
    element.style.background = '#FFDDDD';
    this.getStatusFromField(element).innerHTML = "<img src='images/error.png'/>";
  },
  setValid: function(element){
    element.style.background = "#DDFFDD";
    this.getStatusFromField(element).innerHTML = "<img src='images/ok.png'/>";
  },
  setValidating: function(element){
    element.style.background = "#FFFFAA";
    this.getStatusFromField(element).innerHTML = "<img src='images/indicator.gif'/>";
  },
	
  /**
    * Used to create or get the reference to the status box for a certain
   * field.
   */
  getStatusFromField: function(field){
    var f = field.nextSibling;
    if(f == null || f.class != "status"){
      var status = document.createElement("span");
      status.class = "status";
      var parentDiv = field.parentNode; 
      parentDiv.insertBefore(status, field.nextSibling);
      return status;
    }else{
      return f;
    }
  }
};

Download the full source of the Script.This is just a little time filler between the tutorial parts, so check back soon :)

  • Share/Bookmark