Código:
El problema es que al cambiar el contenido de la <div> (al hacer click en el boton), se pierde el estilo y las barras de scroll vuelven a ser las predefinidas de windows.<link rel="stylesheet" type="text/css" href="css/flexcrollstyles.css" /> <style> #uno { height:100px; overflow:auto; width:200px; } #dos { background-color:#9CC; height:200px; overflow:auto; width:300px; } </style>
Obviamente, el objetivo de esto es que al cambiar el contenido usando ajax no ocurra lo mismo.
Este es el codigo HTML:
Código:
Este es el codigo jquery:<div id="uno" class="flexcroll"> Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial </div> <div id="dos" class="flexcroll"> Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial Texto Inicial </div> <button id="btnUno">Uno</button>
Código:
Lei algo de que se puede actualizar la DOM con live o livequery, pero no funciona. Por si acaso uso estos 3 scripts:<script type="text/javascript"> var cadena = "Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido Nuevo Contenido"; $(document).ready(function() { $("#btnUno").click( function() { cambiar(); }); }); function cambiar() { $("#uno").livequery(function() { $.getScript('js/flexcroll.js'); $(this).html(cadena); }); } </script>
Código:
<script src="js/jquery.js"></script> <script src="js/jquery.livequery.js"></script> <script src="js/flexcroll.js" type="text/javascript"></script>
Pueden descargar el codigo de la flexcroll (para probar) aqui: [URL]http://www.hesido.com/web.php?page=customscrollbar[/URL]
El problema no es necesariamente la flexcroll, pueden probar con cualquier plug-in y el estilo se pierde igual al actualizar la DOM