Drupal, Ubuntu, jQuery, CSS
Entradas etiquetadas con jQuery
jQuery.slideToggleMinHeight()
hace 1 año
en jQuery
He actualizado el plugin para hacerlo un poco mas flexible.
Los ejemplos y documentacion de uso estan en:
Este es un tip rápido pero útil.
Escenario:
Tenes un div con el id “elDiv” con el siguiente CSS:
#elDiv {
border: 1px solid #336699;
float: right;
padding: 20px;
width: 500px;
}
Y en Firefox/Chrome/Safari/Opera al hacer $(“#elDiv”).height(); te entrega 400px por decir algo (el tamaño depende de lo que tenga dentro).
Pero curiosamente en Internet explorer te da un tamaño raro… de menos, unos 358px en nuestro ejemplo.
¿Qué pasa?
Pasa que no le especificaste un modo de renderizado al HTML por medio del DOCTYPE, y por culpa de ello Internet explorer va a renderizar el contenido en modo “Quirks Mode” http://es.wikipedia.org/wiki/Quirks_Mode.
Si no queres leer el articulo de Wikipedia te comento que lo único que tenes que hacer es poner lo siguiente por encima del tag <html>:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
PD: el valor de 358px en mi ejemplo viene de que en modo quirks, IE toma el tamaño del tamaño real menos el padding y el borde: 400 – 40 – 2 = 358.
Usar jQuery 1.4.2 en Drupal 6
hace 1 año
en Drupal 6
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.e-capy.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);
}
}
}
Curiosidades y cosas útiles de jQuery
hace 2 años
en jQuery
En addyosmani.com encontré 31 snippets para jQuery de los cuales algunos me parecen especialmente útiles:
Método .live():
Según comentan en el blog (y tiene razón) es mas útil que usar directamente el método .click(). ¿por que?, fácil, porque el método .live() es capaz de mantenerse a la escucha de cualquier elemento que machee con el selector aun si el elemento ha sido creado después de haberlos enlazado.
Un ejemplo:
$('.clickme').click(function() {
alert("Hola, me hiciste click");
});
El código anterior va a funcionar sobre todos los elementos que actualmente existan en el DOM, pero nos podemos ir olvidando que lo haga sobre cualquier contenido que se cree después de ese momento.
$('.clickme').live('click', function() {
alert(“¿ves? Me sigo ejecutando sobre cualquier elemento”);
});
Aquí la diferencia: Si yo después de haber ejecutado el anterior código, hiciera:
$(“body”).append(“<a href=”#” class=”clickme” >Soy nuevo</a>);
El nuevo elemento SI ejecutaría el código.
Agrupado de funciones:
Otra de las gracias que tiene jQuery es que permite apilar funciones:
jQuery('#foo').bind({
click: function() {
alert(“Me haces click”);
},
mouseover: function() {
alert(“Me pasas por encima”);
},
mouseout: function() {
alert(“No estás mas encima de mi”);
}
});
Se explica solo, pero por si quedan dudas lo que hicimos acá fue ahorrar código usando un único selector. Al elemento seleccionado le hemos pegado tres eventos junto a las funciones correspondientes. Geeeenial.
Método .sleep()
Siempre me hiso falta una manera de retardar algunas acciones, y de momento había estado usando query.timer.js (un plugin). Pero los tiempos cambian, y desde la versión 1,4 de jQuery ya viene esta característica incorporada.
Ejemplo:
$('#caja').slideUp(300).delay(1000).slideDown(400);
Traducción: #caja va a plegarse en 300 mili segundos, no va a hacer mas que esperar un segundo (1000 mili segundos) y va a desplegarse a lo largo de 400 mili segundos
Método .data()
Si necesitas almacenar información (temporalmente) podes usar variables.. Pero si lo que querés es “pegar” información a elementos del DOM lo que necesitas es esto.
Ejemplo:
$("div").data("nombre", 'Marcelo');
alert($("div").data("nombre") === 'Marcelo'); //imprime true
¿Para que sirve?. Está mas que claro. Si tuvieras una tabla, y a los <tr /> les quisieras establecer un id asociado…. ¿vas viendo la idea?
Shortcut para el metodología .find()
Si tenes que ir seleccionado elementos que están dentro de un elemento por lo general usamos el método .find(). Bueno resulta que podemos usar el método de una forma mas abreviada y clara:
$(“a”).find(“b”); //podemos expresarlo como: $(“a”, “b”);
Seleccionar elementos cuyo id contiene caracteres especiales:
si tratamos seleccionar un div que tenga en su id un par de corchetes como en el siguiente caso:
$("$item_[200]");
No va a funcionar. Pero podemos seleccionar este elemento de la siguiente forma:
$("$item_\\[200\\]");
Altos iguales entre DIVs con jQuery
hace 2 años
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();