donderdag 28 mei 2015

Simple jQuery plugin to make checkbox values readable/settable by $(checkbox).val() isnstead of attr

If you put this little script in your document after jQuery has loaded you can simply read the values of a checkbox with $('#checkboxid').val() and set it with val.

 I added comments to explain what line of code does what.

I hope this makes your life a little bit easier.

 To have a live example to fiddle with, check out

if(typeof window['$'] !== 'undefined' || typeof window['jQuery'] !== 'undefined') {
  // Saving the old instance so this can do stuff when we don't need it.
  jQuery.fn.ZAGREUSoldoldoldVal = jQuery.fn.val;
  // Making our own value function!
  jQuery.fn.val = function(value){
   // Check if it's  a checkbox. If so, do our magic!
   if(typeof value !== 'undefined' && (this[0] instanceof HTMLInputElement && this[0].getAttribute('type') == 'checkbox')) {
    // Saving our instance for scoping
    var that = this;
    // Generic setvalue function to prevent code duplication.
    var setval = function(bool) {
     var oldbool = that[0].checked;
     that[0].checked = bool;
     // Remove this if you don't want a trigger whent he value changes.
     if(oldbool !== bool) {
    // All possible values that can be entered. False means unchecked, true means checked.
    // Modify as needed.
    switch(value) {
     case 'j' : setval(true);break;
     case 'y' : setval(true); break;
     case 'n' : setval(false); break;
     case true : setval(true);break;
     case false : setval(false);break;
     case 1 : setval(true);break;
     case 0 : setval(false);break;
     case 'checked' : setval(true);break;
     case '' : setval(false);break;
   // We didn't get an argument, so we assume we want to read the data
   else if(typeof value === 'undefined' && (this[0] instanceof HTMLInputElement && this[0].getAttribute('type') == 'checkbox')) {
    return this[0].checked// ? 'y' : 'n';//<-- optional string return... depends on what you want
    // Default handling of the val function.
    return typeof value !== 'undefined' ? jQuery(this).ZAGREUSoldoldoldVal(value) : jQuery(this).ZAGREUSoldoldoldVal();

dinsdag 19 mei 2015

Turning a black icon into a coloured using css3 and filters

Sometimes you have these great icons, but you want to change the colour and appareance of them via css without having to edit them in a photo editing program.

Thanks to css3 this is now possible!

With this trick you can have black and white(prefably black and transparent) icons in any colour you want without editing themi n a graphics editor.
This makes it extremely easy to repurpose the same image in different styles.

For my example i'll use the following images

They are black and transparent.

Now i'll add the following filters to the images

  1. filter:invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -webkit-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -moz-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -o-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -ms-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);

This *should* display them in fancy colours(lightblue) below. if it doesn't your browser doesn't support standards. Go figure out the long route to achieve this(svg, IE dx filters, magic?)

Now the order in which the filter arguments appear are important.

Let me explain what they do

invert(69%) Turn the image gray ish colour so there is something to play with.
sepia(100%) Turn the gray into a teal colour so we have a hue to play with.
hue-rotate(-202%deg) Spin the colour wheel to a different colour.
saturate(100%) set the intensity of the colour.

vrijdag 15 mei 2015

Static variables in javascript

Sometimes we want to do stuff in javascript that simply cannot be done. But, that doesn't stop us from cheating our way through. Below a simple hack to get static variables in javascript that you can access from outside and within the object.

myDemoObject = function(name) { this.demoname = name };
myDemoObject.options= new Array("country", "world","universe");
myDemoObject.prototype.options = myDemoObject.options;
myDemoObject.prototype.makeruler = function() {
   return this.demoname + " is the ruler of " + 
         this.options[ Math.floor( 
                      ) ] ;

mark = new myDemoObject("Mark Twain");
console.log("But I wonder if he's the ruler of the " 
             + myDemoObject.options[ Math.floor( 
             ) ] );

We managed to make the "static" object that holds reference to a single object(just like the static variables) everywhere.

myDemoObject.options= new Array("country", "world","universe");
myDemoObject.prototype.options = myDemoObject.options;

The thing to keep in mind though is that this is not a true static object!

if you change this.options with something else entirely like:

this.options = somethingnew;

myDemoObject.options does not change to somethignnew. The same goes viceversa.

But if you do this.options.push("multiverse"); myDemoObject.options will change to hold the new array item.

This is because myDemoObject.options and this.options hold the reference to the same exact object.So basically if you wish to alter something on the "static" variable make sure you make a change in the object instead of altering the reference to the object.

So in conclusion, you can have a somewhat static object in your Objects, as long as you keep from the temptation to override them to a whole new variable.

When Object.observe really comes through you can work your way around this last flaw by having auto updaters of the object, but until then you have to mind it yourself.