Mantener un div Visible cuando cambia la url

elulice · #1 (**permalink**) 19/02/2012, 12:56

Ya busqué por todos lados y no puedo encontrar respuesta a lo que quiero.. Lo que intento hacer es mantener un div siempre visible cuando se cambia la url, por ejemplo. Hago una consulta a una base de datos y devuelvo mediante AJAX la respuesta en un div, cuando hago click en el menu para ir a alguna sección de la página web, me gustaría q ese div siempre este visible, y que no se ponga toda la página en blanco.. me explico?.. alguien podrá ayudarme ?

Nemutagk · #2 (**permalink**) 19/02/2012, 13:55

o.O imposible, lo que mas se acerca es meter el contenido en un iframe/frame

elulice · #3 (**permalink**) 20/02/2012, 01:09

lo que quisiera hacer es algo asi como facebook, que cuando cambia la url la lista de contactos y la conversación siempre queda visible.. no entiendo como hace..

elulice · #4 (**permalink**) 22/02/2012, 15:46

bueno, parece que nadie puede darme una respuesta.

Nemutagk · #5 (**permalink**) 22/02/2012, 18:38

Ya te había contestado, de manera directa no hay forma, en todo caso es necesario el uso de frames/iframes, ahora, lo que hace facebook es utilizar ajax y pushstate() de html5...

iovan · #6 (**permalink**) 22/02/2012, 18:53

bueno en realidad si es posible no crees?

Que pasa si creo una $_COOKIE y asocio esta cookie a si "Se muestra" o "Se oculta" así controlo la visibilidad de un div flotante con javascript.

Nemutagk · #7 (**permalink**) 22/02/2012, 19:02

Cita:

Iniciado por iovan

bueno en realidad si es posible no crees?

Que pasa si creo una $_COOKIE y asocio esta cookie a si "Se muestra" o "Se oculta" así controlo la visibilidad de un div flotante con javascript.

o.O Realmente leiste lo que @elulice quiere hacer? lo que el quiere es que el DIV SIEMPRE este visible aun cuando se este cambiando de página al clickear un link, como sabrás, al cambiar de página esta se tiene que descargar y renderizar, por lo cual el navegador siempre borra todo el contenido y muestra la ventana en blanco y después muestra la nueva página, bueno, lo que el quiere es que aun en estos momentos sea visible el DIV, por lo tanto nada tiene que ver una cookie

iovan · #8 (**permalink**) 22/02/2012, 19:28

jajaja

como digas

Fierox · #9 (**permalink**) 23/02/2012, 03:33

Si usas javascript (jquery) para cargar el contenido de la web ( como hace facebook ) es posible de hacerlo, aunque es mas laborioso y no necesitas cookies.

elulice · #10 (**permalink**) 23/02/2012, 08:07

Gracias por el dato de pushstate() ahora voy a estudiarlo, lo que hasta el momento estaba implementando era ajax long polling para las conexiones e intentar crear un "efecto" push. La idea del iframe no me gusta mucho así que voy a ver lo de pushstate() y te cuento

iovan · #11 (**permalink**) 23/02/2012, 10:34

¿laborioso?, no como crees.

Mira si son como 20 lineas y ya está:

Código Javascript:

Ver original$(function () {
    
    if($.cookie('mostrarChat')=='si')
        $("#chat").css('display','block');
    else $("#chat").css('display','none');
    
    $("#enlace").click(function(){
            var displayStatus = $("#chat").css('display');
            
            switch(displayStatus){
                case 'none':    $("#chat").css('display','block');
                                $.cookie('mostrarChat', 'si');
                    break;
                case 'block':   $("#chat").css('display','none');
                                $.cookie('mostrarChat', null);
                    break;
            }
            
    });
});

DEMÁS HTML PARA QUE HAGAS LAS PRUEBAS

Código HTML:

