Friday, December 9, 2011

Convert icons from ICNS to ICO

Use this cool site:
http://iconverticons.com/

Thursday, November 3, 2011

Introducing iPhone-style Checkboxes

http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html

Saturday, September 17, 2011

Sass

Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

http://sass-lang.com/





Thursday, August 25, 2011

CSS Mania with Sass, Compass, & Lemonade

Start Here:
http://youtu.be/b_-HLevIJbc

Saturday, June 11, 2011

jQuery Image RollOver

Here is the JQuery Script

$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function() {
$('').attr('src', $(this).attr('data-hover'));
});;
});

Here is the var you add to the img

<br /><img data-hover="second.gif" src="first.gif" /><br />

Here is the original link
http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/

jQuery Image RollOver

<br />$(function() {<br /> $('img[data-hover]').hover(function() {<br /> $(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');<br /> }).each(function() {<br /> $('<img />').attr('src', $(this).attr('data-hover'));<br /> });;<br />});<br />
<br /><img data-hover="second.gif" src="first.gif" /><br />

jQuery Image RollOver


$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function() {
$('').attr('src', $(this).attr('data-hover'));
});;
});



Tuesday, April 26, 2011

How to grep in unix

The "grep" command allows you to find text within a file

grep -r -i main-content ../../

grep [options] [search query / pattern] [where]

Some options
-r / recursive: read all files under each directory, recursively
-i / ignore case: upper - lower case friendly



Wednesday, February 16, 2011

Wordpress Youtube Gallery

http://wordpress.org/extend/plugins/youtube-simplegallery/

Thursday, January 13, 2011

Making DIV a Link - Javascript Vs CSS

Few days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple:

The Javascript Technic:
view plaincopy to clipboardprint?

1.

By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?

Here is the CSS technic:

Now, let’s see how it works with CSS.

First, put a link inside your div:
view plaincopy to clipboardprint?

1.

…and now set the link’s display property to 100% to fill the DIV in your stylesheet:
view plaincopy to clipboardprint?

1. #header {
2. width:300px;
3. height:100px;
4. border: solid #EEE;
5. }
6.
7. #header a {
8. display:block;
9. width:100%;
10. height:100%;
11. text-decoration:none;
12. }
13.
14. #header a:hover {
15. text-decoration:none;
16. background-color: #EFEFEF;
17. }

#header {
width:300px;
height:100px;
border: solid #EEE;
}

#header a {
display:block;
width:100%;
height:100%;
text-decoration:none;
}

#header a:hover {
text-decoration:none;
background-color: #EFEFEF;
}

Conclusion:
As you can see, the Javascript technic is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won’t see the link.