Tengo dos <div> con estilos definidos al inicio (en este caso uso el plug-in "flexcroll" para mostrar scroll personalizado.
Código:
<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>
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.
Obviamente, el objetivo de esto es que al cambiar el contenido usando ajax no ocurra lo mismo.
Este es el codigo HTML:
Código:
<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>
Este es el codigo jquery:
Código:
<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>
Lei algo de que se puede actualizar la DOM con live o livequery, pero no funciona. Por si acaso uso estos 3 scripts:
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