homepage Welcome to WebmasterWorld Guest from 54.211.138.180
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved