| Sliding box error
|
Shado
msg:4194131 | 6:51 pm on Aug 30, 2010 (gmt 0) |
Hi guys
First off let me confess that I know nothing about js other than making lists that open and close on click...
I have designed a box based on [andrewsellick.com ] but now I face a problem. When I test the box is open on loading and it's suppose to be closed and only revealed once the tab is clicked.
I have copied the mootool file and linked it to my page.
JS code:
var isExtended = 0;
var height = 165;
var width = 240;
var slideDuration = 1000;
var opacityDuration = 1500;
function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 0, width);
sideBarOpacity(0, 1);
isExtended = 1;
// make expand tab arrow image face left (inwards)
$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/(\.[^.]+)$/, '-active$1');
}
else{
sideBarSlide(height, 0, width, 0);
sideBarOpacity(1, 0);
isExtended = 0;
// make expand tab arrow image face right (outwards)
$('sideBarTab').childNodes[0].src = $('sideBarTab').childNodes[0].src.replace(/-active(\.[^.]+)$/, '$1');
}
}
function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'height': [fromHeight, toHeight],
'width': [fromWidth, toWidth]
});
}
function sideBarOpacity(from, to){
var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'opacity': [from, to]
});
}
function init(){
$('sideBarTab').addEvent('click', function(){extendContract()});
}
window.addEvent('load', function(){init()});
Let me know if you need the HTML and CSS but as it seems to be a js problem and in the interest of not code dumping I've left it out.
Thank you.
|
Shado
msg:4194480 | 12:30 pm on Aug 31, 2010 (gmt 0) |
Issue resolved! I managed to get the code working by changing function init()
function init(){
$('sideBarTab').addEvent('click', function(){extendContract()});
isExtended = 1;
extendContract();
}
Thank you
|
|
|