Ver original<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script src="http://code.jquery.com/jquery.cookie.js" language="javascript"></script>
<!-- DESCARGATE EL jquery.cookie.js de alguna parte, ya no está alojado en jquery.com -->
 
<style type="text/css">
 
#chat{
    position:absolute;
    bottom:0;
    right:0;
        width: 300px;
        height: 500px;
        border: #000 solid 1px;
        padding: .5em;
}
 
</style>
</head>
 
<body>
<a href="#" id="enlace">Mostrar/ocultar chat</a>
    
    <div id="chat" style="display: none">
        
        Este es el contenido del chat
        
    </div>
</body>

...... En fin, se utilizó una cookie o no??

Nemutagk · #12 (**permalink**) 23/02/2012, 12:27

Cita:

Iniciado por elulice

Gracias por el dato de pushstate() ahora voy a estudiarlo, lo que hasta el momento estaba implementando era ajax long polling para las conexiones e intentar crear un "efecto" push. La idea del iframe no me gusta mucho así que voy a ver lo de pushstate() y te cuento

Si vas a usar pushstate() tienes que crear algún método para saber desde que página está accediendo el usuario, o en su defecto crear fisicamente en el servidor la página generada con el pushstate() y el contenido cargado desde ajax, ya que si un usuario guarda la página en favoritos y después regresa a la misma página y esta o no existe o no hay forma de que el sistema sepa que debe cargar, el usuario se encontrará que el contenido a cargar no es lo que el esperaba, así que si, es mas laborioso si es que pretendes hacerlo de forma correcta para evitar el despiste de los usuarios...

elulice · #13 (**permalink**) 23/02/2012, 16:20

Cita:

Iniciado por Nemutagk

Si vas a usar pushstate() tienes que crear algún método para saber desde que página está accediendo el usuario, o en su defecto crear fisicamente en el servidor la página generada con el pushstate() y el contenido cargado desde ajax, ya que si un usuario guarda la página en favoritos y después regresa a la misma página y esta o no existe o no hay forma de que el sistema sepa que debe cargar, el usuario se encontrará que el contenido a cargar no es lo que el esperaba, así que si, es mas laborioso si es que pretendes hacerlo de forma correcta para evitar el despiste de los usuarios...

Mi idea era hacer que al clickear algo, pushstate cambie la url, detectar la url y que AJAX consulte a la página que se está redireccionando, devuelva el contenido y lo muestre en un <div>, evitando asi que se recargue toda la página y manteniendo siempre visible lo que yo quiero.por ejemplo: Pushstate redirige a user.php?user=ejemplo . user.php en verdad existe y si ingresas podrás verlo. luego de que pushstate modifica la url con un onclick disparo una funciona AJAX pasando algunos parámetros y AJAX me devuelve lo que quiero en un div. me explico ?.. ahora lo voy a hacer y después pongo como lo hice asi la proxima le sirve a alguien en cuanto a @iovan la idea no es saber si algo está oculto o no, sino que cuando la url cambie, nunca se oculte.

iovan · #14 (**permalink**) 23/02/2012, 23:56

Oh, bueno ahora entiendo tu pregunta, es decir tu quieres lograr que cierto div sea visible en tu web y en otras que visite ese usuario desde ese mismo navegador?

.... Pero ahi dice pushstate..... Mmm que no pushstate no puede asignar un nuevo document_root, o en otras palabras, no puede cambiar el dominio del sitio web, solo la ruta relativa del documento....¿Oh si puede?

Bueno pues voy a tener que investigar por que ya ando confundido.....

Otra cosa.... Cuando preguntaste "... Visible un div...." esa palabra de visible yo la asocio a la propiedad display de un elemento, bueno al menos para ese proposito es justificado.

... Mmm no se, yo sigo aqui imaginando que es lo que buscas, por tu ultimo mensaje (no lo había leido) ahora ya creo saber a que te refieres o cual es el proposito final de tu búsqueda...

Bien , pues en mi opinión , no necesitas pushstate como herramienta "indispensable" .

Yo haría lo siguiente:

