We're growing into something new. Read More
CodingJack

Coding Jack


Discussion

Jacked: A lightweight and highly efficient JavaScript animation engine

Jacked combines requestAnimationFrame and CSS3 and allows you to specifically target either or for any given environment. As an example, you can choose to use requestAnimationFrame for Firefox and Chrome, and for the same tween use CSS3 for Android and IOS -- giving you maximum control over all your animations!

Discussion

Simple Mobile Swipe Plugin based on code from jQuery Mobile

jQuery Mobile's swipe functionality is awesome. Unfortunately you have to load in jQuery Mobile's entire script to use it. This plugin extracts the exact swipe logic from jQuery Mobile and turns it into a simple to use plugin. So if catching left and right swipe events is all you need, this plugin is for you.

** HTML **
<nav>
                    
    <ul>
    
        <li><a href="#">HOME</a></li>
        
        <li><a href="#">ABOUT</a><ul>
            
                <li><a href="#">HISTORY</a></li>

                <li><a href="#">COMPANY</a><ul>
                    
                        <li><a href="#">OUR CREDO</a></li>
                        
                        <li><a href="#">WHAT WE DO</a><ul>
                            
                                <li><a href="#">DESIGN</a></li>
                                <li><a href="#">DEVELOPMENT</a></li>
                                <li><a href="#">MARKETING</a></li>
                                <li><a href="#">MANAGEMENT</a></li>
                            
                            </ul>
                        
                        </li>
                        
                        <li><a href="#">FOLLOW US</a></li>
                        <li><a href="#">BEST WORKS</a></li>
                        <li><a href="#">PROJECTS</a></li>
                        <li><a href="#">LATEST NEWS</a></li>
                    
                    </ul>
                
                </li>
                
                <li><a href="#">STANDARDS</a></li>
                <li><a href="#">PHILOSOPHY</a></li>
                <li><a href="#">TESTIMONIALS</a></li>
            
            </ul>
            
        </li>
        
        <li><a href="#">LATEST NEWS</a></li>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">OUR BLOG</a></li>
        <li><a href="#">BIG GALLERY</a></li>
        <li><a href="#">TYPOGRAPHY</a></li>
        <li><a href="#">CONTACT</a></li>
        
    </ul>
    
</nav>

** SCRIPT **

// stored here so you it can be accessed later when you need to toggle the main menu and the mobile menu
var mobileMenu, nav;

// create the menu dynamically from original HTML5 "nav"
function createMenu() {
	
	var $this, ul, st, leg, i, minus;
	nav = $("nav");
	
	mobileMenu = $("<select />").change(menuSelect).insertAfter(nav).append($("<option />", {
		
	   "selected": "selected",
	   "value": "",
	   "text": "Select Page"
	
	}));
	
	nav.find("a").each(function() {
		
		$this = $(this);
		
		st = "";
		minus = 0;
		
		if($this.next()) {
			
			if($this.next().is("ul")) {
				
				ul = $this.next().find("ul");
				
				if(ul.length) minus = ul.length;
				
			}
			
			leg = climb($this);
			
			if(leg > 1) leg -= minus;
			if(leg > 0) for(i = 0; i < leg; i++) st += "----";
			
		}
		
		mobileMenu.append($("<option />", {
		
			"value": $this.attr("href"),
			"text": st + " " + $this.text()
			
		}).data("target", !$this.attr("target") ? false : $this.attr("target")));
		
	});
	
}

// returns one of the numbers used for submenu tree position calculation
function climb($this) {
			
	var count = -1;
	
	step($this);
	
	function step(tar) {
	
		var par = tar.parent();
		
		if(par.length) {
		
			if(par.is("ul")) count++;
			if(!par.is("nav")) step(par);
			
		}
		
	}
	
	return count;
	
}

// menu select event
function menuSelect(event) {
			
	var $this = $(this).find("option:selected"), tar = $this.data("target"), val = $this.val();
	
	if(val !== "#" && val !== "") {
	
		switch(tar) {
		
			case false:
			
				window.location = val
			
			break;
			
			case "_blank":
			
				window.open(val);
			
			break;
			
			case "_top":
			
				top.location.href = val;
			
			break;
			
			case "_self":
			
				self.location.href = val;
			
			break;
			
			case "_parent":
			
				parent.location.href = val;
			
			break;
			
			default:
			
				self.frames[tar].location.href = val;
				//top.frames[tar].location.href = val;
			
			// end default
			
		}
		
	}
	
}

createMenu();

Create a mobile friendly nav menu dynamically and represent submenu tree

Dynamically convert a menu into a mobile friendly drop-down and represent nav's original submenu tree structure. End Resut:

;(function() {
	
	var jQueryMobileURL = "http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js";
	
	if(typeof jQuery !== "undefined" && typeof Modernizr !== "undefined") {
		
		if(Modernizr.touch) {
		
			jQuery(document).ready(function() {
			
				jQuery.cj.colorBoxSwipe();
				
			});
			
		}
		
	}
	
	(function($) {
		
		$.cj = {colorBoxSwipe: function() {
		
			if(typeof $.mobile === "undefined") {
				
				var mobileLoaded = false;
				
                                // check to make sure jQuery Mobile isn't already being loaded by the document
				$("script").each(function() {
					
					if($(this).attr("src") === jQueryMobileURL && !mobileLoaded) {
						
						if(typeof $.mobile !== "undefined") {
							
							mobileLoaded = true;
							init();
							
						}
						
					}
					
				});
				
				function init(event) {
					
					$.extend($.mobile, {
								
						autoInitializePage: false,
						ajaxEnabled: false,
						linkBindingEnabled: false,
						hashListeningEnabled: false,
						pushStateEnabled: false,
						defaultPageTransition: "none",
						defaultDialogTransition: "none",
						loadingMessage: false,
						pageLoadErrorMessage: false
						
					});
					
					if(typeof $.colorbox !== "undefined") {
						
						$(".cboxPhoto").live("swipeleft", function() {
					
							 $.colorbox.next();
							
						}).live("swiperight", function() {
							
							$.colorbox.prev();
							
						});

					}
					
				}
				
				if(!mobileLoaded) {
				
					$(document).one("mobileinit", init);
					
					var js = document.createElement("script");
					js.type = "text/javascript";
					js.src = jQueryMobileURL;
				
					document.getElementsByTagName("head")[0].appendChild(js);
					
				}
				
			}
			
		}}
	
	})(jQuery);
	
})();

ColorBox Mobile Touch Swipe

This script will add jQuery mobile swipe to ColorBox images. It's written to try to be as unobtrusive as possible and will only load jQuery-Mobile if touch is supported. Modernizr is required to test for touch events.

Discussion

BLADES - A jQuery Banner Rotator

BLADES is a flexible jQuery banner rotator that makes an impression. Easy to customize with several options including 5 unique transitions, BLADES jQuery is the type of banner that can easily headline your next project.