Realizar todo en una página

jagp1119 · #1 (**permalink**) 09/12/2013, 17:25

Hola, estoy haciendo una app en html y tengo varias paginas(como 4), pero necesito ponerlas todas en una sola página .html, he visto que para hacer esto toca dividir cada pagina como si fuera un <div>, ¿alguien sabe como hacerlo?

, ya que no lo tengo muy claro. Gracias

herzbazi · #2 (**permalink**) 09/12/2013, 19:08

el efecto que creo que quieres hacer se llama parallax

http://f6design.com/projects/parallax-scrolling/ mira este ejemplo

aqui podras encontrar el tutorial de como hacerlo

http://www.script-tutorials.com/css3...olling-slider/

espero te sirva cualquier duda me comentas y con gusto te ayudo

jagp1119 · #3 (**permalink**) 09/12/2013, 19:12

Hola Herbazi, realmente no es eso lo que quiero, quiero que quede como una página normal que con con un boton o enlace pase a la siguiente pagina y así, pero que todo quede dentro de un mismo documento html.

herzbazi · #4 (**permalink**) 09/12/2013, 19:17

ya viste que al dar click sobre un boton del lado derecho
manda a jalar la pagina

jagp1119 · #5 (**permalink**) 09/12/2013, 19:28

Sí si lo vi, pero entonces lo que entiendo es como hacer la página algo asi como quitandole el scroll, y que el enlace a cada página sea los botones, mmm creo que ya entiendo lo que dice.

, seria una buena forma de hacerlo, voy a intentar a ver como queda. ¿Pero no tendria problema de rendimiento o algoa si?, digo por el echo de que esta cargada y desplegada toda la página siempre.

herzbazi · #6 (**permalink**) 09/12/2013, 19:41

Cita:

Iniciado por jagp1119

Sí si lo vi, pero entonces lo que entiendo es como hacer la página algo asi como quitandole el scroll, y que el enlace a cada página sea los botones, mmm creo que ya entiendo lo que dice.

, seria una buena forma de hacerlo, voy a intentar a ver como queda. ¿Pero no tendria problema de rendimiento o algoa si?, digo por el echo de que esta cargada y desplegada toda la página siempre.

mira
para quitar el scroll puedes poner en el body
overflow-x:hidden;

y por rendimiento no lo creo

estara bien no creo que se vea afectada

jagp1119 · #7 (**permalink**) 10/12/2013, 21:10

Hola Herzbazi, estoy haciendo lo que me dijo pero tengo un problema, y es que estoy trabajando con unas variables en javascript y necesito que se actualicen, antes cuando estaba en paginas distintas al parecer cuando cambia de variable las pagina se recargaba, pero en esta se quedan como estancadas las variables, no cambian de valor. No se si me hago entender.

herzbazi · #8 (**permalink**) 11/12/2013, 00:58

Cita:

Iniciado por jagp1119

Hola Herzbazi, estoy haciendo lo que me dijo pero tengo un problema, y es que estoy trabajando con unas variables en javascript y necesito que se actualicen, antes cuando estaba en paginas distintas al parecer cuando cambia de variable las pagina se recargaba, pero en esta se quedan como estancadas las variables, no cambian de valor. No se si me hago entender.

ya entiendo , pon tu codigo veremos que podemos hacer

ahi sera trabajar con ajax posiblemente.

pon el code

jagp1119 · #9 (**permalink**) 11/12/2013, 06:51

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
   
    <head>
        <meta http-equiv="refresh" >    
        <link rel="stylesheet" href="estilo.css" type="text/css"/>
    
 
        <script type="text/javascript" language="javascript">
        
              
                
       
        <!-- ******************** SCRIPT DE JAVA PARA GUARDAR Y VISUALIZAR LAS VARIABLES DE LAS IMAGENES*********************-->
        
        <script type="text/javascript">
            var variable;
            var dato;
            var clicenimagen;
            
            
             
            var imagenes = new Array();
            imagenes[0] = "img/rambo.jpg";
            imagenes[1] = "img/Hobbit2.jpg";
            imagenes[2] = "hunger_games.jpg";
            imagenes[3] = "thor2.jpg";
            imagenes[4] = "evento.jpg";
            imagenes[5] = "choke.jpg";
            imagenes[6] = "estacionbar.jpg"; 
            imagenes[7] = "wekeleleBar.jpg";
            imagenes[8] = "sinfonica.jpg";
            imagenes[9] = "documental.jpg";
            imagenes[10] = "conservatorio.jpg";
            imagenes[11] = "banda.jpg";
            imagenes[12] = "capacitaciones.png";
            imagenes[13] = "audiovisual.jpg";
            imagenes[14] = "tolimaemprende.jpg";
            imagenes[15] = "congreso.jpg";
            
       
