Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/06/2012, 16:37
wwwshowdjes
 
Fecha de Ingreso: enero-2011
Mensajes: 12
Antigüedad: 13 años, 10 meses
Puntos: 1
Busqueda DIV siempre visible, pushstate + ajax o similar, NO CSS

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
  1. $(document).ready(function() {
  2. * * if (typeof window.history.pushState == 'function') {
  3. * * * * pushstate(); * * * * * *
  4. * * }else{
  5. * * * * check(); hash();
  6. * * }
  7. });
  8. // AJAX mágico que cambia la url;
  9. *
  10. function ajaxMagic(i,o){
  11. * * var ajax = new XMLHttp();
  12. * * with(ajax){
  13. * * * * open("POST",i,true);
  14. * * * * setRequestHeader("Content-type","application/x-www-for-urlencoded");
  15. * * * * send(null);
  16. *
  17. * * * * onreadystatechange = function(){
  18. * * * * * * if((readyState == 4) && (status == 200)){
  19. * * * * * * * * respF = responseText;
  20. * * * * * * * * if(respF != ""){
  21. * * * * * * * * * * document.getElementById(o).innerHTML = respF;
  22. * * * * * * * * }
  23. * * * * * * }
  24. * * * * }
  25. * * * * }
  26. }
  27. *
  28. *
  29. function check(){
  30. * * var direccion = ""+window.location+"";
  31. * * var nombre = direccion.split("#!");
  32. * * if(nombre.length > 1){
  33. * * * * var url = nombre[1];
  34. * * * * alert(url);
  35. * * }
  36. }
  37. * *
  38. function pushstate(){
  39. * * var links = $("a");
  40. * * links.live('click', function(event) {
  41. * * * * var divToChg = $(this).attr('ejemplo'); //este atributo no es valido en el TAG A pero lo creo igual
  42. * * * * var url = $(this).attr('href');
  43. * * * * history.pushState({
  44. * * * * * * path: url
  45. * * * * }, url, url);
  46. * * * * ajaxMagic(url,divToChg)
  47. * * * * return false;
  48. * * });
  49. * * * *
  50. * * $(window).bind('popstate', function(event) {
  51. * * * * var state = event.originalEvent.state;
  52. * * * * if (state) {
  53. * * * * * * alert(state.path);
  54. * * * * }
  55. * * });
  56. }
  57. * *
  58. function hash(){
  59. * * $(window).bind("hashchange",function(){
  60. * * * * var hash = ""+window.location.hash+"";
  61. * * * * hash = hash.replace("#!","")
  62. * * * * if(hash != ""){
  63. * * * * * * alert(hash);
  64. * * }
  65. * * });
  66. *
  67. * * $("a").bind('click', function(e) {
  68. * * * * e.preventDefault();
  69. * * * * var url = $(this).attr('href');
  70. * * * * window.location.hash = "#!"+url;
  71. * * * * return false
  72. * * });
  73. }

Código HTML:
Ver original
  1. <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

Última edición por wwwshowdjes; 02/06/2012 a las 17:49 Razón: URLs incorrectas