jQuery(document).ready(function() {
/*
APLICAMOS FIX PARA NAVEGADORES Webkit (Chrome y Safari)
Con document.ready, las imágenes y css es posible que aun no se hayan cargado.
Si el navegador es de tipo Webkit, procesará el javascript y los estilos de modo paralelo,
por tanto, intentará calcular anchos y altos antes de que tener completado el CSS o la imagen cargada.
Por tanto debemos emplear window.load antes de comenzar a calcular anchos y altos.
*/
jQuery(window).load(function() {
jQuery.noConflict();
/***
=========================================================================
ACCESIBILIDAD > Mostramos contenido accesible sin javascript
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 23/03/2011
@descripcion:
WCAG2.0: 'El contenido debe ser visible sin javascript'
Con esta función ocultamos el contenido que ha sido marcado específicamente
para ser mostrado en caso de que el usuario no tenga activado javascript.
Si el usuario no tiene javascript, esta función no se ejecuta, y por tanto
todos los elementos con class="sinjavascript" seguirán teniendo dicha clase,
y por tanto serán mostrados al usuario.
En el CSS:
.sinjavascript {
float:none !important;
display:block !important;
position:relative !important;
height:auto !important;
min-height:100%;
overflow:hidden !important;
}
Si esta clase no es removida, el elemento que la lleve será mostrado.
=========================================================================
***/
jQuery('.sinjavascript').removeClass("sinjavascript");
/* ================================================================== */
/***
=========================================================================
CAJAS CON PESTAÑAS > Altura variable
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 23/03/2011
@descripcion:
Todas aquellas cajas que tengan pestañas (tabs) para navegar entre sus
contenidos, pueden emplear esta función.
Lo único que hace esta función es asignar la altura al contenedor, según
lo que haya en el contenido de cada pestaña.
=========================================================================
***/
function onAfter(curr, next, opts, fwd) {
/*
Altura de la caja de pestañas: 44px;
Padding + border de la caja de contenido: 16px;
Le quito 28px (44px - 16px) */
var alto_final = jQuery(this).height() - 28;
jQuery(this).parent().animate({height: alto_final});
}
/* ================================================================== */
/***
=========================================================================
FORMULARIOS > BUSCADOR > Al hacer focus quitamos el texto por defecto
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 23/03/2011
@descripcion:
Con esta función lo que hacemos es eliminar el texto que aparece por
defecto en el campo , justo cuando el usuario hace focus en él.
Uso: Lee el valor del atributo value, y lo compara con lo que el usuario
rellena. Por ejemplo:
=========================================================================
***/
jQuery('#form-buscador input[type=text]').each(function(){
var defaultVal = jQuery(this).attr('value');
jQuery(this).focus(function(){
if (jQuery(this).val() == defaultVal){
jQuery(this).removeClass('activo').val('');
}
})
.blur(function(){
if (jQuery(this).val() == ''){
jQuery(this).addClass('activo').val(defaultVal);
}
})
.blur().addClass('activo');
});
/* ================================================================== */
/***
=========================================================================
MENU PRINCIPAL > Ponemos y quitamos .hover al pasar el raton
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 06/04/2001
@descripcion:
=========================================================================
***/
jQuery('#mainmenu ul li').each(function(index) {
jQuery(this).mouseenter(function() {
jQuery(this).addClass("hover");
}).mouseleave(function() {
jQuery(this).removeClass("hover");
});
});
/* ================================================================== */
/***
=========================================================================
CAJA CON PESTAÑAS TIPO 01
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 21/02/2011
@descripcion:
Utilizamos el pluggin de jQuery llamado 'Cycle' para ir rotando de un
contenido a otro utilizando un paginador, o incluso flechas para avanzar
o retroceder.
Pluggin Cycle: http://jquery.malsup.com/cycle/
=========================================================================
***/
jQuery('.cajapestanas01').each(function(indice_carrusel) {
jQuery('.contenido',this).cycle({fx: 'fade', speed: 1000, timeout: 0, delay: -1000, after: onAfter}).cycle('pause');
// Marcamos la primera opcion del paginador como "activa"
jQuery('.cabecera-cajapestanas01 ul li:first', this).addClass("activo");
// Oculto el titular de cada bloque
jQuery('.titular-accesible', this).css({display: "none"});
jQuery('.cabecera-cajapestanas01 ul',this).children().each(function(i) {
jQuery(this).click(function() {
jQuery('.cajapestanas01:eq('+indice_carrusel+') .contenido').cycle(i).cycle('pause');
jQuery('.cajapestanas01:eq('+indice_carrusel+') .cabecera-cajapestanas01 ul li').removeClass('activo');
jQuery('.cajapestanas01:eq('+indice_carrusel+') .cabecera-cajapestanas01 ul li:eq('+i+')').addClass('activo');
});
});
});
/* ================================================================== */
/***
=========================================================================
CARRUSELES > El paginador avanza junto con el carrusel
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 21/02/2011
@descripcion:
Redefinimos la función del pluggin Cycle que actualiza el enlace activo del paginador
=========================================================================
***/
jQuery.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
jQuery(pager).find('li').removeClass('activo')
.filter('li:eq('+currSlideIndex+')').addClass('activo');
};
/* ================================================================== */
/***
=========================================================================
CARRUSEL TIPO 01
-------------------------------------------------------------------------
@autor: Alfonso Martin
@fecha: 21/02/2011
@descripcion:
Utilizamos el pluggin de jQuery llamado 'Cycle' para ir rotando de un
contenido a otro utilizando un paginador, o incluso flechas para avanzar
o retroceder.
Pluggin Cycle: http://jquery.malsup.com/cycle/
Variables:
item_width -> Ancho de un item, teniendo en cuenta margin y padding
=========================================================================
***/
jQuery('.carrusel-01').each(function(indice_carrusel) {
jQuery('.lista-items', this).cycle({speed: 1000, timeout: 10000, pager: '.carrusel-01 .paginador-carrusel:eq('+indice_carrusel+') ul', pagerAnchorBuilder: function(idx, slide){return '';}, delay: -1000});
/* Pintamos el paginador, inyectando una cadena html en la capa del paginador */
item_width = 31;
total_items = jQuery(".lista-items > .item", this).size();
total_width = (total_items * item_width);
cadena_html_menu_carrusel = '';
for(x=0;x'+elemento+'';
}
jQuery('.paginador-carrusel ul', this).html(cadena_html_menu_carrusel)
/* Marcamos la primera opcion del paginador como "activa" */
jQuery('.paginador-carrusel ul li:first', this).addClass("activo");
/* Centramos el paginador */
jQuery('.paginador-carrusel ul', this).css({width: total_width});
/* Le damos funcionalidar al paginador */
jQuery('.carrusel-01 .paginador-carrusel:eq('+indice_carrusel+') ul li').each(function(indice_paginador) {
jQuery(this).click(function() {
jQuery('.carrusel-01:eq('+indice_carrusel+') .lista-items').cycle(indice_paginador).cycle('pause');
jQuery('.carrusel-01:eq('+indice_carrusel+') .paginador-carrusel ul li').removeClass('activo');
jQuery('.carrusel-01:eq('+indice_carrusel+') .paginador-carrusel ul li:eq('+indice_paginador+')').addClass('activo');
});
});
});
/* ================================================================== */
});
});