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