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); }
});
}
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
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
}
});
A quick reference guide for MooTools, a super lightweight web2.0 javascript framework.
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”);
});
Otra visita obligada para los diseñadores. Coincidencia entre los códigos de color en CMYK, RGB y Hex nunca fue tan fácil.
La hoja de trucos ASP está diseñada para actuar como un recordatorio y hoja de referencia, enumerando varias de las partes tantas veces olvidadas de ASP / VBScript. Para garantizar que la hoja de trucos es lo más útil posible.
Este contiene una lista de los códigos de caracteres asignados en HTML, con un ejemplo de cómo se muestran, y la descripción.
Una guía de referencia útil para Prototype, un
JavaScript framework para manipulación fácil de Ajax y DOM.
Una guía de referencia rápida para MySQL, incluyendo las funciones (tanto en MySQL y PHP), tipos de datos y consultas de ejemplo. Disponible en formatos PDF y PNG.
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”));
});
});
Una guía de referencia rápida para
mod_rewrite, incluyendo variables de servidor, flags y la sintaxis de expresiones regulares. También incluye ejemplos de rules de uso común.
Una guía esencial de shortcuts de la revista de mayor venta del mundo.
creative magazine.
Una guía de Scriptaculous.
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, 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
});