//FUNCION PARA CAMBIAR LA IMAGEN PRINCIPAL CADA VEZ QUE SE DE EN UN EVENTO  **********************   
            function cuadro(numero){  
                
            
                
                if (numero == 1){document.images["matrix"].src =imagenes[0];
                                 document.images["matrix2"].src =imagenes[1];
                                 document.images["matrix3"].src =imagenes[2];
                                 document.images["matrix4"].src =imagenes[3];}
                
                if (numero == 2){document.images["matrix"].src =imagenes[4];
                                 document.images["matrix2"].src =imagenes[5];
                                 document.images["matrix3"].src =imagenes[6];
                                 document.images["matrix4"].src =imagenes[7];}
                
                if (numero == 3){document.images["matrix"].src =imagenes[8];
                                 document.images["matrix2"].src =imagenes[9];
                                 document.images["matrix3"].src =imagenes[10];
                                 document.images["matrix4"].src =imagenes[11];}
                
                if (numero == 4){document.images["matrix"].src =imagenes[12];
                                 document.images["matrix2"].src =imagenes[13];
                                 document.images["matrix3"].src =imagenes[14];
                                 document.images["matrix4"].src =imagenes[15];}
            }
 
           
            
            function guardar(){ // FUNCION PARA GUARDAR LA VBLE VARIABLE PARA CARGARLA EN LA PAGINA SIGUIENTE
                
                var objeto = variable;
                
                objeto = JSON.stringify(objeto);
            
                localStorage.setItem('miObjeto',objeto);
                
                
                
                var objetos = clicenimagen;
                
                objetos = JSON.stringify(objetos);
            
                localStorage.setItem('miObjetos',objetos);
               
                
            }
            
            function pantallainicio(){
                document.images["matrix"].src =imagenes[0];
                document.images["matrix2"].src =imagenes[4];
                document.images["matrix3"].src =imagenes[8];
                document.images["matrix4"].src =imagenes[12];
                   
            }
            
            function recarga(){
                window.location.reload();   
            }
                    
        </script>
         
    </head>
 
<body onload="pantallainicio()">
    
    <div id="pri_pag_home">
        
        <div id="cajaheader"></div>
        <div id=principal>
            <header>
                <h1> Max</h1>
                <div id="buscador"></div>
         
            </header>
        </div> 
        
        
        <section>
                
           
            <div id="eventos">
                
                <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix" onclick="clicenimagen=1, guardar(), recarga()"></a>
            
            </div>    
            
            <div id="eventos2">
            
                <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix2" onclick="clicenimagen=2, guardar(), recarga()"></a>
            
            </div>
                
                
            <div id="eventos3">
            
                <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:absolute; width: 100%; height: 100%;" id="matrix3" onclick="clicenimagen=3, guardar(), recarga()"></a>
            
            </div>
                
            <div id="eventos4">
                
                <a href="#seg_pag_evento" ><img src="img/evento.jpg" style="position:relative; width: 100%; height: 100%;" id="matrix4" onclick="clicenimagen=4, guardar(), recarga()"></a>
            
            </div>
            
            <div id="bordeizquierdo"></div>
                
                              
             
        </section>
 
        <article>
        
            <div id="cine">
                
                <a href="#" onclick="cuadro(1), variable='1'"><img src="img/rambo.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra">
                
                    <h2> CINE </h2>
                    
                    
                 </div>    
                        
            </div> 
            
            <div id="pub">
                
                <a href="#" onclick="cuadro(2), variable = 2"><img src="img/evento.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra"> 
                
                    <h2> PUB </h2>
                    
                </div>
                        
            </div> 
            
            <div id="cultural" >
                
                <a href="#" onclick="cuadro(3), variable = 3"><img src="img/sinfonica.jpg" style="position:absolute; width:100%; height: 100%;" /></a>
                   
                <div id="barra"> 
                                
                    <h2> CULTURAL </h2>
                
                </div>
                        
            </div> 
            
            <div id="capacitaciones">
                
                <a href="#" onclick="cuadro(4), variable = 4"><img style="position:absolute; width:100%; height: 100%;" /></a>
                
                <div id="barra">
                
                    <h2> TALLERES </h2>
                    
                </div>    
                        
            </div> 
        
        </article>
          
        <div id="footer">
            
            <div id="inferior1">
            
                <div id="perfil1" > 
                
                    <a href="perfil.html"><img src="Iconos/man_48.png" style="position: absolute; top:10%; left:25%;"></a>
                    
                </div>
                
                <div id="home1">
                
                    <a href="pri_pag_home"><img src="Iconos/home_48.png" style="position: absolute; top:10%; left:25%;"></a>
                
                </div> 
                
                    
                
                <div id="info1">
                
                    <a href="#seg_pag_evento"><img src="Iconos/info_48.png" style="position: absolute; top:10%; left:25%;"></a>
                
                </div>
                
                    
            
            </div>
        
        
        </div>
    </div>

