homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Sliding box error

Msg#: 4194129 posted 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');


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});
'height': [fromHeight, toHeight],
'width': [fromWidth, toWidth]

function sideBarOpacity(from, to){
var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
'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.



Msg#: 4194129 posted 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;

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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved