We presenting something special for Web Designers and developers even this useful roundup can help software developers too in their modern techniques based projects, Today we are sharing Most Useful Cheat Sheets, most of the time we need some rapid solution as we listing in this beautiful article fact whether you want to learn something quickly or don’t want to get stuck on some petty nuances while working on an important project, you have to use some handy cheat sheets.
Cheat Sheets are useful because Web Developers today need to remember more things to be effective doing their job than most people can manage. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, Python, Ruby-on-Rails, ajax, Adobe Photoshop, Adobe Illustrator, CSS3, HTML5, XHTML, XML, MooTools, ASP, VB Script, Prototype, MySQL, jQuery, SEO, htaccess, mod_rewrite, 3D Max, Cinema 4D R8, PHP and CSS.
Disable right-click
Disable right-click contextual menu.
$(document).ready(function(){
$(document).bind(“contextmenu”,function(e){
return false;
});
});
Disappearing search field text
Hide when clicked in the search field, the value.(example can be found below in the comment fields)
$(document).ready(function() {
$(“input.text1”).val(“Enter your search text here”);
textFill($(‘input.text1’));
});function textFill(input){ //input focus text function
var originalvalue = input.val();
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){ input.val(”); }
});
input.blur( function(){
if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
});
}
Cascading Style Sheet Level 2 Visual Cheat Sheet
CSS Cheat Sheet (V2)
HTML Cheat Sheet
jQuery 1.3.2 and 1.1.3 Cheat Sheets
jQuery 1.3 Cheat Sheet
Ruby on Rails Cheat Sheet
jQuery Cheat Sheet 1.2
Opening links in a new window
XHTML 1.0 Strict doesn’t allow this attribute in the code, so use this to keep the code valid.
$(document).ready(function() {
//Example 1: Every link will open in a new window
$(‘a[href^=”http://”]’).attr(“target”, “_blank”);
//Example 2: Links with the rel=”external” attribute will only open in a new window
$(‘a[@rel$=’external’]’).click(function(){
this.target = “_blank”;
});
});
// how to use
<a href=”http://www.opensourcehunter.com” rel=”external”>open link</a>
HTML 5 Cheat Sheet
HTML5 Visual Cheat Sheet (Reloaded)
(X)HTML Elements and Attributes
HTML5 Canvas Cheat Sheet
Detect browser
Change/add something for a certain browser.
$(document).ready(function() {
// Target Firefox 2 and above
if ($.browser.mozilla && $.browser.version >= “1.8” ){
// do something
}// Target Safari
if( $.browser.safari ){
// do something
}// Target Chrome
if( $.browser.chrome){
// do something
}// Target Camino
if( $.browser.camino){
// do something
}// Target Opera
if( $.browser.opera){
// do something
}// Target IE6 and below
if ($.browser.msie && $.browser.version <= 6 ){
// do something
}// Target anything above IE6
if ($.browser.msie && $.browser.version > 6){
// do something
}
});
jQuery 1.4 API Cheat Sheet
jQuery 1.4 Cheat Sheet
Oscarotero jQuery 1.3 (as wallpaper)
jQuery Selectors
MooTools Cheat Sheet
A quick reference guide for MooTools, a super lightweight web2.0 javascript framework.
Adobe Illustrator Shortcuts
Preloading images
This piece of code will prevent the loading of all images, which can be useful if you have a site with lots of images.
$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)=”” {=”” jquery(=””><img>”).attr(“src”, arguments[i]);
}
}
// how to use
$.preloadImages(“image1.jpg”);
});
</arguments.length;>
HTML Color Codes Matching Chart
Another must have for designers. Matching color codes in CMYK, RGB and Hex was never this easy.
ASP/VB Script Cheat Sheet
The ASP cheat sheet is designed to act as a reminder and reference sheet, listing various of the oft-forgotten parts of ASP / VBScript. I no longer work full-time with ASP, so to ensure the cheat sheet was as helpful as possible, I roped in one Allan Wenham, an excellent ASP / .NET developer, to assist.
HTML Character Entities Cheat Sheet
This contains a list of the assigned character codes in HTML, with an example of how they are displayed, and description.
MySQL Cheat Sheet
A quick reference guide for MySQL, including functions (both in MySQL and PHP), data types, and sample queries. Available in PDF and PNG formats.
CSS Styleswitcher
Switch between different styles?
$(document).ready(function() {
$(“a.Styleswitcher”).click(function() {
//swicth the LINK REL attribute with the value in A REL attribute
$(‘link[rel=stylesheet]’).attr(‘href’ , $(this).attr(‘rel’));
});
// how to use
// place this in your header
<link rel=”stylesheet” href=”default.css” type=”text/css”>
// the links
<a href=”#” class=”Styleswitcher” rel=”default.css”>Default Theme</a>
<a href=”#” class=”Styleswitcher” rel=”red.css”>Red Theme</a>
<a href=”#” class=”Styleswitcher” rel=”blue.css”>Blue Theme</a>
});
JavaScript Cheat Sheet
Megapixels and Maximum Print Size Chart
The Web Developer’s SEO Cheat Sheet
htaccess Cheat Sheet
mod_rewrite Cheat Sheet
Columns of equal height
If you are using two CSS columns, use this to make them exactly the same height.
$(document).ready(function() {
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
// how to use
$(document).ready(function() {
equalHeight($(“.left”));
equalHeight($(“.right”));
});
});
mod_rewrite Cheat Sheet
A quick reference guide for mod_rewrite, including server variables, flags and regular expression syntax. Also includes examples of commonly-used rules.
Computer Arts Keyboard Shortcuts
An essential shortcut guide from the world’s best-selling creative magazine.
Gosquared CSS help sheets
CSS Shorthand Cheat Sheet
W3C – Cascading Style Sheets, Current Work
CSS support in Opera 9.5
RGB Hex Colour Chart
XML (eXtensible Markup Language) in one page
Script.aculo.us Cheat Sheet
A field guide to Scriptaculous.
PHP Cheat Sheet
Font resizing
Want to let the users change there font size?
$(document).ready(function() {
// Reset the font size(back to default)
var originalFontSize = $(‘html’).css(‘font-size’);
$(“.resetFont”).click(function(){
$(‘html’).css(‘font-size’, originalFontSize);
});
// Increase the font size(bigger font0
$(“.increaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
// Decrease the font size(smaller font)
$(“.decreaseFont”).click(function(){
var currentFontSize = $(‘html’).css(‘font-size’);
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$(‘html’).css(‘font-size’, newFontSize);
return false;
});
});
Smooth(animated) page scroll
For a smooth(animated) ride back to the top(or any location).
$(document).ready(function() {
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 900);
return false;
}
}
});
// how to use
// place this where you want to scroll to
<a name=”top”></a>
// the link
<a href=”#top”>go to top</a>
});
Get the mouse cursor x and y axis
$(document).ready(function() {
$().mousemove(function(e){
//display the x and y axis values inside the div with the id XY
$(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});
// how to use
<div id=”XY”></div>});
jQuery timer callback functions
$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});
Python Cheat Sheet
The Python Cheat Sheet, a quick reference guide for the Python programming language.
Remove a word
$(document).ready(function() {
var el = $(‘#id’);
el.html(el.html().replace(/word/ig, “”));
});
Verify that an element exists in jQuery
$(document).ready(function() {
if ($(‘#id’).length) {
// do something
}
});
Make the entire DIV clickable
$(document).ready(function() {
$(“div”).click(function(){
//get the url from href attribute and launch the url
window.location=$(this).find(“a”).attr(“href”); return false;
});
// how to use
<div><a href=”index.html”>home</a></div>});
…. fantastic, this must be “Cheat-Sheet City”, a fabulous post from Casper, getting all our ducks in a row, thanks !! I want to thank TutorialLounge for the share and “DzinePress” for the showcase, now…. if I can get these printed out I will be even happier !! 🙂
What a resource, glad I ran across this!
Hey cool list. I found the RGB Hex Colour Chart very helpful. In fact I was in search of a color chart that explained this and came across this post. Anyways great work. Also what theme is this blog ran off of?
They are very useful. I added to my delicious. Thanks.
Really valuable list and very useful for designers.
Great collection of cheat sheets! Thank you for the time it took you to compile such a great resource!
great collection! a real handy resource!!
everyone should learn as smart developer.
huge collection. very useful post
thanks
Pretty all inclusive list if cheats. Wouldn’t want to be a development virgin cause theres lots of things on these lists that should not be used. Once again cheating will get you caught out!
Thanks for posting all these. I generally use the PHP and Photoshop cheat sheets a lot. I like the other cheat sheets you found. I am going to bookmark this page for future reference. I can see needing some of the other cheat sheets in the near future. Thanks