Download all images from current page with JavaScript

August 18th, 2014 by Alex No comments »
// get possible elements, init variables
var elems = document.querySelectorAll('*'), elems2 = document.querySelectorAll('img');
var images = {}, a = 0, href = '';
// search for CSS background-image
for (a = 0; a < elems.length; a++) {
  style = elems[a].currentStyle || window.getComputedStyle(elems[a], false);
  var bg = style.backgroundImage.slice(4, -1);
  if (bg) {
    images[bg] = bg;
  }
}
// search for <img src="" />
for (a = 0; a < elems2.length; a++) {
  if (href = elems2[a].getAttribute('src'))
    images[href] = href;
}
// generate <a> and force download
for (var i in images) {
  var link = document.createElement('a');
  link.setAttribute('download', '');
  link.setAttribute('href', i);
  link.click();
  delete link;
}

Adding a message with JavaScript before leaving the page

June 20th, 2014 by Alex 1 comment »

It is very very easy, the callback you add should return a string that will be prepended to the confirmation message. Plain javascript:

window.onbeforeunload = function(){
  return 'You are about to lose your changes!';
};

Or with jQuery if you wish so

$(window).on('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

Searching for a value in a combined MySQL column

May 18th, 2014 by Alex 2 comments »

This time we will have to search for a value inside a comma-delimited column. Let’s say we have this structure:

name  | location
----------------
Alex  | Philadelphia, United States
Bob   | Athens, Greece
John  | London, England
Bill  | Kiev, Ukraine
Mark  | Warsaw, Poland
Harry | Odessa, Ukraine
Jane  | Chicago, United States

First, let’s make sure the SPLIT_STR function exists in our database:

CREATE FUNCTION SPLIT_STR(
  x VARCHAR(255),
  delim VARCHAR(12),
  pos INT
)
RETURNS VARCHAR(255)
RETURN REPLACE(SUBSTRING(SUBSTRING_INDEX(x, delim, pos),
       LENGTH(SUBSTRING_INDEX(x, delim, pos -1)) + 1),
       delim, '');

Now we need to get all people from Ukraine, what we can do is create a new temporary table, split the location in two columns and then we can perform a search.

CREATE TEMPORARY TABLE `users_new`
SELECT `name`, 
  TRIM(SPLIT_STR(`location`, ',', 1)) AS `location1`, 
  TRIM(SPLIT_STR(`location`, ',', 2)) AS `location2` 
FROM `users`;

We might want to additionally add an index while we are doing our magic:

ALTER TABLE `users_new` ADD INDEX (  `location2` )

And now we can simply SELECT from our new temporary table. Note, that all the queries need to be run in one connection, because temporary table will go away as soon as we disconnect (or our script disconnects).

SELECT * FROM `users_new` WHERE `location2` = "Ukraine";

Convert RGB to HSL in PHP, and sort by color

May 16th, 2014 by Alex No comments »

Here’s a simple way to convert an RGB color into an HSL (Hue/Saturation/Lightness). You might ask why we need that at all? Well, first, we might then use that to find the lightest color, or sort colors by Hue (that will give a rainbow effect when you output the colors sorted like that).

Anyway, a simple function is here:

function rgbToHsl($r, $g, $b) {
    $r /= 255; 
    $g /= 255; 
    $b /= 255;
    $max = max($r, $g, $b);
        $min = min($r, $g, $b);
    $h = 0;
    $s = 0;
    $l = ($max + $min) / 2;
 
    if($max == $min){
        $h = $s = 0; // achromatic
    }else{
        $d = $max - $min;
        $s = $l > 0.5 ? $d / (2 - $max - $min) : $d / ($max + $min);
        switch($max){
            case $r: $h = ($g - $b) / $d + ($g < $b ? 6 : 0); break;
            case $g: $h = ($b - $r) / $d + 2; break;
            case $b: $h = ($r - $g) / $d + 4; break;
        }
        $h /= 6;
    }
 
    return array('h'=>$h, 's'=>$s, 'l'=>$l);
}

Then if we have a hex color, we can call it like this:

$rgb = 'FF0000';
$r = hexdec(substr($rgb, 0, 2));
$g = hexdec(substr($rgb, 2, 2));
$b = hexdec(substr($rgb, 4, 2));
$hsl = rgbToHsl($r, $g, $b);
print_r($hsl); // should output Array ( [h] => 0 [s] => 1 [l] => 0.5 )

Now it is pretty easy to sort using the above data, say:

function sortColorsByColor($rgblist) {
	$sort = array();
	foreach($rgblist as $rgb) {
		$hsl = rgbToHsl(hexdec(substr($rgb, 0, 2)), hexdec(substr($rgb, 2, 2)), hexdec(substr($rgb, 4, 2)));
		$sort[] = $hsl['h'];
	}
	array_multisort($sort, SORT_ASC, $rgblist);
	return $rgblist;
}
 
$list = array('9DD3FA', '1F39A1', '6D7AAB', ..);
$sorted = sortColorsByColor($list); // will now contain a color-sorted list of hex colors

Corrupted controls in Google Maps with Twitter Bootstrap

May 13th, 2014 by Alex No comments »

Twitter’s bootstrap front-end framework is cool and has lots of features, but it doesn’t play well with Google’s maps. The controls appeared all blurry and squished, or totally invisible. Luckily, the fix is simple:

#mymap img {
  max-width: none
}

Got the idea? It simply resets the max-width which bootstrap sets to 100% for all images.

But there’s also another piece of code that is in bootstrap’s CSS file:

#map_canvas img,
.google-maps img {
  max-width: none;
}

So, to fix controls you can just apply google-maps class to your map container, and bootstrap will know what you need ;)