Revelar contenido de divisiones al hacer clic

No estoy muy seguro de cómo expresar lo que estoy buscando en términos de motor de búsqueda, así que lo que estoy tratando de hacer es:

Quiero tener una división, o dos si eso es lo que se necesita, en el centro de la página que al hacer clic se separe. La parte superior se desliza hacia arriba, la parte inferior se desliza hacia abajo y revela el contenido del sitio web en el medio.


clic


diapositiva


No estoy exactamente seguro de cómo redactar mi búsqueda de algo que haga eso correctamente. He visto algunos sitios web que tienen variaciones de esto. Sin embargo, solo los que se abren a la izquierda / derecha. Estoy seguro de que esto es difícil, pero cualquier ayuda para lograrlo sería muy apreciada.

Gracias de antemano, BC.

preguntado el 22 de mayo de 12 a las 20:05

¿Y que has probado? -

Entonces, ¿como una cosa del tipo de ventana que se abre? -

Sí, básicamente. Con la ayuda de otros usuarios de desbordamiento de pila hace un tiempo, he estado jugando con este código, pero no soy el más avanzado cuando se trata de jquery. Desearía poder ser más útil para explicar lo que estoy tratando de hacer, pero tengo problemas para expresarlo yo mismo. En resumen: una división onclick que se divide por la mitad; arriba sube, abajo baja; y revela todo el contenido de los sitios web en el medio donde se divide. jsfiddle.net/itsbc/QchfJ -

pruebe el widget de acordeón jQuery UI. jqueryui.com/demos/acordeón -

Sí, eso es lo que estoy investigando ahora mismo. Simplemente no creo que tenga suficiente conocimiento de jquery para que se adapte de la manera que espero. -

5 Respuestas

Creo que esto es lo que necesitas: http://jsfiddle.net/WQCav/

HTML:

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS:

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS:

html,body
{
    width:100%;
    height:100%;
}

contestado el 22 de mayo de 12 a las 22:05

Edité el código! PD: si hay alguna pregunta sobre el código, solo pregunte. - Mago

Haz clic aquí el-arte-de-la-web.com/css/timing-function desplácese un poco y verá 6 transiciones diferentes. Creo que lo que quieres es facilidad de entrada y salida, pero si no, dímelo. - Mago

Una vez que elija la transición, dígame y modificaré el código. - Mago

Finalmente, no puedo. Busqué mucho y es muy complicado con su caso (para detenerse en 80px haciendo que el intervalo de ajuste cambie en %). Puede intentar publicar una pregunta sobre la transición en js. ¡Buena suerte! - Mago

Ok, pero cuando estemos conectados al mismo tiempo. - Mago

Si está usando JQuery, simplemente puede usar deslizar hacia arriba y bajar deslizándose en el div objetivo.

Editar

En realidad, en este caso creo deslizar Alternar es lo que estas buscando:

