jQuery

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

Website Tour w/ jQuery Improved! Site Tour Plugin

Website Tour With jQuery

Recently I needed the ability to give an overview of some changes made on one of my web projects. I ran across the tutorial provided by CODROPS, and decided that it wasn’t quite as easy and modular as I would have liked…

So I re-did it!

Download the code from GitHub and enjoy!

https://github.com/nickrouty/jQuery-Tour

Original code:

http://tympanus.net/codrops/2010/12/21/website-tour/

View the source code to really get an idea of how it works.

I added a feature that will save a cookie when the user ends the tour, or if they click remind me later, it will popup the next visit. It is also only a line to instantiate. VERY easy to use on multiple pages now.

Enjoy!

Thursday, March 24th, 2011 jQuery No Comments

jQuery Image & Photo Galleries and Slideshow Plugins

Coin Slider

Slick Slider


Wednesday, February 9th, 2011 jQuery 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

Free Online jQuery Book!!

Check this out – seems to me like it could be a great extra resource:

Free Book!

Saturday, July 3rd, 2010 jQuery No Comments

Avoiding $ conflicts in jQuery

In a previous post we looked at how we could integrate the ZFDebug toolbar into the Zend Framework – what a great tool that is! However at the end of it’s call it called:

jQuery().noConflict();

Which basically clears the “$” from being linked to the jQuery framework. When that toolbar was enabled we found that we would get javascript errors on some pages due to the scripts not recognizing the “$”.

When creating plugins, it is a better practice to wrap all your functions in the following manner to avoid this problem:

(function($){
    //Your fancy plug-in code
})(jQuery);

This is creating a wrapper function for your code that passes jQuery as the parameter to be assigned to the “$”.

Enjoy!

Saturday, July 3rd, 2010 jQuery No Comments

How to check if an attribute exists on your jQuery Selection

I recently purchased the new jQuery in Action (2nd Edition) book and I found something that I didn’t know existed (or at least that you could use ‘is’ in this way)! I recently ran into the situation where I wanted to select a group of elements let’s say they were elements, and I wanted to perform an operation on those elements that had a certain custom attribute set. Below is the code to how you could find out:

$('span').each(function(){
    if($(this).is('[attribute_name])){
        alert("This one has that attribute!")
    }
});

You of course replace attribute name with the attribute you are searching for (id,name,class,fooBizzle, etc.)

Enjoy!

Saturday, July 3rd, 2010 jQuery No Comments

jQuery Floating Table Header Plugin

Ever have a really long table and want the table header to follow you down the screen as you scrolled? I guess someone else has too… This plug-in came in very handy and works great!

http://www.mustafaozcan.net/en/page/jQuery-Fixed-Table-Header-Plugin.aspx

Thursday, April 22nd, 2010 jQuery 1 Comment
[ad code=1 align=center]