Hola amigos, verán tengo un extraño problema que no se a que puede deberse.
tengo 2 codigos javascript, uno me permite hacer un fade in y fade out a unos divs
con información en cada uno de ellos, haciendo así las veces del contenido de las opciones
de mi web al hacer click en las opciones de menú.
O dicho de otro modo al hacer click en las opciones de menu aparece contenido mediante un fade in y cuando hago click a otro boton de menu desaparece el contenido visible en ese momento con fade out y con un fade in aparece el siguiente contenido.
Esto funciona, va bien.
el segundo codigo es el de un scrollbar con efecto suave. Y tambien va bien.
Pero cuando lo implemento , el extraño efecto que pasa es:
que cuando hago click en un boton del menu aparece el contenido de la opcion de menu mediante fade in , pero el scrollbar no aparece, y si justo en ese momento cojo la pantalla del navegador donde sale la web y la arrastro a la segunda pantalla que tengo (por que tengo 2 pantallas conectadas a mi ordenador una mas grande que la otra), pues justo en ese momento al contendo le aparece ya el scrollbar al lado y funciona. pero como digo solo aparece el scrollbar cuando paso la ventana del navegador de una pantalla a la otra.
esto me di cuenta despues de hacer mil pruebas.
y ni se por que ocurre ni como arreglarlo.
Si alguien pudiera echarme una mano le estaria muy agradecido.
estos son los codigos:
Código Javascript
:
Ver original<!--MOSTRAR-OCULTAR OPCIONES DEL MENÚS OPCS ===================================================================-->
<script>
// inicialmente aparece la primera opcion marcada
var ultimo=1;
$(document).ready(function(){
// evento que se ejecutara al seleccionar cualquier opcion del menu
<!-- $(".cont_sub_opcs div").click(function(){-->
$(".menus_opcs div").click(function(){
// obtenemos el nuevo id
nuevo=$(this).attr("id");
if(nuevo!=ultimo)
{
// escondemos el ultimo id
$("#opc_"+ultimo).fadeOut(function(){
$("#"+ultimo).removeClass("seleccionado");
$("#"+nuevo).addClass("seleccionado");
// mostramos el nuevo id
$("#opc_"+nuevo).fadeIn();
ultimo=nuevo;
});
}
});
});
</script>
Codigo scrollbar:
Código Javascript
:
Ver original<!-- SCROLLBAR DE OPCS PERSONALIZADO =========================================================-->
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" />
<!--<script src="js/jquery-1.9.1.min.js"></script>-->
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$(".contenedor_opcs").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
Evidentemente lo que necesito es que al hacer click en cualquier opcion aparezca el contenido mediante fade in y con su scrollbar al lado.
gracias.