Cuando un usuario da click en un link, el servidor hace un request solicitando el contenido, tu puedes manejar fácilmente este request y darle otro comportamiento, por ejemplo y ya que estamos en el foro de php....

* - con curl (php) obtengo la respuesta ( response, para cada request hay una response)
- verifico si viene con información
- si es así, la escribo en un div con javascript

... En si es el mismo comportamiento de un iframe, a excepción que validas si hay información o no existe la página, esta vacia, tira algun http error o http warning, etc.... Validaciones brutas...

Y ya como ultimo paso, al gusto de puedes hacerlo o no, utilizas pushstate para cambiar el path por al que direccionria el link, tan solo para dar la impresión de haber cambiado de link. En realidad este ultimo no es necesario para el funcionamineto, más bien es cuestión de belleza...

No megusta utilizar el ingles y español mezclado, si lo hice fue para ayudarte a encontrar algún término familiar.

Saludos.

elulice · #15 (**permalink**) 24/02/2012, 03:01

claro, pero el pushstate es para que quede en el historial y asi google puede indexar. Sino siempre se va a mantener una direccion y solo va a cambiar el contenido.

elulice · #16 (**permalink**) 24/02/2012, 03:07

Lo que yo hice fue esto

Código Javascript:

Ver original$(document).ready(function() {
    if (typeof window.history.pushState == 'function') {
        pushstate();            
    }else{
        check(); hash();
    }
});
// AJAX mágico que cambia la url;
 
function ajaxMagic(i,o){
    var ajax = new XMLHttp();
    with(ajax){
        open("POST",i,true);
        setRequestHeader("Content-type","application/x-www-for-urlencoded");
        send(null);
 
        onreadystatechange = function(){
            if((readyState == 4) && (status == 200)){
                respF = responseText;
                if(respF != ""){
                    document.getElementById(o).innerHTML = respF;
                }
            }
        }
        }
}
 
 
function check(){
    var direccion = ""+window.location+"";
    var nombre = direccion.split("#!");
    if(nombre.length > 1){
        var url = nombre[1]; 
        alert(url);
    }
}
    
function pushstate(){
    var links = $("a");
    links.live('click', function(event) {
        var divToChg = $(this).attr('ejemplo'); //este atributo no es valido en el TAG A pero lo creo igual
        var url = $(this).attr('href');
        history.pushState({
            path: url
        }, url, url);
        ajaxMagic(url,divToChg)
        return false;
    });
        
    $(window).bind('popstate', function(event) {
        var state = event.originalEvent.state;
        if (state) {
            alert(state.path);
        }
    });
}
    
function hash(){
    $(window).bind("hashchange",function(){
        var hash = ""+window.location.hash+"";
        hash = hash.replace("#!","")
        if(hash != ""){
            alert(hash);
    }
    }); 
 
    $("a").bind('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        window.location.hash = "#!"+url;
        return false
    });
}

y en el tag <a> tendría que ser así

Código HTML:

Ver original<a href='loquesea.php' ejemplo='divDondeSeMostraraElResultado'>prueba</a>

elulice · #17 (**permalink**) 24/02/2012, 14:06

@iovan si no es mucha molestia, me podrías explicar para que es, y como funciona en PHP la función curl() ??

Nemutagk · #18 (**permalink**) 24/02/2012, 16:04

Cita:

Iniciado por elulice

@iovan si no es mucha molestia, me podrías explicar para que es, y como funciona en PHP la función curl() ??

Curl basicamente son sockets avanzados dentro de PHP, ayuda a la conexión y transmisión de datos entre servidores usando diferentes tipos de protocolos y soporte para diferente tipos de certificados, si tienes mas dudas es mejor que revises la documentación en el manual de php, ahora, para lo que estas haciendo no te sirve de nada, ya que curl se usa para recoger/leer (entre otras cosas) páginas/servicios externos a tu sitio, por ejemplo, obtener el código fuente (HTML) de la página principal de google...

