Javascript

Google Translate for Free

Google recently switched over to a paid model only. There is however a way to still get your translations for free.

The link below downloads a javascript file that includes a JSON string with your requested translation.

Simply format the link to your needed translation and you will be saying Hello there in every language. Congrats!

http://translate.google.com/translate_a/t?client=g&text=Hello+there&sl=en&tl=fr

Thursday, March 1st, 2012 API Services, Javascript No Comments

HTML 5 Webkit Desktop Notification Code (Google Chrome Support Only… for Now.)

I was on gmail the other day and it prompted me to allow desktop notifications for my chat.. Hm, YES! It’s very helpful to have a popup come up as though it were built-in to the OS. Get’s your attention right away. So my next thought went to… How can I leverage this same benefit for my users? So I found a site that gave a great tutorial on how to do it, my example supplements it a bit, but the other is definitely worth a peek!

http://www.beakkon.com/tutorial/html5/desktop-notification

$('body').click(function(){
		displayNotification();
	});
    
    if (!window.webkitNotifications) {
        alert('Sorry , your browser does not support desktop notification. Try Google Chrome.');
    } 

    function sendPermissionRequest(callback)
    {
    	window.webkitNotifications.requestPermission(callback);
    }

	function displayNotification()
	{
		if(window.webkitNotifications.checkPermission() > 0){
			
			sendPermissionRequest(displayNotification);
			
		} else {

    	    var icon  = 'link_to_logo.png';
            var title = 'Routy Development';
            var body   = 'Kapow!';
     
            var popup = window.webkitNotifications.createNotification(icon, title, body);
            
            popup.show();
            
            setTimeout(function(){
            	popup.cancel();
            }, '15000');

		}
	
	}

	function displayHtmlNotification()
    {
        if (window.webkitNotifications.checkPermission() > 0) {
        	sendPermissionRequest(displayHtmlNotification);
        } else {
        
            var popup = window.webkitNotifications.createHTMLNotification('http://blog.routydevelopment.com');
            popup.show();
            
            setTimeout(function(){
            	popup.cancel();
            }, '15000');
        }
    } 

A few links that I had to also browse to when finding/installing this gem:

http://www.beakkon.com/tutorial/html5/desktop-notification
http://www.quora.com/Mozilla-Firefox/When-will-firefox-support-Desktop-Notifications-like-Chrome
http://stackoverflow.com/questions/4913866/webkitnotifications-security-err-dom-exception-18-script-ok-button

Friday, March 25th, 2011 Javascript, jQuery No Comments

Count UTF-8 bytes in Javascript

Recently I needed to count the number or bytes being used in a form for use in sending out a text message. Using the javascript length function simply counted the visible character length, however if I needed to count foreign text such as Chinese, it did not count the physical length or byte length correctly. I finally found the following code:


function checkLength(text) {

    var escapedStr = encodeURI(text);
    if (escapedStr.indexOf("%") != -1) {
        var count = escapedStr.split("%").length - 1;
        if (count == 0) count++; 
        var tmp = escapedStr.length - (count * 3);
        count = count + tmp;
    } else {
        count = escapedStr.length;
    }
    return count;
}

Tuesday, October 5th, 2010 Javascript No Comments

AJAX Call Appears to Not Fire when Firebug Enabled, works fine when Firebug Disabled

I ran into this issue while working on a project and came to a quick solution from another person that ran into the same problem.

http://www.ozzu.com/programming-forum/ajax-fine-when-firebug-enabled-breaks-when-disabled-t87875.html

Quick Answer:
Firebug’s console.log(), console.debug() functions break AJAX calls in Firefox when Firebug is disabled or not installed.

Tuesday, September 21st, 2010 Javascript, jQuery No Comments

How to: Set an Element’s text color based on it’s background color

Ever want to change your text color based on the value of the background it lies on? Me too.

Here is some code that allows you to get a decimal value from a hex value (#333333) and you can then set the text color to either light or dark depending on that value, check it out:

//Using jQuery to get/set the values
$().ready(function(){

    var hex = $('input').css('background-color');

    if(getBrightness(hex) < 50){
        $('input').css('color','#FFFFFF');
    } else {
        $('input').css('color','#000000');
    }

});

function getBrightness(hex) {
    var hex = hex.replace('#','');

    var c_r = hexDec(hex.substr(0, 2));
    var c_g = hexDec(hex.substr(2, 2));
    var c_b = hexDec(hex.substr(4, 2));

    return ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
}

function hexDec(hex_string){
    hex_string = (hex_string+'').replace(/[^a-f0-9]/gi, '');
    return parseInt(hex_string, 16);
}

Works like a charm ;)

Friday, July 16th, 2010 Javascript, jQuery No Comments
[ad code=1 align=center]