Use 1 native HTML5 input type ‘color’ to pop out a colorpicker when we need it

April 14th, 2014 by Alex No comments »

So let’s say we have several places where we need to have a color picker. Some might use a jQuery Colorpicker, bunch of CSS files, gradient images, and so on. But, let’s imagine all browsers support input type="color".

First things first, we create 1 input which will be our color picker:

<input type="color" id="colorpicker" />

Wow, that was hard.. now we add some simple CSS rules to make it invisible, but still “workable”:

#colorpicker { position: absolute; top: -9999px }

Then, let’s say we have 2 places where we need to input our color, but we need it to look custom:

<div>Color is: <span id="color"></span> </div>
<div><input type="button" value="Pick Color" id="colorpickertoggle" /></div>
 
<div>Color is: <span id="color2"></span> </div>
<div><input type="button" value="Pick Color" id="colorpickertoggle2" /></div>

Now, we add the last part – the actual JS code. We will trigger color picker with a button input, and update the proper elements when we get a new value:

var changeelement = 'color';
document.getElementById('colorpickertoggle').addEventListener('click', function() {
    changeelement = 'color';
    document.getElementById('colorpicker').click();
}, false);
document.getElementById('colorpickertoggle2').addEventListener('click', function() {
    changeelement = 'color2';
    document.getElementById('colorpicker').click();
}, false);
document.getElementById('colorpicker').addEventListener('change', function() {
    document.getElementById(changeelement).innerHTML = this.value;
}, false);

Potentially, we can add any amount of buttons and inputs and variables and .. do whatever we want with the value returned by a color picker.

Working fiddle:
http://jsfiddle.net/CW5J8/

Checkbox input size on mobile devices

April 13th, 2014 by Alex No comments »

So far this seems to be the best approach for Android devices:

input[type=checkbox] {
  -webkit-transform: scale(2,2);
}

GoDaddy coupon for $2.95 COM domain – expires April 30, 2014

April 2nd, 2014 by Alex No comments »

Here you go, use wisely

cjcRMN295c

Android background-attachment: fixed and background-size

March 26th, 2014 by Alex No comments »

This seems to be a bug/feature for quite a long time and seems to be present in Android 4.0 at least, so when someone uses

.element {
  background: url('bg.jpg') no-repeat center top;
  background-attachment: fixed;
  background-size: 960px;
}

This doesn’t work on Android (as of the time written). Yes, it doesn’t respect background-size when you use that, so you might need to make a wrapper element with height: 100%; overflow: hidden and scroll the inner element only (that way it looks like a fixed position background). So the general structure should/might be:

<div class="background">
  <div class="element">
   scrollable content is here, we scroll the .element and leave the .background unscrollable
  </div>
</div>

Google’s Public DNS Adresses

February 20th, 2014 by Alex No comments »

Thought would be nice to have them on hand here:

8.8.8.8
8.8.4.4

And the IPv6 addresses:

2001:4860:4860::8888
2001:4860:4860::8844