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:
ringrazio in anticipo chi vorrà aiutarmi ... :fonzie:
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:
