como puedo hacer que el navegador cargue un DIV central?

hiram_ramirez8 · #1 (**permalink**) 25/08/2011, 11:37

Hola amigos estoy programando una pagina HORIZONTAL y tengo 3 DIV's izquierdo, central y derecho, pero cuando entro a la pagina por primera vez quisiera que en vez de que empezara a cargar la pagina completa por el DIV izquierdo lo haga por el DIV del CENTRO... ALGUIEN TIENE IDEA DE COMO HACER ESO???

GRACIAS DE ANTEMANO!!!

IsaBelM · #2 (**permalink**) 25/08/2011, 13:07

el navegador interpreta el html de arriba/derecha a bajo/izquierda. aún así lo puedes hacer usando javascript, pero la pregunta es; merece la pena??

hiram_ramirez8 · #3 (**permalink**) 25/08/2011, 13:15

mira lo que quiero lograr hacer eso algo como esto http://www.almeyra.com/ que la pagina inicia en el centro y tiene mas DIVS a la izquierda y derecha osea la idea es lograr ese efecto me explico?

IsaBelM · #4 (**permalink**) 25/08/2011, 13:27

no veo ningún efecto. a ver te explico mi idea
los bloques de la izquierda y derecha están ocultos. ahora antes de la etiqueta </body> insertas este código javascript para modificar el dom

Cita:

document.getElementById('idbloqueizquierda').style .display = 'block';

hiram_ramirez8 · #5 (**permalink**) 25/08/2011, 13:39

ok vere haber si funciona, pero ya lo intente algo asi y no me funciono:

<script>
$("#location_left").show();
</script>
<script>
if (document.getElementById ('location_left'). style.display == "none"){

$(window).resize(function(){
$('.global').css({
position:'absolute',
left: ($(window).width() - $('.global').outerWidth())/2,
top: ($(window).height() - $('.global').outerHeight())/2
});

});

// Ejecutamos la función
$(window).resize();

}

</script>

hiram_ramirez8 · #6 (**permalink**) 25/08/2011, 13:40

de esa manera hago algo como lo que me explicas, pero cuando hago la funcionalidad flechas que tiene esa pagina se pierde, las flechas no ubican su destino

IsaBelM · #7 (**permalink**) 25/08/2011, 14:16

adivinaré lo que has querido decir. el bloque central no queda ubicado en principio en el lugar en el que finalmente estará cuando la página esté totalmente cargada. en lugar de usar la propiedad display, usa visibility

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; http-equiv="Content-Type" charset=utf-8"/>
<title></title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}

#principal {
width:100%;
}

#der, #izq{
width:300px;
float:left;
height:500px;
/*display: none;*/
visibility: hidden;
}

#cen {
width:300px;
float:left;
height:500px;
}

#der {background: green;}
#cen {background: blue;}
#izq {background: red;}
</style>
<script type="text/javascript">
function fnc(){
document.getElementById('izq').style.visibility = 'visible';
document.getElementById('der').style.visibility = 'visible';
}

window.onload = setTimeout(function() {fnc();},5000);
</script>
</head>
<body>
<div id="principal">
<div id="der">
</div>
<div id="cen">
</div>
<div id="izq">
</div>
</div>
</body>
</html>

hiram_ramirez8 · #8 (**permalink**) 26/08/2011, 08:29

ok checare haber si funciona

hiram_ramirez8 · #9 (**permalink**) 26/08/2011, 08:38

y como podria ordenarlos horizontalmente?

hiram_ramirez8 · #10 (**permalink**) 26/08/2011, 08:51

huy ya lo hice me sirvio perfecto tu ejemplo muchas gracias :) era exactamente lo que necesitaba :) y nadie me habia dado respuesta ya logre hacer lo que necesitaba GRACIAS IsaBelM

hiram_ramirez8 · #11 (**permalink**) 26/08/2011, 09:01

ups creo que sigue fallando un poco jejeje, lo que pasa es que cuando secciono la pantalla en 3 osea le pongo a cada div 1290px en el width no pasa nada jejje no se ponen los otro 2 jejeje

hiram_ramirez8 · #12 (**permalink**) 26/08/2011, 09:05

y cuando los alineo al todos horizontalmente la pantalla al cargar el navegador por primera vez carga en blanco despues de un tiempo por la funcion de js que pusiste carga el DIV de color verde pero el navegador no comienza cargando el div central me explico??

IsaBelM · #13 (**permalink**) 26/08/2011, 15:03

veamos por que no funciona. has de cambiar con respecto al código anterior

la parte de css

has de comentarlo o eliminarlo para que hay barra de scroll

Cita:

html, body {
.....
overflow: hidden;

hay que cambiar el ancho. poniendo como valor la suma del ancho de los 3 bloques

Cita:

#principal {
width:3870px;
}

ahora la parte de js

añade esta función para scrollear la página a unas coordenadas determinadas

Cita:

function fnc2() {
window.scrollTo(1290, 0);
}

la nueva invocación de las funciones

Cita:

window.onload = function() {fnc2()};setTimeout(function() {fnc();},5000);

hiram_ramirez8 · #14 (**permalink**) 26/08/2011, 15:29

Haaaaaaaaaaaaaaaa!!!!!!!!! Ahoraaa siiiiiiiiiiii jejejejejeje muchas gracias!!!!

hiram_ramirez8 · #15 (**permalink**) 26/08/2011, 15:30

Exactamente eso era lo que necesitaba lograr, no se como pero lo lograste tendre que analizar el codigo para implementarlo en mi Web Muchisimas gracias IsaBelM

hiram_ramirez8 · #16 (**permalink**) 26/08/2011, 15:46

Comprobado listo y completamente funcionando mil gracias!!!!