srry this is a repost, but ive dramatically changed my code so the old thread is irreverent and i dont want people to tldr
i had an open/close tab script that worked:
http://patrickallard.net63.net/procedureoriented/
but the code was repetitive and couldnt be expanded for more functionality because i didnt have objects
now i am treating the tabs as objects, and the code is much neater with them:
http://patrickallard.net63.net/
just one problem, it doesnt work! and i have no idea why! could someone please take a look? it is short, well commented and neat and i suppose an experienced person could find the error quickly
you can find the code at the bottom of each page, and ill post it here for convenience sake
tyvm!
<script>
//page dimentions
var tabWidth=300;
var tabHeight=document.getElementById("experienceshadow").clientHeight;
var defaultSpeed=400;
var numRows=2;
//tab constructer
function tab(divID,row,col)
{
// jquery referencer
this.div=$('div#'+divID);
// store dimentions of divs into variables
this.height=document.getElementById(divID).clientHeight;
// row and column of tab iterates from 0
this.row=row;
this.col=col;
// position of tabs based on row and column number
this.left=col*parseInt(tabWidth);
this.top=row*parseInt(tabHeight);
// when page initializes, all windows are open, before the initilization fucntion which closes them all
// thus we have to set all to open so initilization function sets them to false when closing them
this.open=true;
// toggle boolian to determine if div is open or closed
this.toggle=toggle;
function toggle()
{
if(this.open==true)
{
this.open=false;
}
else
{
this.open=true;
}
}
}
// create tabs
experience=new tab("experience",0,0);
education=new tab("education",0,1);
software=new tab("software",0,2);
codesamples=new tab("codesamples",1,0);
references=new tab("references",1,1);
links=new tab("links",1,2);
// jquery functions to open and close tabs
(function()
{
// close a tab
$.fn.CloseHopin = function(currentTab,fn)
{
return $(this).animate({
'height': tabHeight+'px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
}).animate({
'left': currentTab.left+'px',
'width': tabWidth+'px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
}).animate({
'top': currentTab.top+'px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
});
}
// open a tab
$.fn.OpenHopin = function(currentTab,fn)
{
return $(this).animate({
'top': (tabHeight*numRows)+'px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
}).animate({
'left': '0px',
'width': '900px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
}).animate({
'height': currentTab.height+'px',
}, defaultSpeed || 400, function() {
$.isFunction(fn) && fn.call(this);
});
}
// function to open or close a tab
$.fn.OpenToggle = function(currentTab,fn)
{
// if its open close it
if(currentTab.open)
{
currentTab.toggle();
$(this).CloseHopin(currentTab,fn);
}
// if its closed open it
else
{
// close other windows if they are open, then open the clicked window
// error here
if(experience.open)
{
experience.div.CloseHopin(experience,fn);
}
if(education.open)
{
education.div.CloseHopin(education,fn);
}
if(software.open)
{
software.div.CloseHopin(software,fn);
}
if(codesamples.open)
{
codesamples.div.CloseHopin(codesamples,fn);
}
if(references.open)
{
references.div.CloseHopin(references,fn);
}
if(links.open)
{
links.div.CloseHopin(links,fn);
}
$(this).OpenHopin(currentTab,fn);
}
};
// add functions to the tabs
experience.div.on('click', function() {
experience.div.OpenToggle(experience,fn);
});
education.div.on('click', function() {
education.div.OpenToggle(education,fn);
});
software.div.on('click', function() {
software.div.OpenToggle(software,fn);
});
codesamples.div.on('click', function() {
codesamples.div.OpenToggle(codesamples,fn);
});
references.div.on('click', function() {
references.div.OpenToggle(references,fn);
});
links.div.on('click', function() {
links.div.OpenToggle(links,fn);
});
})();
// when page initializes, close all tabs
(function() {
experience.div.OpenToggle(experience,fn);
education.div.OpenToggle(education,fn);
software.div.OpenToggle(software,fn);
codesamples.div.OpenToggle(codesamples,fn);
references.div.OpenToggle(references,fn);
links.div.OpenToggle(links,fn);
})();
</script>
