Comunidad de diseño web y desarrollo en internet online

jQuery con twitter

Citar            
MensajeEscrito el 26 Nov 2014 12:10 am
Tengo el siguiente codigo que saque de esta pagina para hacer funcional una barra de navegacion (en mi default) y que me cargue los contenidos de las diferentes secciones en un contenedor:

Código Javascript :

<script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#section").load("home.html"); <!-- cuando carga la default el contenedor carga el home -->
         $("#navigation a").each(function(){
           var href = $(this).attr("href");
           $(this).attr({ href: "#"});
           $(this).click(function(){
               $("#section").load(href);
             }
           });
         });
      });


...y en mi home tengo el siguiente codigo en el body:

Código CSS :

           <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/cristalab" data-widget-id="537392301694550016">Tweets por @cristalab.</a>


...y debajo del body (en home tambien):

Código Javascript :

            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


Cuando la pagina carga por primera vez lo hace barbaro, muestra la home como tiene que ser y el twitter carga sin problemas, ahora cuando le doy a home sobre la barra de navegacion, me carga de nuevo toda la home sin problemas, pero el twitter no me lo carga.
La unica diferencia que encuentro es que cuando lo hace mediante la barra de navegacion, arriba en la barra de direcciones me agrega un # al final de la url, pero no tengo la seguridad de que esto sea lo que esta causando el problema, ni se como solucionarlo en caso de ser asi.
Obviamente si en el click(function(){ discrimino con un if para que cuando clickeo sobre el home en lugar de cargar el home en el contenedor me cargue la default denuevo en toda la pagina con un window.location.replace si, funciona... pero no me termina de cerrar ese parche.
Seria como atar a una chica facil, no por eso tendria una santa sino una chica facil atada. (siendo sutil)


Alguno podra ayudarme con esto? el chapulin no me dio solucion.

Por lean2005

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 26 Nov 2014 12:29 am
La almoadilla # no tiene nada que ver.

Mejor activa la consola de tu navegador y dinos si te arroja un error.

http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 26 Nov 2014 09:24 am

elporfirio escribió:

La almoadilla # no tiene nada que ver.

Mejor activa la consola de tu navegador y dinos si te arroja un error.

http://webmasters.stackexchange.com/questions/8525/how-to-open-the-javascript-console-in-different-browsers


No arroja ningun error.

Dejo el codigo de ambas paginas por si alguien quiere probar...

ejemplo.html

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ejemplo</title>
<style type="text/css">
   #navigation {
      margin-left:auto;
      margin-right:auto;
      padding: 0;
      clear:both;
      width:100%;
      height:50px;
      background: black url(images/dropdown-bg.gif) repeat-x left top;
   }
   ul.nav-main,
   ul.nav-main li {
      list-style: none;
      margin: 0;
      padding: 0;
   }
   ul.nav-main {
      position: relative;
      z-index: 597;
   }   
   ul.nav-main li:hover > ul {
      visibility: visible;
   }   
   ul.nav-main li.hover,
   ul.nav-main li:hover {
      position: relative;
      z-index: 599;
      cursor: pointer;
      background: url(images/dropdown-bg-hover.gif) repeat-x left top;
   }   
   ul.nav-main li {
      float:left;
      display:block;
      height: 51px;
      color: #999;
      font: 14px Arial, Helvetica, sans-serif;
      background: url(images/separator.gif) no-repeat right center;
   }   
   ul.nav-main li a {
      display:block;
      padding: 16px 16px 0 16px;
      height: 35px;
      color: #999;
      font: 14px Arial, Helvetica, sans-serif;
      text-decoration:none;
   }   
   ul.nav-main li a:hover {
      color:#D6D6D6;
   }   
   ul.nav-main *.list {
      padding-right: 22px;
      background: url(images/navigation-arrow.gif) no-repeat right top;
   }
   ul.nav-sub {
      visibility: hidden;
      position: absolute;
      padding:10px;
      top: 48px;
      left: 0;
      z-index: 598;
      background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      border-left: 1px solid #000;
   }
   ul.nav-sub li {
      list-style:none;
      display:block;
      padding: 0;
      height: 27px;
      float: none;
      width:145px;
      border-bottom: 1px solid #5a5a5a;
      background: none;
   }   
   ul.nav-sub li a {
      list-style:none;
      display:block;
      padding: 6px 5px 6px 5px;
      height: 15px;
      float: none;
      width:145px;
      background: none;
      font: 12px Arial, Helvetica, sans-serif;   
   }
</style>
<script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){
         $("#section").load("twitter.html");
         $("#navigation a").each(function(){
           var href = $(this).attr("href");
           $(this).attr({ href: "#"});
           $(this).click(function(){
               $("#section").load(href);
           });
         });
      });
   </script>
</head>

<body>
   <nav id="nav">
        <ul id="navigation" class="nav-main">
            <li><a href="twitter.html">HOME</a></li>
            <li><a href='seccion2.html'>SECCION 2</a></li>
            <li><a href='seccion3.html'>SECCION 3</a></li>
        </ul>
    </nav>
    <section id="section"></section>
</body>

</html>


y twitter.html

Código :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>twitter</title>
</head>
<body>
<a class="twitter-timeline" data-dnt="true" href="https://twitter.com/cristalab" data-widget-id="537392301694550016">Tweets por @cristalab.</a>
          
</body>
<script>
   !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</html>


Lo unico que hay que hacer es cambiar en ejemplo.html la direccion o el nombre en src="jquery.js" por como le hallan puesto ustedes.
Al abrir ejemplo muestra bien el twitter, ahora al darle a home en la barra, recarga la section y ya no muestra el twitter.


Desde ya muchas gracias.
Leandro.

Por lean2005

3 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.