Twitter Search Widget resizen

[geertd]

Hallo allemaal,

Ik wil op mijn site een Twitter Search Widget plaatsen. De bedoeling is dat hij wanneer de pagina geladen wordt, maar 100px hoog is. Wanneer je op de button "more" klikt, moet hij geanimeerd (jQuery) 300px hoog worden. Alles gaat goed, behalve het vergroten van de Widget zelf.
Weet iemand hoe ik dit aan moet pakken?

De HTML van het hele ding:

<div id="twitter-bar-top">
            <div id="twitter-widget-container">
			<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'search',
  search: 'from:griekenreis12 OR @griekenreis12 OR #griekenreis12 OR griekenland.com',
  interval: 15000,
  title: 'Wat er wordt gezegd over',
  subject: 'Griekenlandreis 2012',
  width: 'auto',
  rrp: 30,
  height: '100%',
  theme: {
    shell: {
      background: '#ccdee3',
      color: '#ffffff'
    },
    tweets: {
      background: '#333333',
      color: '#ffffff',
      links: '#ffffff'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().start();
</script></div>            
<div id="buttoncontainer">
<a href="https://twitter.com/intent/tweet?screen_name=griekenreis12"><button id="button-meetweeten">Tweet mee</button></a>
<button id="button-more" onclick="jQuery('#twitter-bar-top').animate({height: 300},600); jQuery('#button-meetweeten').animate({height: 275},600); jQuery('#twitter-widget-container').animate({height: 275},600);  jQuery('#button-more').css('display', 'none'); jQuery('#button-less').css('display', 'block'); ">more</button>

<button id="button-less" onclick="jQuery('#twitter-bar-top').animate({height: 100},600); jQuery('#button-meetweeten').animate({height: 75},600); jQuery('#button-less').css('display', 'none'); jQuery('#twitter-widget-container').animate({height: 100},600); jQuery('#button-more').css('display', 'block');">less</button>
</div><div class="clearfloat"></div></div>

De CSS:

#twitter-bar-top {
	/*padding: 20px 20px 0pt;*/
	width: 700px;
	margin: 0pt 0pt 40px;
	outline: 0pt none;
	vertical-align: baseline;
}

#twitter-bar-top .twtr-ft {
	display: none;
}

#twitter-bar-top .twtr-hd {
	display: none;
}

#twitter-bar-top .twtr-widget {
	width: 650px !important;
	border: 0px none !important;
	/*height: 300px !important;*/
	float: left;
}

#twitter-bar-top .twtr-doc {
/*	height: 300px !important;	*/
}

#twitter-bar-top .twtr-timeline {
	/*height: 300px !important;*/
}

#twitter-bar-top button {
	float: left;
	
	width: 50px;
	background: #333333;
	color: #9bc4ce;
	font-weight: bold;
	font-family: Arial, sans-serif;
	border: 0px none;
	
}

#twitter-bar-top buttoncontainer {
	float: left;
	/*height: 100px;*/
	width: 50px;
}

#twitter-bar-top #button-meetweeten {
	height: 75px;
	border-radius: 0px 6px 6px 0px;
	text-shadow: 2px 1px 0pt rgba(83, 91, 96, 0.4);
}

#twitter-bar-top #button-more {
	height: 25px;
	border-radius: 0px 6px 6px 0px;
	color: #999;
	border-top: 1px #666 solid;
}

#twitter-bar-top #button-less {
	height: 25px;
	border-radius: 0px 6px 6px 0px;
	color: #999;
	border-top: 1px #666 solid;
	display: none;
}


#twitter-bar-top button:hover {
	background: #9bc4ce;
	color: #333333;
	border: #333333 2px solid;
}

#twitter-bar-top #button-more:hover {
	background: #CCC;
	color: #333333;
	border: #333333 2px solid;
}

.clearfloat {
	clear: both;
}

Alvast heel erg bedankt,

Geert

 

[Flamedog]

Ik zou vragen of ze dit topic kunnen overhevelen naar
http://www.helpmij.nl/forum/forumdisplay.php/78-Javascript

Ik verwacht dat je jQuery nog moet toevoegen aan het script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>