Hola herzbazi, se que es complicado entender los códigod de otras personas, pero basicamente lo que hago en es que tengo 2 varibales que son "variable" y "clicneimagen", con estas busco que cuando de clic en cierta imagen el programa pueda saber para poder mostrar esa imagen sola en una nueva página, el problema es que no me las reconocia entonces las guarde en localstore y ahi me reconocia el valor de las variables, pero no me actualizaba la página entonces las variables quedan con un único valor siempre, le puse una funcion de recarga con "windows.location.reload()" pero realmente no funciona como quiero.

Gracias Herzbazi.

jagp1119 · #10 (**permalink**) 11/12/2013, 06:55

continua en este, acá es donde necesito que se recargue la pagina página o algo aprecido para que tome el nuevo valor de las variables.

Código HTML:

Ver original<!--   XXXXXXXXXXXXXXXXXXXXXX      Siguiente página en el mismo .html     XXXXXXXXXXXXXXXXXX    -->       
    
    <div id="seg_pag_evento"  >
        
            <script type="text/javascript"> 
                    
                            
                function imagen_evento(){
                    
                       resultado = localStorage.getItem('miObjeto');
                        objeton = JSON.parse(resultado);
 
            
                        resultados = localStorage.getItem('miObjetos');
                        objetosn = JSON.parse(resultados);
                                               
                    
                    var imagen = new Array();
                    imagen[0] = "rambo.jpg";
                    imagen[1] = "Hobbit2.jpg";
                    imagen[2] = "hunger_games.jpg";
                    imagen[3] = "thor2.jpg";
                    imagen[4] = "evento.jpg";
                    imagen[5] = "choke.jpg";
                    imagen[6] = "estacionbar.jpg"; 
                    imagen[7] = "wekeleleBar.jpg";
                    imagen[8] = "sinfonica.jpg";
                    imagen[9] = "documental.jpg";
                    imagen[10] = "conservatorio.jpg";
                    imagen[11] = "banda.jpg";
                    imagen[12] = "capacitaciones.png";
                    imagen[13] = "audiovisual.jpg";
                    imagen[14] = "tolimaemprende.jpg";
                    imagen[15] = "congreso.jpg";
                                
                
                    
                    if (objeton == 0 && objetosn == 1){document.images["foto"].src = imagen[0]}
                    if (objeton == 0 && objetosn == 2){document.images["foto"].src = imagen[4]}
                    if (objeton == 0 && objetosn == 3){document.images["foto"].src = imagen[8]}
                    if (objeton == 0 && objetosn == 4){document.images["foto"].src = imagen[12]}
                    
                    
                    if (objeton == 1 && objetosn == 1){document.images["foto"].src = imagen[0]}
                    if (objeton == 1 && objetosn == 2){document.images["foto"].src = imagen[1]}
                    if (objeton == 1 && objetosn == 3){document.images["foto"].src = imagen[2]}
                    if (objeton == 1 && objetosn == 4){document.images["foto"].src = imagen[3]}
                    
                    
                    if (objeton == 2 && objetosn == 1){document.images["foto"].src = imagen[4]}
                    if (objeton == 2 && objetosn == 2){document.images["foto"].src = imagen[5]}
                    if (objeton == 2 && objetosn == 3){document.images["foto"].src = imagen[6]}
                    if (objeton == 2 && objetosn == 4){document.images["foto"].src = imagen[7]}
                 
                   }
                       
            </script>         
        
            <div id="cajaheader"></div>
            <div id=principal>
                <header>
                    
                    
                    <h1> Max </h1>
                    <div id="buscador"></div>
                    
                </header>
            </div> 
        
        <div id="contenido_evento" >      
            <section3>
                           
                <div id="map_canvas" ></div> 
                    
                <div id="tuevento"><h4> UBICA TU EVENTO </h4></div> 
           
            </section3>  
            
            
            <section4> 
                
                <div id="fotoevento" onload="imagen_evento()">
                
                    <a href="#"><img src="evento.jpg" id="foto" style="position:absolute; width:100%; height: 100%;" /></a>
                
                </div>
                
                <div id="descripcion">
                    
                    <script type="text/javascript"> 
                        
                        resultado = localStorage.getItem('miObjeto');
                        objeton = JSON.parse(resultado);
 
            
                        resultados = localStorage.getItem('miObjetos');
                        objetosn = JSON.parse(resultados);
                                               
                        if (variable == 1 && clicenimagen == 1){document.write('<p> Cuando John Rambo, </p>')}
                        if (variable == 1){document.write('<p> La historia continuará </p><p>Estreno: 20/12/13</p>')}
                        if (variable == 1 && clicenimagen == 3){document.write('<p>Después de ganar los 74 Juegos del Hambre, Katniss Everdeen vuelve a su casa sana y salva, junto a su tributo Peeta Mellark. Ganar significa dejar atrás a su familia y amigos para embarcarse en el Tour de la Victoria, por los diferentes distritos. A lo largo del camino, Katniss se da cuenta de que una rebelión comienza a gestarse.</p><p>12:20 pm 12:50 pm 3:35 pm 4:05 pm 6:50 pm 7:20 pm 10:05 pm 10:30 pm </p><p>Valor: Variara dependiendo del día</p>')}
                        if (variable == 1 && clicenimagen == 3){document.images["foto"].src = imagenes[3]}
                        
                        
                        if (variable == 2 && clicenimagen == 1){document.write('<p>Disfruta de la mejo</p>')}
                        if (variable == 2 && clicenimagen == 2){document.write('<p>Prendete la vela en . </p><p>Fecha: 07/12/13</p><p>Hora: 8:00pm</p><p>Costo Cover: 10 pesitos</p>')}
                        if (variable == 2 && clicenimagen == 3){document.images["foto"].src = imagenes[6]}
                        if (variable == 2 && clicenimagen == 4){document.images["foto"].src = imagenes[7]}
                        
                        
                        
                    </script>
                    
                </div>
                
                <div id="arreglaperfil"></div>
                
            </section4>
        </div>  
                 
            <div id="footer2">
                
                   <div id="perfilen" > 
                    
                        <a href="perfil.html"><img src="Iconos/man_24.png" style="position: absolute; top:30%; left:30%;"></a>
                        
                   </div>
                    
                   <div id="home2">
                    
                        <a href="#pri_pag_home"><img src="Iconos/home_24.png" style="position: absolute; top:30%; left:30%;"></a>
                    
                   </div> 
                                    
                           
                   <div id="web">
                    
                        <a href="web.html"><img src="Iconos/globe_24.png" style="position: absolute; top:30%; left:30%;"></a>
                    
                    </div>
                    
                    <div id="asistire">
                    
                        <a href="web.html"><img src="Iconos/checkmark_24.png" style="position: absolute; top:30%; left:30%;"></a>
                    
                    </div>
                        
                    <div id="atras">
                        
                        <a href="#pri_pag_home"><img src="Iconos/arrow_left_24.png" style="position: absolute; top:30%; left:30%;"></a>
                    
                    </div>    
                                  
            </div>
        
            
     </div>
          
</body>
    
    
    
    
</html>