Dzinepress

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’re 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.

Prototype Cheat Sheet

A handy reference guide for Prototype, a JavaScript framework for easy Ajax and DOM manipulation.

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

Handy Cheat Sheet of MySQL Commands

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>

});

Casper

View all posts by Casper
Necks website

Related posts:

1. 50+ Constructive Adobe Air Apps for Web Designers and Developers Adobe AIR is platform for internet-enabled desktop applications which...
2. 40 Ultimate Useful JavaScript Tutorials for Web Professionals As per latest trend of website designing and development...
3. 50 Ultimate Useful Free Mac Apps for Graphic and Web Designers As we know MAC is specially design for designers...
4. 50 Excellent Tutorials for Web Development Using CSS3 In this modern web world we offering CSS3 techniques...
5. 50+ Useful CSS Professional Techniques As we know most of the Web designers and...

Related posts brought to you by Yet Another Related Posts Plugin.