Self-Invoking Anonymous Function

A self-invoking anonymous runs automatically/immediately when you create it and has no name, hence called anonymous. Here is the format of self-executing anonymous function:

(function(){
 // some code…
})();

You must be aware of the fact that javascript functions run immediately when you put () after their names eg:

doStuff(); // this will run immediately

And:

doStuff; // this will not run immediately and can be used as callback

Now because () exist at the end of self-executing anonymous function above, it will run immediately.

Interestingly, if you look at the source code of jQuery, you will see that everything is wrapped in between:

(function( window, undefined ) {
 // jQuery code
})(window);

That is as can be seen also a self-executing anonymous function with arguments. A window (and undefined) argument is created and is mapped with global window object at the bottom (window).

Notice that you can also write self-executing anonymous function like this:

function(){
 // some code…
}();

Using extra braces like before function keyword is simply coding convention and is used even by famous javascript libraries such as jQuery and also recommended by Douglas Crockford. If you are confused about that extra pair of braces, here is another easy to remember notation:

! function(){
// some code…
}();

An ExpressionStatement cannot start with the function keyword because that might make it ambiguous with a FunctionDeclaration.

function foo(){
 // some code…
}()

function showUp(){
 alert(’Hello There’);
}

function showUp(){
 alert(’Hello There’);
}

// run the function
showUp();

function showUp(){
alert(’Hello There’);
}()

setInterval(doStuff, 10000);

! function foo(){
 // your other code here

setTimeout(foo, 10000);

}();

• Easy to customize
• Slick and nice looking interface
• Can be modified to as many links as needed, suitable for small to big websites
• Nice button and form styles
• Nice looking info messages
• Can be used as admin for any kind of website

Today I share with you guys an admin template that I created for my personal use. That’s free, you can use it for personal or commercial use.

Screenshots:

Download

Although there exist classes for outputting PHP to browser console such as Google’s PHP Console and certain others, I was looking for a way to output PHP to browser console without including those classes in my PHP files or installing any browsesr plugin to do the same. Currently, I am working on facebook application development in which you have to commit/upload the code to check certain output out of PHP unlike offline development where you check the code output before committing it up. This makes facebook application development a longer process for a developer but you got to live with it because you don’t have a choice.

Anyways, to speed up the code output checking process a little and rather using debug_backtrace, print_r, print/echo, var_dump, etc which you need to remove/comment again, I created a function to get output of PHP on the browser console. One could use error_log function but even that makes you go to your log file and then see the output. Of course, browser needs to support/have the console so that code result is output there. Because IE less than 8 doesn’t have console, this won’t work in IE less than 8, though result won’t be affected in it. Notice that you can see console in IE=>8 by pressing F12 key and then going to Script tab where you need to make sure Console tab is selected on the right side.

Here is the function:

     /**
     * Logs messages/variables/data to browser console from within php
     *
     * @param $name: message to be shown for optional data/vars
     * @param $data: variable (scalar/mixed) arrays/objects, etc to be logged
     * @param $jsEval: whether to apply JS eval() to arrays/objects
     *
     * @return none
     * @author Sarfraz
     */
     function logConsole($name, $data = NULL, $jsEval = FALSE)
     {
          if (! $name) return false;

          $isevaled = false;
          $type = ($data || gettype($data)) ? 'Type: ' . gettype($data) : '';

          if ($jsEval && (is_array($data) || is_object($data)))
          {
               $data = 'eval(' . preg_replace('#[\s\r\n\t\0\x0B]+#', '', json_encode($data)) . ')';
               $isevaled = true;
          }
          else
          {
               $data = json_encode($data);
          }

          # sanitalize
          $data = $data ? $data : '';
          $search_array = array("#'#", '#""#', "#''#", "#\n#", "#\r\n#");
          $replace_array = array('"', '', '', '\\n', '\\n');
          $data = preg_replace($search_array,  $replace_array, $data);
          $data = ltrim(rtrim($data, '"'), '"');
          $data = $isevaled ? $data : ($data[0] === "'") ? $data : "'" . $data . "'";

$js = <<<JSCODE
\n<script>
     // fallback - to deal with IE (or browsers that don't have console)
     if (! window.console) console = {};
     console.log = console.log || function(name, data){};
     // end of fallback

     console.log('$name');
     console.log('------------------------------------------');
     console.log('$type');
     console.log($data);
     console.log('\\n');
</script>
JSCODE;

          echo $js;
     } # end logConsole

