CSS , Tabs jquery e Twitter

Nicky Calo' · 2 Apr 2012

Ciao ragazzi, ho un problema
vorrei implementare in una pagina una navigazione a "TABS" in jquery

fin qui tutto bene.

vorrei inserire in ogni tab una ricerca su #hashtag Twitter, il problema è che i CSS vengono letti correttamente solo sul primo TAB quando passo al secondo mi sballa tutto, non sono riuscito a capire qual'è la causa, inizialmente pensavo che 2 widget twitter sulla stessa pagina facessero a botte ma se li inserisco l di fuori del "jquery tabs" funzionano entrambi perfettamente.

qui c'è l'esempio che sballa:
http://www.turismoisoladellefemmine.it/twittertabs.php

e questo è tutto il codice della pagina:

Codice:

<html>
<head>
  <title></title>
  <script src="vendor/jquery-1.7.1.min.js" type="text/javascript"></script> 
  <script src="vendor/jquery.hashchange.min.js" type="text/javascript"></script>
  <script src="lib/jquery.easytabs.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready( function() {
      $('#tab-container').easytabs();
    });
  </script>
<style>
    /* Example Styles for Demo */
    .etabs { margin: 0; padding: 0; }
    .tab { 
	display: inline-block; 
	zoom:1; 
	*display:inline; 
	background: #eee; 
	border: solid 1px #999; 
	border-bottom: none; 
	-moz-border-radius: 4px 4px 0 0; 
	-webkit-border-radius: 4px 4px 0 0; 
	}
	
    .tab a { 
	font-size: 14px; 
	line-height: 2em; 
	display: block; 
	padding: 0 10px; 
	outline: none; 
	}
	
    .tab a:hover { 
	text-decoration: underline; 
	}
	
    .tab.active { 
	background: #fff; 
	padding-top: 6px; 
	position: relative; 
	top: 1px; 
	border-color: #666; 
	}
	
    .tab a.active { 
	font-weight: bold; 
	}
	
    .tab-container .panel-container { 
	background: #fff; 
	border: solid #666 1px; 
	padding: 10px; 
	-moz-border-radius: 0 4px 4px 4px; 
	-webkit-border-radius: 0 4px 4px 4px; 
	}
	
    .panel-container { 
	margin-bottom: 10px; 
	}
	
  </style>
</head>
<body>
<div id="tab-container" class='tab-container'>

 <ul class='etabs'>
   <li class='tab'><a href="#turismoisola">@turismoisola</a></li>
   <li class='tab'><a href="#trafficoA29">#trafficoA29</a></li>
 </ul>

 <div class='panel-container'>
 
   <div id="turismoisola">
  <p>    <!-- twitter -->
		<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 8,
  interval: 30000,
  width: 560,
  height: 300,
  theme: {
    shell: {
      background: '#4FB0DD',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#c60000'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('turismoisola').start();
</script>
        <!-- end twitter -->
        </p>
  </div>
   
  <div id="trafficoA29">
    <p><script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: '#trafficoA29',
  interval: 5000,
  title: 'Traffico sulla A29',
  subject: 'tra Palermo e Carini',
  rpp: 8,
  interval: 30000,
  width: 560,
  height: 300,
  theme: {
    shell: {
      background: '#4FB0DD',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#000000',
      links: '#c60000'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'all'
  }
}).render().start();
</script>
        <!-- end twitter -->.</p>
  </div>
  
   
 </div>
</div>

</body>
</html>

ringrazio in anticipo chi vorrà aiutarmi ... :fonzie:

Cerca

Cerca

CSS , Tabs jquery e Twitter

Nicky Calo'

Nuovo Utente

Discussioni simili