Nota: se me olvidaba, el código que muestras no esta del todo mal, solo que crear atributos a diestra y siniestra no lo veo del todo correcto, en todo caso sería mejor que PHP sea el que entregue toda la información necesaria para pushstate() en la petición ajax en vez de crear atributos solo para guardar dichos datos...

iovan · #19 (**permalink**) 24/02/2012, 22:11

Cita:

Iniciado por Nemutagk

...,

para lo que estas haciendo no te sirve de nada, ya que curl se usa para recoger/leer (entre otras cosas) páginas/servicios externos a tu sitio, por ejemplo, obtener el código fuente (HTML) de la página principal de google...

....

En fin, que no está recogiendo desde sitios externos?? Vuelvo al principio...

¿elulice, intentas recoger html de sitios externos?

Si la respuesta es sí, yo digo curl.

================
Curl es todo lo que Nemutagk trato de decir, si buscas en google puedes encontrar mucha información sobre curl.

Nemutagk · #20 (**permalink**) 24/02/2012, 22:14

Cita:

Iniciado por iovan

En fin, que no está recogiendo desde sitios externos?? Vuelvo al principio...

¿elulice, intentas recoger html de sitios externos?

Si la respuesta es sí, yo digo curl.

================
Curl es todo lo que Nemutagk trato de decir, si buscas en google puedes encontrar mucha información sobre curl.

No, lo que intenta hacer es un sitio completamente basado en peticiones ajax, cargando dinamicamente el contenido para así evitar el estar cambiando/recargando la página, por eso el uso de pushstate() para poder guardar el historial y/o guardar la página en favoritos manteniendo el contenido cargado dinamicamente...

iovan · #21 (**permalink**) 24/02/2012, 22:28

Cita:

Iniciado por Nemutagk

No, lo que intenta hacer es un sitio completamente basado en peticiones ajax, cargando dinamicamente el contenido para así evitar el estar cambiando/recargando la página, por eso el uso de pushstate() para poder guardar el historial y/o guardar la página en favoritos manteniendo el contenido cargado dinamicamente...

oh. Si ahora que lo dices tienes razón, con razón el pushstate()

Bien este tema me gusto yo solo respondo a mensajes que me interesan (1 o 2 a la semana) y este fue uno de ellos, por ahora nos despedimos de curl...

mmm y ahora para obtener el HTTP STATUS CODE... Si no es con curl sería con sockets, ¿en PHP habrá otra forma? PHP está lleno de métodos para todo, ¿ tu sabrás si hay alguno que devuelva la cabecera HTTP STATUS CODE como respuesta?

Saludos.

Nemutagk · #22 (**permalink**) 24/02/2012, 22:42

@iovan hace tiempo @abimaerc publico un aporte sobre file_get_contents, curl y http_request, en la cual se puede ver como lograr varias cosas usando cualquiera de las 3 opciones, si no mal recuerdo hay una sección sobre el status code, como ya mencionaste curl solo quedaria con file_gets_contents, el problema de este es que es necesario esperar a que cargue todo el contenido, y posteriormente verificar la cabecera http_response_header, si encuentro el link lo publicare...

iovan · #23 (**permalink**) 24/02/2012, 22:53

Oh ok, gracias. Con http_response_header, ese por como se llama ha de servir de algo.

Bueno es que yo solía usar curl_getinfo para obtener el status ==>CURLINFO_HTTP_CODE

Pero sigue siendo lo mismo que comentas, se descarga el documento y después obtiene el valor de las cabeceras... Poco práctico.

Pero si creamos un socket , escribimos una solicitud y leemos la respuesta hasta cierta longitud, si que podría ser una solución adecuada...

Nemutagk · #24 (**permalink**) 24/02/2012, 23:01

mmm, con file_gets_contents puedes limitar el tiempo de espera para la carga de datos, o en cambio, solo leer determinados caracteres, lee la información sobre file_gets_contents en el manual de php, pero, basicamente seria algo así....

