Warez-Enlatado: 50 trucos indespensables para desarrolladores Web y diseñadores

Guías de referencia rápida para diseñadores web echa por DZinepress.

Coleccion de cheat sheets específicamente para el desarrollo web que te ayudará con 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;
});
});

La desaparición del campo de texto de búsqueda

Ocultar cuando se hace clic en el campo de búsqueda, el valor. (Por ejemplo, se pueden encontrar a continuación en los campos de comentario)

$(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

Apertura de vínculos en una nueva ventana

XHTML 1.0 Strict no permite este atributo en el código, por lo que usar esto para mantener el código válido

$(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
open link

HTML 5 Cheat Sheet

HTML5 Visual Cheat Sheet (Reloaded)

(X)HTML Elements and Attributes

HTML5 Canvas Cheat Sheet

Detect browser

Cambiar o agregar algo para un navegador determinado

$(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

Este fragmento de código evitará que la carga de todas las imágenes, que pueden ser útiles si usted tiene un sitio con muchas imágenes.

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i”).attr(”src”, arguments[i]);
}
}
// how to use
$.preloadImages(”image1.jpg”);
});

CSS Styleswitcher

Cambiar entre diferentes estilos?

$(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
// the links
Default Theme
Red Theme
Blue Theme
});

Columnas de altura igual

Si estás utilizando dos columnas CSS, utiliza esto para hacerlas exactamente la misma altura.

$(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”));
});
});

Font resizing

¿Quieres dejar que los usuarios cambien el tamaño de el fuente?

$(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;
});
});

Suave (animado) desplazamiento de páginas

Para un suave(animación) movimiento de vuelta a la parte superior de la pagina (o cualquier lugar).

$(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

// the link
go to top
});

Obtener el mouse cursor x 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
});

jQuery timer callback functions

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

Python Cheat Sheet

Python Cheat Sheet, a quick reference guide for the Python programming language.

Remover una palavra

$(document).ready(function() {
var el = $(’#id’);
el.html(el.html().replace(/word/ig, “”));
});

Verificar que un elemento existe en jQuery

$(document).ready(function() {
if ($(’#id’).length) {
// do something
}
});

Hacer todo el 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

home
});

Páginas

sábado, 1 de mayo de 2010