i am aldomatic

Adventure of writing jQuery code with CoffeeScript

I wanted to give CoffeeScript a try and decided to give it a go on current jQuery project. Below is a sample of the code.

CoffeeScript Code

$ ->	 
	### 
	--- Variables Init
	### 
	menuStatus = false
	newAlertsMenu = false
	### 
	--- Show Main Menu
	### 
	$("a.showMenu").live 'tap', ->
		if !menuStatus then $(".ui-page-active").animate
			marginLeft: "165px", 280, ->  
				menuStatus = true 
				return false	 
		else 			
			$(".ui-page-active").animate
				marginLeft: "0px", 280, ->  
					mentuStatus = false
					return false
	return 		
	### 
	--- Show New Alerts Panel
	###
	$("a.headerAlerts").live 'tap', ->
		if !newAlertsMenu then $("body").addClass("activeMenu"); $("#newAlerts").css("display", "block"); $(".ui-page-active").animate
			left: "-200px", 280, ->  
				newAlertsMenu = true
				return false

		else
			$(".ui-page-active").animate
				left: "0px", 280, ->  
					newAlertsMenu = false; 
					$("body").removeClass("activeMenu"); 
					$("#newAlerts").css('display','none');
					return false
	return

Generated jQuery Code

  $(function() {
    /* 
    	--- Variables Init
    */
    var menuStatus, newAlertsMenu;
    menuStatus = false;
    newAlertsMenu = false;
    /* 
    	--- Show Main Menu
    */
    $("a.showMenu").live('tap', function() {
      if (!menuStatus) {
        return $(".ui-page-active").animate({
          marginLeft: "165px"
        }, 280, function() {
          menuStatus = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          marginLeft: "0px"
        }, 280, function() {
          var mentuStatus;
          mentuStatus = false;
          return false;
        });
      }
    });
    return;
    /* 
    	--- Show New Alerts Panel
    */
    $("a.headerAlerts").live('tap', function() {
      if (!newAlertsMenu) {
        $("body").addClass("activeMenu");
        $("#newAlerts").css("display", "block");
        return $(".ui-page-active").animate({
          left: "-200px"
        }, 280, function() {
          newAlertsMenu = true;
          return false;
        });
      } else {
        return $(".ui-page-active").animate({
          left: "0px"
        }, 280, function() {
          newAlertsMenu = false;
          $("body").removeClass("activeMenu");
          $("#newAlerts").css('display', 'none');
          return false;
        });
      }
    });
  });

jQueryMobile Pinky Theme

Last night i started a new jquerymobile theme that i will offer for free. I should have this one finished out by the end of the week. There is a preview link below for now. Check back later for the download link. 

Preview Theme

jQuery Validation With Form Field Shaking

I ran into this type of animation the other day and decided to incorporate it on a form. The input fields would animate if the field is invalid to notify the user. Check out the demo below.

jQuery validation with form field  shaking (demo)

Mobile Design/Development Resources

Here is a collection of resources for anything to do with mobile design and development:

• 10 Awesome jQuery Mobile Plugin
• Useful HTML-, CSS- and JavaScript Tools and Libraries
• jQuery & JavaScript Articles For The Community
• CSS Sprite Generator
• jQuery.spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript.
• JSON Editor (http://jsoneditor.appspot.com/)
• Get Latitude and Longitude (http://www.getlatlon.com/)
• A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Github Resources:

• TouchScroll is a JavaScript- and CSS 3-based scroller for devices using Webkit Mobile (jQuery Plugin)
• Zepto.js is a minimalist inlinable framework for mobile WebKit browsers

The great confusion about .text() and .html() in jQuery

I found myself always getting confused about .text() and .html() methods jquery offers. This was occurring on a consistent bases with new projects. I stumbled into this article that cleared it right up for me. http://www.devcurry.com/2011/02/text-and-html-in-jquery.html