Problema con función al mostrar/ocultar div

[PabloManuel]

Hola!!

Os ruego me ayudéis, no sé como solucionarlo.

Tengo una función que oculta y muestra div's jugando con el left.

Funciona, pero el problema me viene cuando he incluido un plugin de Jquery para mostrar un menú tipo slider en toda la Web.

Si hago uso del menú me deja de funcionar la función de manera correcta, ya que me sigue mostrarn los div's, pero fuera de la pantalla, no sé que hacer.

Esta es la página: http://macoex.es/index2.asp

Si al entrar, pincháis en las llaves de arriba a la derecha, veréis que aparece un div con el formulario de logado, lo podéis hacer 100 veces que funciona

Probad a pinchar en el icono de menú de la izquierda, este aparecerá, si pincháis de nuevo se oculta.

Bien, si ahora pincháis en las llaves de nuevo, veréis que ya no aparece el Div para logarse.

¿Me podéis ayudar por favor?

[diurno10]

Hola pablo, primero gracias x dejar la url de tu sitio y asi poder reproducir el error, te comento lo que vi, veo que al atributo wrapper de la llamada al plugin simpleSidebar vos le pones como valor el id del div "continente", por lo tanto, como continente no es wrapper de tu div id sidebar, lo que hace es aplicar los estilos a todos los div q encuentre y dentro de esos div esta el de login id id_index_login, si lo examinas con firebug vas a ver q le aplica un margn-left 75 y eso hace q no lo veas en pantalla, pero en realidad esta.
En fin, yo te diria que revises el index2.asp y lo q tenes q hacer es ver q el div id=continente encierre a todos los demas y si no crear un div cualquiera que encierre al div id=slider y luego modificar el atributo del plugin simpleSidebar ej wrapper: "#nuevo div"
No se si fui claro, cualquier cosa me avisas.

[PabloManuel]

Muchas gracias, claro clarísimo. Tienes razón, pero no sé como estructurar mi html

La estructura es la siguiente
-html
- -body
- - - continente
- - - - Contenido
- - - div barrafija
- - - div login
- - - div suscripción
- - - div slidebar

los div ocultos o fijos los saco fuera del contenido y sin embargo barrafija y suscripción no se ven afectados. Si bajas del todo, verás que te aparece el formulario de suscripción y éste no se ve afectado nunca muestres y ocultes el slidebar antes o después.

¿cual sería la estructura correcta?
¿Es un problema de estructura o bien se puede solucionar tocando el CSS?

[PabloManuel]

Perdón, pongo la estructura completa:

La estructura es la siguiente
-html
- -body
- - - continente
- - - - Contenido
- - - - - Resto del html
- - - Footer
- - - div barrafija
- - - div login
- - - div suscripción
- - - div slidebar

El pie tampoco se ve afectado.

[PabloManuel]

He probado lo siguiente y pasa igual

He metido el Nav del slidebar en un aside, lo he llamado Id="wrapper_slidebar" y el plugin le he dado ese wrapper:

Código Javascript:

<script>
        $(document).ready(function(){
            $( "#sidebar" ).simpleSidebar({
              settings: {
                opener: "#open-sb",
                wrapper: "#wrapper_slidebar",
                animation: {
                  easing: "easeOutQuint"
                }
              },
              sidebar: {
                align: "left",
                width: 400,
                closingLinks: 'a',
              }
            });
        });
    </script>
 

Pasa lo mismo, con la diferencia, claro está, que el continente no se mueve a la derecha, ni ningún otro div, tan solo el div oculto. No lo entiendo.

[PabloManuel]

En el div oculto de logado se modifica el DOM a través de Jquery, ¿no tendrá algo que ver?

Código Javascript:

<script type="text/javascript">
            function muestra_oculta(id) {
            //compruebo si el elemto esta oculto o no
               if($('#'+id).is(':hidden')) {
                   $('#'+id).show('slow');
               }else {// de lo contrario lo oculto
                   $('#'+id).hide('slow');
               }
            }
        </script>
 

Código HTML:

<div class="div_subcontenido_g div_hidden" id="id_index_login">
            <a onclick="muestra_oculta('id_index_login')"><img title="Cerrar" alt="Cerrar" src="<%=Imagessys()%>/ico24_close.png"/></a>
            
            <form class="formulario" action="usr_registro.asp?proceso=login&pag=<%=Nombre_Pagina%>" method="post" language="JavaScript" name="FrontPage_Form1" onsubmit="return FrontPage_Form1_Validator(this)">
                <fieldset>
.
.
.
</fieldset>
            </form>
            
            <div>
                <p><img alt="Key" src="<%=Imagessys()%>/ico16_key.png"/>  <a href="usr_registro.asp?proceso=recpass">Recuperar contraseña</a></p>
                <p><img alt="Key" src="<%=Imagessys()%>/ico16_user.png"/>  ¿Aún no tiene cuenta? <a href="usr_registro.asp">Regístrese</a></p>
          
            </div>
            
        </div>
 

[diurno10]

para mi el div id contenido debe contener a todos, incluso los div q estan ocultos, ahora en un rato me bajo el plugin y lo pruebo y luego te aviso

[PabloManuel]

Muchas gracias!! Son muchos los clientes que tienen el mismo CMS, gracias de verdad.

[diurno10]

pablo, si te animas hacer una prueba hace esto, en tu hoja de estilo estilomatriz.css
busca esta clase .div_hidden y modifica el left a 15% y elimina el margin-left es decir que quede asi

Código:

.div_hidden {
    background-color: white;
    border: 1px solid gray;
    border-radius: 3px;
    box-shadow: 0 0 7px 0 #000000;
    display: none;
    height: 80%;
    left: 15%;
    overflow: auto;
    position: fixed;
    top: 7%;
    width: 75%;
    z-index: 100;
}

rompe cookies , probalo y me avisas!!!

[PabloManuel]

Funciona!!!

Css final, para que los demás veáis el cambio. Menuda tontería, cómo no me ha dado por probar ahí, me centré en los plugins y en Js. Muchas gracias Diurno, me has quitado un buen marrón de encima. Un saludo!!!

Código CSS:

.div_hidden {
    display: none;
    position: fixed;
    background-color: white;
    z-index: 100;
        
    top: 7%;
    height:80%;
    
    width:75%;
    
    
    border: solid 1px gray;
    border-radius: 3px;
    box-shadow: 0 0 7px 0 #000000;  
    overflow: auto;
    
    /*
    left: 100%;
    margin-left: -90%;
    */
    
    left: 15%;
 
}