Here is an example of how to use it:

$name = 'sarfraz';

$fruits = array("banana", "apple", "strawberry", "pineaple");

$user = new stdClass;
$user->name = "Sarfraz";
$user->desig = "Sr. Software Engineer";
$user->lang = "PHP";

logConsole('$name var', $name, true);
logConsole('An array of fruits', $fruits, true);
logConsole('$user object', $user, true);

Above code will result in what is shown in the image above. Although this does not prevent committing code first to see the code output if you are on facebook application development but it defintely does save some time. I have been using this function successfully so far, please let me know your ideas if any on how to improve this piece of code further. Have fun !

Today there is a lot of buzz about HTML5 because it is really cool and a lot of front-end engineers and developers are already using it despite the fact that it isn’t fully supported by all browsers – only latest standard-compliant browsers support it, IE till version 9 does not support it and that isn’t shocking because it is “IE”, however, people have made some hacky scripts such as HTML5 Shiv to get support of HTML5 in IE. HTML5 is formally supported in version 10 of IE though. For more information about the supported features in each browser, you should head over to:

When can I use…

I have recently created a useful application using HTML5 and jQuery named HTML5Sticky. The HTML5Sticky is as the name suggests, HTML5 application you can use to create sticky notes. The sticky notes are persistent in nature meaning your created sticky notes will be there the next time you open up the app. The app uses HTML5′s localStorage feature in order to store the sticky notes.. In short, it is sticky notes for web !

Here are its features:

• Add text and lists with basic HTML tags
• Multiple colors
• Customize Width and Height
• Customize Allowable HTML tags
• Real sticky notes look
• Nice hand-writing-like font

You can view/download/fork the source code at github here.

And here is the demo.

HTML5Sticky featured on famous DailyJS.

First of all, I wish you a very happy new year, a year that brings a lot of happy moments to your life and makes you prosperous in all respects.

For the first post of new year, I will discuss on how to create vertical text with CSS (the post doesn’t necessarily discuss something new like a new year ! ) that works in all browsers including IE6.  You might have seen the solution to this problem in terms of images or even javascript  but let’s see how we can achieve the same effect with just CSS or CSS2. Before we move any further, you might want to check out the simple demo first:

Demo 1: Vertical Text With CSS

After seeing the demo above, you might have already guessed the trick. Anyways, the trick is that you should apply a width of 1em and text-transform set to uppercase to the element you want to make the text of vertical something like this:

 width:1em;
 text-transform:uppercase;
 

There is one more step. The text that you want to appear vertically should be separated by an space or more specifically each letter should be separated by an space character, that is exactly where a width of 1em plays. Here is an example:

H E L L O

Now you might have seen the vertical text often on blogs posts (or other places) where the date information is shown vertically. I have also created a demo page you can check out:

Demo 2: Vertical Text With CSS

So that is all there is to creating vertical text with CSS. I hope you came to know about something useful.

Rotating Elements

To transform/rotate elements, there is a CSS3 property transform, here is the syntax of it:

transform: rotate(Xdeg)

Where X can be any number denoting the amount of rotation/angle. For example:

transform: rotate(90deg)

Any element applied above rule, will transform to 90 degrees.

Continuous Rotation

To rotate elements continuously, we can use the setInterval function of javascript along with some math. Check out the demo below:

Rotating Elements with jQuery & CSS3

The code of interest for the rotation is as follows:

$('.rotate').click(function(){
	var interval = null;
	var counter = 0;
	var $this = $(this);
	clearInterval(interval);

	interval = setInterval(function(){
		if (counter != -360) {
			counter -= 1;
			$this.css({
				MozTransform: 'rotate(-' + -counter + 'deg)',
				WebkitTransform: 'rotate(' + -counter + 'deg)',
				transform: 'rotate(' + -counter + 'deg)'
			});
		}
	}, 10);
});

