Hello
I’m using mootools on my site to make an accordion and to work with ajax but i’m with a few problems.
The accordion works fine, the ajax also do what i want (load an external page), but when that page loads the accordion don’t resize for his new contents.
Anyone can help me?
My code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript" src="mootools-release-1.11.js"></script>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function(){
var accordion = new Accordion('h3.atStart', 'div.atStart', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#ff3300');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#222');
}
}, $('accordion'));
var newTog = new Element('h3', {'class': 'toggler'}).setHTML('noticias');
var newEl = new Element('div', {'class': 'element'}).setHTML('<p>bla bl abl alb la bl</p>');
accordion.addSection(newTog, newEl, 0);
});
</script>
<?php do { ?>
<script language="JavaScript" type="text/javascript">
window.addEvent('domready', function(){
$('<?php echo $row_rs_jjm['titulo']; ?>').addEvent('click', function(e) {
e = new Event(e).stop();
var url = "http://localhost/jjm/conteudo.php?id=<?php echo $row_rs_jjm['id']; ?>";
new Ajax(url, {
method: 'get',
update: $('log')
}).request();
})
});
</script>
<?php } while ($row_rs_jjm = mysql_fetch_assoc($rs_jjm)); ?>
<style type="text/css">
<!--
.toggler {
color: #222;
margin: 0;
padding: 2px 5px;
background: #eee;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
border-top: 1px solid #f5f5f5;
border-left: 1px solid #f5f5f5;
font-size: 11px;
font-weight: normal;
font-family: 'Andale Mono', sans-serif;
}
.element {
}
.element p {
margin: 0;
padding: 4px;
}
.float-right {
padding:10px 20px;
float:right;
}
blockquote {
text-style:italic;
padding:5px 0 5px 30px;
}
-->
</style>
</head>
<body>
<h3>The Mighty Accordion</h3>
<div id="accordion">
<h3 class="toggler atStart">clientes</h3>
<div class="element atStart">
<p>aqui ficam por exemplo os clientes:</p>
<?php do { ?>
<a id="<?php echo $row_rs_jjm2['titulo']; ?>" href="#"><?php echo $row_rs_jjm2['titulo']; ?></a> |
<?php } while ($row_rs_jjm2 = mysql_fetch_assoc($rs_jjm2)); ?>
<div id="log"><br />
Conteudo</div>
</div>
