jquery y cualquier elemento con barra de scroll personalizable

Phalaxero — Wed, 01 Apr 2009 19:00:32 +0000

A lo largo de mi vida profesional, estoy adoptando interface abuelo cebolleta, uno de los problemas en cuanto a maquetación y transformación de diseños a html ha sido las barras de scroll, principalmente en capas que mediante flechas muestran el resto del contenido y hoy he tenido una sesión del tema referido a jquery y que se puede hacer al respecto.

jQuery es un framework muy potente en cuanto a javascript se refiere, en especial su capacidad de utilizar plugins de terceros y para el tema del que trato tiene uno muy intresante: jScrollPane.

Hoy me he pasado toda la tarde redimensionando la ventana del navegador para modificar el scroll de una capa y al final creo que lo he conseguido, aquí os dejo la perla:

$(document).ready(function(){
anchoInicial = $(”#conProyectos img”).width()

var setContainerHeight = function(){

menuProyectosResize()
altura = $(”#conProyectos”).height() – marginBotoomMenuInicial

$c = $(’#menProyectos’);
if(bInicio){
$c.css({height: altura});
}
$(’body>.jScrollPaneContainer’).css({’height’: altura + ‘px’});
$(’.jScrollPaneContainer’).css({’height’: altura + ‘px’});
$c.jScrollPane();

bInicio = false;

if($(’#conCen’).width() $(’body’).css({’background’: ‘#F4F4F4′});
else
$(’body’).css({’background’: ‘#FFFFFF’});

}
$(window).bind(’resize’, setContainerHeight);
setContainerHeight();
});

El problema principal era que cuando se llama a la función base .jScrollPane() se modifica la estructura de la capa que contiene la información que quieres scrollear (¿? posible patada al diccionario) conteniendo la misma en una capa que crea llamada jScrollPaneContainer.

Os recomiendo que veáis los ejemplos, hay alguno muy interesante sobre como cambiar la barra de scroll de la propia ventana del navegador..

Phalax.com » jquery

jquery y cualquier elemento con barra de scroll personalizable