Código PHP:

Ver original//solo leemos el primer caracter y detenemos la descarga...
$contenido = file_get_contents('http://google.com',null,null,0,1); 
var_dump($http_response_header);

Si quieres discutir mas sobre el tema es mejor que crees un tema aparte, porque esto se esta haciendo offtopic...

elulice · #25 (**permalink**) 26/02/2012, 18:12

Quisiera saber, si yo cargo el contenido con peticiones AJAX, se me pierde el codigo JS que tenga dentro del archivo que al cual le hago la petición.. Por ejemplo le hago la peticion a ejemplo.html con el siguiente contenido

Código HTML:

Ver original<html>
<head>
</head>
<body>
<input type="text" id="texto"/>
</body>
</html>

con el siguiente código JS dentro

Código Javascript:

Ver original$("#texto").hide();
setTimeout('$("#texto").show()',2000);

El javascript no va a funciona si yo hago una petición AJAX a ejemplo.html cierto?

elulice · #26 (**permalink**) 26/02/2012, 18:16

Cita:

Iniciado por iovan

oh. Si ahora que lo dices tienes razón, con razón el pushstate()

Bien este tema me gusto yo solo respondo a mensajes que me interesan (1 o 2 a la semana) y este fue uno de ellos, por ahora nos despedimos de curl...

mmm y ahora para obtener el HTTP STATUS CODE... Si no es con curl sería con sockets, ¿en PHP habrá otra forma? PHP está lleno de métodos para todo, ¿ tu sabrás si hay alguno que devuelva la cabecera HTTP STATUS CODE como respuesta?

Saludos.

Me alegra que haya generado un tema de tu gusto

Nemutagk · #27 (**permalink**) 26/02/2012, 18:23

Cita:

Iniciado por elulice

Quisiera saber, si yo cargo el contenido con peticiones AJAX, se me pierde el codigo JS que tenga dentro del archivo que al cual le hago la petición.. Por ejemplo le hago la peticion a ejemplo.html con el siguiente contenido

Código HTML:

Ver original<html>
<head>
</head>
<body>
<input type="text" id="texto"/>
</body>
</html>

con el siguiente código JS dentro

Código Javascript:

Ver original$("#texto").hide();
setTimeout('$("#texto").show()',2000);

El javascript no va a funciona si yo hago una petición AJAX a ejemplo.html cierto?

Cuando vas a trabajar con AJAX NO DEBES agregar los tag html,head,ni body, unica y exclusivamente el contenido a cargar, si no vas a hacer un spaguetti de código HTML, ahora, con el código Javascript no, no se va a ejecutar, tendrías en todo caso agregar los eventos después de a ver agregado el código al DOM o llamar a la función javascript después de agregar el contenido...

elulice · #28 (**permalink**) 26/02/2012, 18:31

Cita:

Iniciado por elulice

Me alegra que haya generado un tema de tu gusto

El problema esta que si no pongo los tag HTML HEAD BODY cuando alguien quiera ingresa a la pagina ejemplo.html directamente sin haberse cargado el contenido dinámicamente, no se vería bien.

elulice · #29 (**permalink**) 26/02/2012, 18:32

Cita:

Iniciado por Nemutagk

Cuando vas a trabajar con AJAX NO DEBES agregar los tag html,head,ni body, unica y exclusivamente el contenido a cargar, si no vas a hacer un spaguetti de código HTML, ahora, con el código Javascript no, no se va a ejecutar, tendrías en todo caso agregar los eventos después de a ver agregado el código al DOM o llamar a la función javascript después de agregar el contenido...

El problema esta que si no pongo los tag HTML HEAD BODY cuando alguien quiera ingresa a la pagina ejemplo.html directamente sin haberse cargado el contenido dinámicamente, no se vería bien.

elulice · #30 (**permalink**) 26/02/2012, 18:34

perdon por duplicar el mensaje. le erré al QUOTE