I have a function called at load which runs through the page, truncates a dive down to the first paragraph, shrinks the div height and assigns an animation function to a button inside that div. So when someone clicks on the "more" button the script refills the div and then animates the opening of the div using mootools. I'm trying to pass the number that corresponds to the button, detail and fullText. (button 0 opens detail 0 and shows fullText 0), but when I say "x" in the assigned function I want that to be the literal value of whatever the loop is - if it's loop 0, write "0" into the function. Is there a way to do this, or should I find another way of storing the number? Thanks.
Code:
var buttons, details;
var fullText = [];
function setupDetails() {
buttons = $S(".itemDetail .bottom"); //$S() returns an array of elements
details = $S(".itemDetail .inside");
for (x = 0; x<details.length; x++) {
fullText[x] = details[x].innerHTML;
details[x].addClass("shrunk");
details[x].innerHTML = details[x].getElementsByTagName("p")[0].innerHTML.substring(0,200) + "...";
details[x].style.height = details[x].offsetHeight + "px";
buttons[x].onclick = function() {
var myEffects = details[x].effects({duration: 500, transition: Fx.Transitions.sineInOut});
myEffects.custom({'height': [details[x].offsetHeight, details[x].scrollHeight], onComplete : function() {
details[x].innerHTML = fullText[x];
details[x].removeClass("shrunk");
}
});
this.parentNode.removeChild(this);
}
};
}
HTML Code:
<div class="itemDetail">
<div class="inside">
<p>Text</p>
</div>
<div class="bottom">Read More</div>
</div>
<div class="itemDetail">
<div class="inside">
<p>Text</p>
</div>
<div class="bottom">Read More</div>
</div>
Last edited by funkdaddu; 12-18-2006 at 10:38 AM..
|