<script type='text/javascript'>
    $(document).ready(function() {
        $(".button").click(function() {
            $("#content).slideToggle();
        });
    });
</script>

<div class='button'>Top Panel</div>
<div id='content'>Content</div>
<div>Bottom Panel</div>

contestado el 22 de mayo de 12 a las 20:05

Gracias por las respuestas. He estado jugando con uno también; jsfiddle.net/itsbc/QchfJ , pero no estoy seguro de por dónde empezar para que se abra de la manera que quiero. Básicamente quiero que la división se divida por la mitad. Imagine el div negro que dice "prueba" centrado vertical y horizontalmente en la pantalla, luego el negro se abre hacia la parte superior de la pantalla, el azul se abre hacia la parte inferior y el contenido se revela en el medio. - subc

Acabo de terminar de solucionar este problema. No quería que el div repasara el material debajo de él, sino que lo desplazara hacia abajo. Esto hará que la división se divida por la mitad, sienta lo que desea: necesitará algo debajo del div deslizante (como otro div, o un div que tenga una altura invisible y una altura en Auto en CSS para que funcione para su envoltura principal .

Aquí esta lo que hice:

Mi CSS:

.slide {
    height:200px;
    background-color: white;
    padding:20px;
    margin-top:10px;
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

}




#show_div {
    margin-left: 40px;
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border: 1px solid #333;
    font-size: 20px;


}

Esto fue para que se viera bonito. A continuación se muestra más de la función:

.show_hide {
    display:none;

Codificación: En el encabezado pongo la función JQ:

 $(document).ready(function(){

        $(".slide").hide();
        $(".show").show();

    $('.show').click(function(){
    $(".slide").slideToggle();
    });

});

Luego, en el div mismo, no olvide colocar las cosas realmente buenas que le darán estilo a su div para que funcione de la manera que desee:

<a id="show_div" href="#" class="show">Browse Styles</a>


    <div class="slide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, nibh at iaculis ultrices, mi eros tincidunt enim, vitae vehicula lectus odio a ipsum. Aliquam erat volutpat. Fusce id nisl sit amet diam iaculis pulvinar. Sed ultrices ullamcorper ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mi arcu, porta ut elementum et, ullamcorper sed eros. In euismod tellus sed ipsum adipiscing suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac magna dui. Aenean nec leo libero. Pellentesque lacinia dolor a dui lacinia consectetur. Mauris euismod porta magna, non dignissim orci adipiscing malesuada. Phasellus nunc sapien, consectetur nec vestibulum ac, euismod a ipsum.

    </div>
​

El principal atractivo de esto es que deberá colocar una instancia de Jscript para cada div para el que desee usar esto, de lo contrario, todos se activarán al mismo tiempo. Puede colocar el botón (o enlace) en cualquier lugar de la página. Tengo un par de ellos uno al lado del otro y cuando se hace clic, dividen la página desde la misma ubicación.

Si necesita varios de estos, no olvide dar a los divs identificaciones únicas y cambiar su nombre en el Jscript para que la magia suceda.

AQUÍ HAY UN EJEMPLO DE JFIDDLE: http://jsfiddle.net/vH3cK/1/

Espero que ayude!

contestado el 22 de mayo de 12 a las 22:05

Gracias por hacer esto. Intenté ponerlo en un violín, pero parece que no pude lograr que el efecto funcionara. ¿Lo hiciste en violín y, de ser así, te importaría si le echo un vistazo? Gracias de nuevo, BC. - subc

Hizo algunos cambios: consulte el JFIDDLE para obtener aclaraciones. ¡Déjame saber cómo resulta! - Andrés

Gracias de nuevo por la ayuda. Hace un tiempo, cuando jugaba con un código con el que tuve ayuda, pude lograr un efecto similar al que se muestra en el violín. Este código que publicó Mageek es idéntico al efecto que estoy tratando de lograr; Acabo de hacer la transición un poco más suave. También responderé a su respuesta y veré si conoce alguna forma de lograrlo, pero si no, creo que funcionará bien para lo que busco. Gracias de nuevo, BC. - subc

El primer "div" debe estar compuesto por dos divs diferentes, uno para la parte superior y otro para la parte inferior. El contenido de su página debe tener el estilo "display:none" al principio. Cuando el usuario haga clic en el primer div, muestre el contenido de la página usando "$(selector).slideDown(500)". Tendría que probarlo, pero creo que debería funcionar a las mil maravillas. Puede intentar usar .show(), .toggle() y diferentes cantidades de tiempo (en milisegundos) para ver qué se ajusta mejor.

contestado el 22 de mayo de 12 a las 20:05

¿Hay alguna manera de llegar a donde onclick "$(#topdiv).SlideUp(500)" y también desde el mismo clic hasta donde "$(#bottomdiv).SlideDown(500)". También necesitaría que se deslice desde el centro de la página hacia arriba/abajo según los porcentajes. La idea es que, independientemente de la resolución, siempre vaya a la parte superior e inferior de la página visible. Gracias por tu respuesta, BC. - subc

El problema de resolución es solo css. Depende de la forma en que establezca el tamaño del contenido. Sin embargo, no estoy seguro acerca de la primera pregunta ... intente usar show en el contenido interno y no en los divs superior e inferior. - Pablo Mescher

la función jQuery .animate() también podría ser algo a tener en cuenta: utiliza CSS, que generalmente es una mejor práctica.

contestado el 22 de mayo de 12 a las 20:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.