Here I assume you know the basics of jQuery like ready handler, class and id selectors, etc. I have explained those things in my other posts, so I won’t be discussing them but instead I will concentrate on the part of the code which is responsible for the rotation.

First of all, we assign a click handler to each element with the class of rotate. Later we create the necessary variables including $this equalized to $(this) meaning the current clicked element, this is useful because we will reference this variable later in the setInterval function. As an element gets clicked, we also stop the current animation or clear the time interval using clearInterval function.

Later inside setInterval function, we decrement the variable counter by one with each 10th Milli-second passed (the second argument specified to the setInterval function). I have specified lesser time so that animation is little faster. The reason why I decrement the value of counter is that I wanted to rotate the elements in anti-clock-wise direction. This variable keeps on decreasing until it reaches -360 specified above in the if condition meaning that our element has rotated completely and has come back to its original place.

Now since we have put transform CSS3 property in the setInterval function and $this refers to current clicked element, the element starts rotating with continuous animation because counter variable has been specified as the degree of rotation:

transform: 'rotate(' + -counter + 'deg)'

Note that MozTransform and WebkitTransform are vendor-specfic CSS3 properties of Mozilla and Webkit (Chrome and Safari) browsers.

I have also created javascript version of rotating elements which can be seen here:

Rotating Elements with JavaScript & CSS3

So that is all there to rotating the elements in continuous fashion. Next we will see how with slight modification we can fly the elements off the page.

Flying Elements Off the Page

To fly elements off the page, we use jQuery’s animate method like this:

animate({left: '+=' + counter + 'px'}, 40);

That one single line is needed to fly off elements off the page, we add this line to our previous code just after we applied CSS3 properties like this:

$('.rotate').click(function(){
	var interval = null;
	var counter = 0;
	var $this = $(this);
	clearInterval(interval);

	interval = setInterval(function(){
		if (counter != -360) {
			counter -= 1;
			$this.css({
				MozTransform: 'rotate(-' + -counter + 'deg)',
				WebkitTransform: 'rotate(' + -counter + 'deg)',
				transform: 'rotate(' + -counter + 'deg)'
			}).animate({left: '+=' + counter + 'px'}, 40);
		}
	}, 10);
});

It is time to check out the demo:

Fly Off Elements with jQuery & CSS3

Here, we have basically specified left property of CSS to the animate method so that elements flies away to the left. You could also specify top to fly elements away to to the top. In fact, you could specify many other CSS properties to animate method such as width, height, margin, etc. Generally, you can specify any CSS property to animate method that can be specified in pixels values or in other words that could be increased or decreased.

Now that we have seen how to rotate elements and fly them off, it is up to you how you can take the idea and use in your cases. I suspect there could be  quite some ways we can use this technique effectively. I might come up with something fancy in my future posts while using this technique. As a last example, here is one idea to delete elements while flying them off the page:

Deleting Elements while Flying them off the Page

Browser Compatibility

The transform property works in all modern and standard-compliant browsers. It does not however work in IE, however there exist alternative when it comes to IE which is using IE-specific transformation filters you might want to consider for the rotation purpose. Here is IE-specific example:

#myElement {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

There also exists cssSandpaper, the CSS3 Javascript library comes in handy when you want transformations to work across all browsers.

I hope you came to know about something useful you can put to use in your own ways.

  <fb:login-button onlogin="window.location='www.example.com'"></fb:login-button>

That will show default facebook button with a rather small image. You can make the button little larger by specifying length and size attributes like this:

  <fb:login-button onlogin="window.location='www.example.com'" length="long" size="large"></fb:login-button>

However, the requirement in my case was that the button should be even bigger. I searched through the facebook connect docs and elsewhere but did not find a way to customize the facebook connect image (it is rendered directly by facebook; let me know if there is a way via comments please). I thought why I can’t force the facebook connect button to use the image that I specify. I fired up firebug (the addon of firefox) and this is what it showed for the <fb:login-button> fbml tag:

