Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Al actualizar la DOM se pierde el estilo

Estas en el tema de Al actualizar la DOM se pierde el estilo en el foro de Frameworks JS en Foros del Web. 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" /> ...
  #1 (permalink)  
Antiguo 06/07/2010, 11:01
 
Fecha de Ingreso: julio-2010
Mensajes: 1
Antigüedad: 13 años, 8 meses
Puntos: 0
Al actualizar la DOM se pierde el estilo

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
  #2 (permalink)  
Antiguo 06/07/2010, 11:05
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Tema movido desde javascript
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 08/07/2010, 14:03
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 15 años
Puntos: 101
Respuesta: Al actualizar la DOM se pierde el estilo

Si, .live() te sirve para dar funcionalidad a elementos nuevos. Pero no creo que tenga que ver con CSS.

Todo lo que cargues tendría que "obedecer" al CSS.

Etiquetas: dom, estilo, pierde
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:43.