jQuery

Themeando widgets jQueryUI

Para jQuery 1.4.x y jQueryUI 1.8.x

Drupal 7 viene con jQuery 1.4.x y jQueryUI 1.8.x
Si se quiere themear los widgets que vienen con jQueryUI 1.8.x se puede usar

http://ui-dev.jquery.com/themeroller/

que todavía está disponible a la fecha para generar él código css de la plantilla que reemplazará al css del jQueryUI que viene por defecto. Para cargar el css de esta versión de jQueryUI se puede usar

https://drupal.org/project/jqueryui_theme

que extraeá sólo el css (incluye una carpeta de imágenes) que necesitamos.

Etiquetas:

Igualar alto de columnas usando jQuery

A veces uno se encuentra con este viejo tipo de problemas y cuando no lo podemos vencer con css pues nos viene bien jQuery :)

Para ello usé el script que viene de

http://benalman.com/projects/jquery-resize-plugin/

y lo combiné con

http://drupal.org/node/934654#comment-3566124

para la parte de la configuración del Behaviours del jQuery de Drupal

Etiquetas:

Slideshow Vertical con imágenes agrupadas para un campo CCK usando Jcycle

Ya lo había hecho antes usando otro plugin jquery pero esta vez me animé a usar jcycle porque me parece una librería mucho más completa. Tome como referencia este enlace

http://jquery.malsup.com/cycle/div.html

Primero, hay que descargar el archivo jcycle de http://jquery.malsup.com/cycle/
Tenemos que usar el archivo jquery.cycle.all.min.js porque es el que incluye los efectos que necesitamos para el movimiento vertical (scrollUp ó scrollDown)

Lo añadimos a nuestro archivo .info dentro de nuestro tema

Archivo: 

outerHTML para jQuery

Si alguna vez necesitan imprimir el contenido completo en HTML de un objeto jQuery y no sólo lo que produce .html() ó text() entonces pueden usar esta extensión que les imprimirá el contenido completo del elemento jQuery.

Etiquetas:

Multiple Elements Cycle Plugin for Drupal

Interesante plugin para generar un slideshow de varias imágenes a la vez.
La extensión para jQuery puede descargarse de

http://www.willrossi.com/assets/releases/jQuery-Multiple-Elements-Cycle/demo/index.html

Para usarlo con un campo CCK de imágenes múltiples, seguir los sgtes pasos:

1. Modificar la salida del campo

1.1 En el template.php tenemos que indicar que archivo tpl almacenará la forma como imprimirá el campo

function phptemplate_preprocess_content_field(&$vars, $hook) {
  //add a template for image field
  if($vars['field']['type_name'] = 'page'){

Etiquetas:

Remover grid de theme ninesixty

En algunos momentos del desarrollo debemos desactivar la malla de grid que aparece en el tema 960 para poder trabajar. Con este snippet de jQuery podemos lograrlo

$(document).ready(function(){
        $('body').removeClass('show-grid');    
        });

Si queremos hacerlo temporalmente podemos usar este script que encontré en

http://www.stjerneman.com/demo/toggle-ninesixty-theme-960-grids-with-js

/**
 * $Id:$
 *  
 * Toggle grid for ninesixty
 * Created by: Emil Stjerneman - <http://www.anon-design.se> (anon - <http://drupal.org/user/464598>)
 *

Etiquetas:

trucos sobre jQuery

Tomado de

http://groups.google.com/group/jquery-es/web/25-consejos-y-trucos-sobre-jquery?pli=1

=======================================================================================

1.- Carga el framework desde Google Code.
Hay varias ventajas en la carga desde Google en lugar desde tu propio servidor. Se ahorra ancho de banda, carga muy rápidamente desde la CDN de Google y lo más importante, ya estará almacenado en caché si el usuario ha visitado un sitio almacenado en Google Code.

Etiquetas:

theming & use of ajax with jQuery

Mis primeros pasitos con jQuery ;)

(function($){
$(document).ready(function(){
$('#main').find('.tabs ul').css({'borderBottom':'solid 1px','borderColor':'black'});
$('#main').find('.tabs ul li a').css({'borderColor':'black'});
$('#main').find('.tabs ul li a.active').css({'borderBottom':'solid 1px #fff'});
});
})(jQuery)
(function($){
    $(document).ready(function(){
        $('body').find('.tabs:first ul li:nth-child(3) a').addClass('rock cumbia');
    });
})(jQuery);
(function($){
    $(document).ready(function(){
Subscribe to RSS - jQuery