DIV siempre visible, pushstate + ajax o similar, NO CSS

wwwshowdjes · #1 (**permalink**) 02/06/2012, 16:37

Hola,
Como último recurso, acudo a ustedes.

Llevo días y días, buscando algo para que un DIV [section] siempre este visible, aunque recargues el contenido, es decir, igual que el chat de Facebook.

He buscado por todo este foro, en foros en ingles, "Googleando", etc etc, y lo unico que consigo encontrar son codigos que no funcionan, CSS (position:fixed;) o simplemente códigos FRAMESET... pero no doy con lo que quiero.

En este foro encontre el siguiente codigo ([URL="http://www.forosdelweb.com/f18/mantener-div-visible-cuando-cambia-url-976843/"] Mantener un div Visible cuando cambia la url[/URL]) [Podeis ver el codigo en el post del usuario @elulice, post numero #16]

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
* * });
}

Código HTML:

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

Creo que ese código podría funcionar, pero no consigo que funcione correctamente.

Explico exactamente lo que quiero hacer:

1. Cargar el contenido en DIV, dejando a un DIV siempre fijo, aunque cambies de URL

2. Al cargar el nuevo contenido, que aparezca la URL de ese contenido

3. Que no use FRAMESET, iframe...

4. Que sea similar o a porder ser, igual que algunos ejemplos abajo.

5. NO quiero position:fixed;

Por favor, alguien me podría ayudar.

Les dejo algunos ejemplos de lo que me gustaría hacer.

[URL="http://www.beatport.com/"]Beatport[/URL] Al dar play a cualquier canción, puedes navegar por todo el portal, sin que pare de sonar la música, y cambiando la URL.

[URL="http://www.facebook.com"]Facebook[/URL] el chat se mantiene fijo, sin que cambie el "contenido".

[URL="https://plus.google.com/"]Google+[/URL] cuando navegas por la red social, el contenido carga en un div, y ademas cambiar la URL.

Muuuuuuuchas gracias de antemano

wwwshowdjes · #2 (**permalink**) 02/06/2012, 17:49

Al fin!!! ya lo solucione...

En un momento os dejo el código.

wwwshowdjes · #3 (**permalink**) 03/06/2012, 06:18

Aquí os dejo el código en un ejemplo, cualquier duda o problema, preguntarme.

Si alguien puede mejorar el codigo, que no dude en decirlo, :)

Código Javascript:

Ver original<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Codigo by http://www.showdj.es</title>
 
 
 <!--Codigo by http://www.showdj.es -->
 
    <script type="text/javascript" src="http://www.jose-aguilar.com/scripts/jquery/ajax-link/js/jquery-ui-1.8.6.min.js"></script><!--Descargar este escript y alojarlo en vuestro hosting-->
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!--Script para Actualizar -->
 
        
    <script type="text/javascript">
    //Este es el script que carga el contenido en un DIV
    $(document).ready(function() {
        //Puedes cambiar la siguiente linea por: $('#DID del div del link').click(function(){
        $('a').live('click', function(event) {
            $("#wrapper").load($(this).attr("href") );
        });
        
    //El anterior bloque, puedes cambiarlo por esto:    
    //$.ajax({
        //type: "POST",
        //url: "hola.php",
        //success: function(a) {
                //$('#div-results').html(a);
        //}
       //});
    }); 
    </script>
    
    <!--NO CAMBIAR NADA DEL SIGUIENTE CODIGO, si no sabes-->
    
    <script type="application/javascript">
        $(document).ready(function() {
            // Para navegadores que soportan la función.
            if (typeof window.history.pushState == 'function') {
                pushstate();            
            }else{
                check(); hash();
            }
        });
        // Chequear si existe el hash.
        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");
            // Evento al hacer click.
            links.live('click', function(event) {
                var url = $(this).attr('href');
                // Cambio el historial del navegador.
                history.pushState({ path: url }, url, url);
                // Muestro la nueva url
                // alert(url);
                return false;
            });
            
            // Función para determinar cuando cambia la url de la página.
            $(window).bind('popstate', function(event) {
                var state = event.originalEvent.state;
                if (state) {
                    // Mostrar url.
                    // alert(state.path);
                }
            });
        }
        
        function hash(){
            // Para IE
            // Función para determinar cuando cambia el hash de la página.
            $(window).bind("hashchange",function(){
                var hash = ""+window.location.hash+"";
                hash = hash.replace("#!","")
                if(hash && hash != ""){
                    alert(hash);
                }
            }); 
            // Evento al hacer click.
            $("a").bind('click', function(e) {
                e.preventDefault();
                var url = $(this).attr('href');
                // Cambio el historial del navegador.
                window.location.hash = "#!" + url;
                return false
            });
        }
        </script>  
 
  </head>
  <body>
    <a href='home' id="en caso de asignarle un ID especifivo">prueba</a> <object type="application/x-shockwave-flash" data="http://media.showdj.es/data/dewplayer.swf" width="240" height="20" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://samples.showdj.es/data/dewplayer.swf"><param name="flashvars" value="mp3=http://listen.radionomy.com/showdj-music&amp;autostart=0&amp;autoreplay=0&amp;showtime=1&amp;randomplay=1&amp;nopointer=1"></object><!--Podeis poner play y comprobar que carga la web, sin parar la musica-->
 
    <div id="wrapper"> <!--Aquie es donde se mostrara la url de HOME--> </div>
  </body>
</html>

Ambos script sacan la URL de href='home'.

Tener cuidado con la publicidad de vuestra web/blog, porque a mi me ha dado problemas.