As can be seen, facebook automatically applies FB_login_button class amongst others to the connect button. As you can see, there is an img tag inside, that was all I needed to get my own image for the connect button. The idea is to find the image inside connect button and replace with your own once DOM has loaded. Now you get the idea, I wrote this jQuery code to get custom image for the connect button:

<script type="text/javascript">
$(function(){
  // overwrite the fb connect image - let's force it !!
  $('.FB_login_button').find('img').attr('src', 'img/my-custom-image.png');
});
</script>

We use the selector .FB_login_button and then use find method to find the image inside element (<fb:login-button>) having that class and replace its src attribute with the path of our custom image.  Since we have wrapped our code in ready handler $(function(){…}), our code will execute as soon as DOM becomes ready and when you visit the page, it will have your own custom facebook connect button image.

I also noticed that there was a link tag generated with the class of fbconnect_login_button. We could use that just as well like this:

<script type="text/javascript">
$(function(){
  // overwrite the fb connect image - let's force it !!
  $('.fbconnect_login_button').find('img').attr('src', 'img/my-custom-image.png');
});
</script>

Now this is good as long as you are using jQuery on the page where facebook connect button exists. But if you are not using jQuery, you can do the same thing with vanilla javascript albeit with little more code. Here is how you can do the same thing with vanilla javascript:

<script type="text/javascript">
window.onload = function(){
  var ourImg = null; // this will store the facebook connect img tag

  // find all the links on the current page
  var links = document.getElementsByTagName('a');

  // loop over all the links
  for(var i = 0; i < links.length; i++){
    // get class of this link
    var cls = links[i].className;

    // check to see if this is the link with specified class
    if (cls === 'fbconnect_login_button'){
      ourImg = links[i].firstChild; // which is img tag we need
      break;  // done, let's get the hell out of here
    }
  }

  // finally replace with our own image !
  ourImg.src = '<?php echo base_url() ?>images/fb.png';
};
</script>

Ops ! that is a lot of code I have written compared to jQuery’s but that’s what you need if you are not using jQuery on your page. Note that this time, we are using load event of the window window.onload = function(){…} which will fire when all the page resources are loaded including images, frames and the DOM unlike ready handler of jQuery which fires as soon as DOM becomes ready and runs before images, frames or any other external resources loaded into the page.

Finally, this is the page that now uses custom facebook connect button image while using <fb:login-button> fbml tag:

View the Page

See the Flag of Pakistan

Creating orange stick, white and green rectangles with specified background color was easiest part. As for moon, naturally I used the border-radius CSS3 property. Basically I created two divs with border-radius value set to 90px to create perfect round shape (360/4 = 90). I gave the background color of white and green to these divs and used absolute positioning and z-index to put green round shape over the white round shape but at little distance so that the white div looks like a moon. I would suggest you to know this very useful  CSS trick, something I knew about and used throughout the creation of the flag.

Absolute Positioning Inside Relative Positioning

You know CSS3 isn’t supported in IE<=8, so I used CSS3Pie to get the support for border-radius CSS3 property in IE including IE6.

The trickiest part was creating the star shape but then again once you know how to create CSS triangles, things become easier. To get the star working correctly in buggy as always IE, I used the CSS conditional comments. The star looks slightly bigger in IE but still not bad the effort.

The flag was tested working fine in FF 3.6, IE 6 and above, Chrome and Safari.

Download Source

The plugin now applies CSS3 drop shadow effect for the browsers that support it or it will use div-based approach like it did before. The plugin now checks if the current browser supports CSS3 and if so, it will apply CSS3 drop shadow effect and if CSS3 is not supported, it will apply div-based drop shadow effect. A new blur option has been added into updated plugin which is only applicable if current browser supports CSS3.

The plugin has been checked working fine in IE6+, FF, Webkit and Opera.

Download Drop Shadow Plugin (Updated)

.

.

.

Using the plugin is as  simple as this one line of code:

  $('table').styleTable();

Off course,  you can also apply the StyleTable plugin based on table classes or ids or even their attributes. See the plugin documentation for more information and examples.

See the plugin in action along with documentation

Download TableStyle Plugin With Examples

.