Friday, April 30, 2010

CSS/HTML : ID or CLASS attribute? Which one to use when ?

A simple, yet powerful classification of the DOM elements can done using the element attributes ID and CLASS. By giving a CLASS attribute, we can refer/select MULTIPLE elements with the same class. Example:

<div class="myclassA">first content</div>
<div class="myclassA">second content</div>
<div class="myclassA">third content</div>

Once we have such layout, we can access all the div's easily, some of them would be: 1. In the .CSS file as :

.myclassA{
 color : red;
}

2. If ur using JQuery:

$(".myclassA").css("color", "blue");

By giving a ID attribute, we can refer/select EXACTLY one element with that ID. Example:

<div id="myDivIdA">first content&lt;/div>
<div id="myDivIdB">second content</div>

Once we have such layout, we can access EXACTLY one div easily, some of them would be: 1. In the .CSS file as :

#myDivIdA{
 color : red;
}

2. If ur using JQuery:

$("#myDivIdB").css("color", "blue");

NOTE: 
When accessing, CLASS attributes are prefixed with '.'
and ID attributes are prefixed with '#'

Elements can have both CLASS and ID attributes. So you can can even more flexibility.

Monday, April 26, 2010

jQuery: $("#elementId") != document.getElementById("elementId")

The most natural assumption is that  $ in jQuery is equivalent to document.getElementById. But it is NOT !! Took me a while to figure it out.

$("#elementId")!=document.getElementById("elementId")

$("#elementId") method gives a jQuery object that is always an array of Elements.

So to the get the real DOM element you have to use $("#myElementId")[0] or the more readable $("#myElementId").get(0)

Wednesday, April 21, 2010

Gmail Adds Drag-and-Drop Attachment Uploads and Attach Calendar Invitation

A very cool feature from google GMAIL !
Now you can drag and drop attachments and insert invitations directly in 'compose mail'.
Simply drag single/multiple files into the 'Compose Mail' window !

ShiftIt: Windows 7 Aero Snap for Your Mac !

Wondered if you wanted to get the smart resizing introduced in Windows 7 on your Mac ?

Well Try this http://code.google.com/p/shiftit/
ShiftIt is a free download for Mac OS X only.

Theres another software Called Cinch http://www.irradiatedsoftware.com/cinch/ ,but you need to pay for it !

Tuesday, April 20, 2010

Easy and smart way to install Eclipse plugins

You can install the eclipse plugin in 2 standard ways:
1. Download the plugin from web and place both the "features" and "plugins" folder's contents into your eclipse installation features and plugins folders respectively.
2. You can install through "Update Manager"() by giving the update URL.

Note: The disadvantage with the above approaches are, all the installed plugins will work for only your eclipse installation. If your eclipse crashes, you will ended up with installing all the plugins that you did. And moreover every team member has to do the same every time they install Eclipse.

There is one other way that you can install Eclipse plugin and get rid of above disadvantage. And its pretty easy I believe. Please follow the steps below:

1. Create a folder structure like below anywhere in your shared folder. (The folder name must be 'eclipse' with subfolders matching exactly 'features' and 'plugins')







2. Download the plugins from web and place features folder contents and plugin folder contents into respective folders that you have created above.

3. Create a new folder called "links" in your eclipse home installation like below and create a new plain text file called plugins.link (Technically, it can be called anything.link). In it put the line path=...\My Shared Folder (i.e. path value should be the eclipse folder path that you have created above.)



4. Finally launch the eclipse. It will notices the links/plugin.link file and load any plugins from that path as well.

Advantage: With this approach you will be decoupling external plugins with your eclipse installation so that way you can have your team share the same plugins every time they change their project preferences or eclipse installation.




Click a button using Javascript

Here is how you click a button in using javascript.


<script type="text/javascript" >

  document.getElementById("mybutton").click;

</script>


This specifically helps when ur using AJAX helpers in cakePHP and you want to submit the AJAX form using javascript. In this case u will not be able to use either .submit or .onClick

Monday, April 19, 2010

Change permissions for ALL the files/subfolders within a directory

Change permissions for all the files/subfolders within a directory Option to use is 'do it recursively', the -R option . Example in unix based machines

chmod 777 -R directoryname

Wednesday, April 14, 2010

OffiSync integrates between MS Office on the desktop and Google Apps on the cloud

"OffiSync integrates between MS Office on the desktop and Google Apps on the cloud, allowing users to work together on the same files and see changes in real time, access document from any computer and share files with people in a secure way."


Tuesday, April 13, 2010

Tuesday, April 6, 2010

CakePHP : DbAcl::allow() - Invalid node [CORE\cake\libs\controller\components\acl.php, line 325]

DbAcl::allow() - Invalid node [CORE\cake\libs\controller\components\acl.php, line 325]
If your following the “Simple Acl Controlled Application” , then you might see the above error message.
A simple fix is, in the function 'initDB()' replace
 $this->Acl->allow($group, 'controllers');
 with
 $this->Acl->allow(array( 'model' => 'Group', 'foreign_key' => 1), 'controllers');

So the total function would look like the following:


function initDB() {
 $group =&amp; $this-&gt;User-&gt;Group;
//Allow admins to everything
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 1), 'controllers');
 //allow managers to posts and widgets
 $this-&gt;Acl-&gt;deny(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 2), 'controllers');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 2), 'controllers/Posts');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 2), 'controllers/Widgets');

//allow users to only add and edit on posts and widgets
 $this-&gt;Acl-&gt;deny(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 3), 'controllers');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 3), 'controllers/Posts/add');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 3), 'controllers/Posts/edit');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 3), 'controllers/Widgets/add');
 $this-&gt;Acl-&gt;allow(array( 'model' =&gt; 'Group', 'foreign_key' =&gt; 3), 'controllers/Widgets/edit');
}

Monday, April 5, 2010

Beautiful BING images as your Desktop Wallpaper !!

Theres a BING downloader http://bing.codeplex.com/releases/ , helps to download the current BING image and sets as your Desktop Wallpaper.

This app requires .NET Framework for working. Download and install the latest .NET framework as well.

jQuery : Execute particular code after the animation effect has completed

If you want to execute particular code after the animation has completed, try the following:


$("#myDivToFade").fadeOut(function() {
 // This code will be executed
 // after the animation is complete
});