Señoras y señores, les juro que no he sido capaz de encontrar la documentación de estos tres eventos en la api de jQuery, pero ahí están y funcionan!
Testeado en FF, Chrome, IE7 IE8
$(document).ready(function() {
$("#mi-textarea").bind('copy', function(e) {
alert('Copiando!');
});
$("#mi-textarea").bind('paste', function(e) {
alert('repartiendo!... digo, pegando!');
});
$("#mi-textarea").bind('cut', function(e) {
alert('Cortando!');
});
});
Sé que hay soluciones hechas para este problema en particular, pero pesa 33k y solo necesitamos unas líneas como van a ver para lograr lo mismo…
Sabido es que a ie se la sudan los estándares y cuando los incorporan por lo general lo hacen taaarde.
La propiedad CSS “box-sizing” no es la excepción.
Ya sabemos que el siguiente CSS va a arreglar los desfases que se dan cuando un input que esta con un width:100%; dentro de un div que tiene un ancho fijado.
.elemento {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Y como comente en el post anterior, esta propiedad no está soportada en ie7.
Soluciones hay de todo tipo, pero lo cierto es que teniendo jQuery en todos mis desarrollos, se me hiso más que obvia la decisión de usar un script que arregle este bug en lugar de usar cosas más raras (archivos .htc por ejemplo).
Para implementar la solución solo necesitas poner este script:
$(document).ready(function () {
if ($.browser.msie && ($.browser.version.substr(0, 1) == 7 || $("meta[content='IE=EmulateIE7']").length > 0)) {
$(".ie7Fix-Box-model").each(function (i, v) {
var el = $(v);
//calculamos
var pL = el.css("paddingLeft").replace("px", "") != "" ? el.css("paddingLeft").replace("px", "") : 0;
var pR = el.css("paddingRight").replace("px", "") != "" ? el.css("paddingRight").replace("px", "") : 0;
var bLW = el.css("borderLeftWidth").replace("px", "") != "" ? el.css("borderLeftWidth").replace("px", "") : 0;
var bRW = el.css("borderRightWidth").replace("px", "") != "" ? el.css("borderRightWidth").replace("px", "") : 0;
var newSize = el.width() - (parseInt(pL, 10) + parseInt(pR, 10) + parseInt(bLW, 10) + parseInt(bRW, 10));
//le aplicamos el nuevo tamaño
el.width(newSize);
});
}
});
Y ponerle la class “ie7Fix-Box-model” a todos los input que necesites arreglar.
Ver ejemplo (vean el codigo fuente)
Este plugin lo uso hace un tiempo, y puedo dar fe que es muy práctico.
http://code.google.com/p/js-hotkeys/
Su uso es de lo mas simple:
$(document).bind('keydown', 'esc', function() {
$("#ventana").hide();
});
He actualizado el plugin para hacerlo un poco mas flexible.
Los ejemplos y documentacion de uso estan en:
Hace un tiempo necesité hacer una cosa bastante divertida en jQuery, pero a sabiendas de que con jQuery 1.4.2 iba a ir mas rápido mi desarrollo, me tome el atrevimiento de ponerlo a disposición de mi modulo.
Lo primero que hay que hacer es registrar a la función que se va a encargar de inyectar el nuevo jQuery en las funciones que se ejecutan al pre procesar page.tpl.php
/**
* Implementation of hook_theme_registry_alter().
* la usamos para reemplazar jquery core por la v 1.4.2
*/
function mimodulo_theme_registry_alter(&$theme_registry) {
/*
Me fijo si ya está seteada la funcion nuestra y si la encuentro la quito del array de funciones para poder incluirla
mas adelante al fondo de la cola de ejecucion.
Este paso es importante, ya que si nuestra funcion estuviera ejecutandose antes que cualquier otra, correriamos
el riesgo de que algun otra funcion resetee el cambio que estamos queriendo hacer.
*/
if (isset($theme_registry['page'])) {
if ($key = array_search('inyecta_jquery', $theme_registry['page']['preprocess functions'])) {
unset($theme_registry['page']['preprocess functions'][$key]);
}
$theme_registry['page']['preprocess functions'][] = 'inyecta_jquery';
}
}
Vamos a aclarar una cosa antes de seguir. Drupal 6 NO fue pensado para funcionar correctamente con versiones superiores de jQuery, y mucho menos los módulos de terceros.
Esto lo aclaro porque dentro del siguiente trozo van a ver que evalúo dentro de que URL estoy antes de inyectar la nueva versión de jQuery, y lo hago porque en mi caso, solamente me hace falta en esa pagina.
/**
* @param $variables array de todas las variables que tiene el theme.
* @return void
*/
function inyecta_jquery(&$variables) {
//esta modificacion es muy puntual, y si no estamos sobre la pagina que queremos no hacemos nada
//supongamos que la url es www.ecapy.com/prueba/jquery/1-4-2
if (check_plain(arg(0)) == "prueba" && check_plain(arg(1)) == "jquery" && check_plain(arg(2)) == "1-4-2") {
// como hay paginas en las que no se carga ningun js lo checkeamos antes de nada
if (!empty($variables['scripts'])) {
//Obtenemos el array de js que se van a cargar
$scripts = drupal_add_js();
//preparamos la ruta hasta donde tenemos guardado nuestro jquery 1.4.2
$jqNew = drupal_get_path('module', 'mimodulo') . '/js/jquery.1.4.2.min.js';
$new_jquery[$jqNew] = array("defer" => false, "cache" => false, "preprocess" => true);
//lo incluimos en el array de js's en lo que viene a ser los js del core
$scripts['core'] = array_merge($new_jquery, $scripts['core']);
//volamos el anterior jquery (el del core)
unset($scripts['core']['misc/jquery.js']);
//por ultimo reemplazamos en $variables["scripts"] el array anterior por el que hemos manipulado
$variables['scripts'] = drupal_get_js('header', $scripts);
}
}
}
Visto en la documentación oficial:
Creamos el metodo:
$.fn.equalizeHeights = function() {
return this.height(Math.max.apply(this, $(this).map(function(i, e) {
return $(e).height()
}).get()))
}
Para hacer uso de el sobre las columnas que deseamos equiparar:
$('.columnas').equalizeHeights();