Menu
Hi all,
I have created a popup page that contained 3 tabs on the top. Each tab got a scrolling text box. The scrollbar is on the right side of each tab. The problem I am having is that the first 2 tabs does not scroll down at all but the last tab works just fine. How come the first 2 tabs are working but not the 3rd? My page so far work for most browsers except for the Firefox within the MAC computer. I think the problem is the Javascript and not the style sheet or html coding. I have pasted the javascript below for your review:
[CODE]<script>
//<![CDATA[
closeEventHandler = null;
function closeEvent() {
if(closeEventHandler != null) {
closeEventHandler();
closeEventHandler = null;
}
}
SLIDE_START_X = -287;
SLIDE_START_X_TAB = 323;
SLIDE_X_TAB_END = 941;
SLIDE_END_X = 320;
RTS_DOWN = “DOWN”;
RTS_UP = “UP”;
RESOURCE_DOWN_TOP_OFFSET = -75;
RESOURCE_UP_TOP_CAP = 35;
RESOURCE_UP = 150;
var resourceTabState = RTS_DOWN;
var activeTab = null;
HAS_DRAWERS = true;
HAS_WRAP = true;
}
function clickAnyTab(name) {
if(activeTab != null && name != activeTab) {
//alert(name + ” ” activeTab);
clickAnyTabHelper(activeTab);
}
if(name == activeTab) {
activeTab = null;
} else {
activeTab = name;
}
clickAnyTabHelper(name);
}
function clickStandards() {
var standards = document.getElementById(“ote_standards_popup”);
if(standards.state == null || standards.state == “off”) {
// show
var width = standards.offsetWidth;
if(width == null || width == 0) {
width = standards.otetWdith;
}
var shiftToTheRightATad = -110;
var newLeft = String((f_clientWidth() – width) / 2 + shiftToTheRightATad) + “px”;
standards.style.left = newLeft;
standards.state = “on”;
standards.style.top = “60px”;
} else {
// hide
standards.state = “off”;
standards.style.top = “-5000px”;
}
}
function clickAnyTabHelper(name) {
if(name == “ote_drawer_resources”) {
clickResourceTab();
} else if(name == “ote_standards_popup”) {
clickStandards();
} else if(name == “ote_glossary”) {
document.getElementById(“ote_glossary”).click();
} else {
clickBlueTab(name);
}
}
function clickBlueTab(pulloutdivName) {
var bluetabs = document.getElementById(“bluetabs”);
var pullout = document.getElementById(pulloutdivName);
objectToSlide = pullout;
objectToSlideTab = document.getElementById(pulloutdivName + “_tab_ttmx”);
var left = pxToInt(objectToSlide.style.left);
if(!pullout.isOut) {
pullout.isOut = true;
var trans = new Transition(slide, SLIDE_START_X, SLIDE_END_X, .2,null);
//document.getElementById(“pgtable”).style.overflow = “auto”;
objectToSlide.style.left = String(SLIDE_START_X) + “px”;
objectToSlideTab.style.left = String(SLIDE_START_X_TAB) + “px”;
pullout.style.zIndex = 3;
objectToSlideTab.style.zIndex = 4;
document.getElementById(“ote_frame_” + pulloutdivName).style.visibility = “visible”;
document.getElementById(“ote_frame_” + pulloutdivName).style.display = “”;
trans.start();
} else {
pullout.isOut = false;
var oteFrame = “ote_frame_” + pulloutdivName;
var callBackStr = ‘document.getElementById(“‘ + oteFrame + ‘”).style.visibility = “hidden”; ‘;
callBackStr += ‘ document.getElementById(“‘ + oteFrame + ‘”).style.display = “none”; ‘;
callBackStr += ‘ document.getElementById(“‘ + oteFrame + ‘”).style.left = “-387px”; ‘;
callBackStr += ‘ document.getElementById(“‘ + pulloutdivName + ‘_tab_ttmx”).style.left = “‘ + SLIDE_START_X_TAB + ‘px”; ‘;
var trans = new Transition(slide, SLIDE_START_X, SLIDE_END_X, .2, new Function(callBackStr));
trans.reverse();
pullout.style.zIndex = 2;
objectToSlideTab.style.zIndex = 1;
//document.getElementById(“pgtable”).style.overflow = “hidden”;
}
}
function slideResourceTab(x) {
document.getElementById(“ote_drawer_resources”).style.top = String(x) + “px”;
}
function clickResourceTab() {
var resourceTab = document.getElementById(“ote_drawer_resources”);
var resourceContent = document.getElementById(“resourceContent”);
var trans = new Transition(slideResourceTab, getResourceDownTop(), getResourceUpTop(), .2,null);
if(resourceTabState == RTS_DOWN) {
resourceTabState = RTS_UP;
trans.start();
//resourceTab.style.top = String(getResourceUpTop()) + “px”;
//resourceContent.style.height = String(getResourceUpHeight()) + “px”;
} else {
resourceTabState = RTS_DOWN;
trans.reverse();
//resourceTab.style.top = String(getResourceDownTop()) + “px”;
}
}
function pxToInt(val) {
if(val == “”) {
return 0;
}
var temp = String(val);
temp = temp.substring(0,temp.length -2);
return temp;
}
function resize() {
var scrollingnotes = document.getElementById(“scrollingnotes”);
if(scrollingnotes != null) {
if(isIE6)
scrollingnotes.style.height = String(f_clientHeight() – scrollingnotes.offsetTop)-1 + “px”;
else
scrollingnotes.style.height = String(f_clientHeight() – scrollingnotes.offsetTop)-7 + “px”;
}
var contentWrapper = document.getElementById(“ote_pc_contentWrapper”);
if(contentWrapper != null) {
contentWrapper.style.height = String(f_clientHeight() – contentWrapper.offsetTop – 0) + “px”;
contentWrapper.style.width = String(f_clientWidth() – contentWrapper.offsetLeft) + “px”;
}
//displayScroll(currentPan);
if(resourceTabState == RTS_DOWN) {
var drawerResources = document.getElementById(“ote_drawer_resources”);
if(drawerResources != null) {
document.getElementById(“ote_drawer_resources”).style.top = String(getResourceDownTop()) + “px”;
}
} else {
//document.getElementById(“ote_drawer_resources”).style.height = String(getResourceUpHeight()) + “px”;
//var resourceContent = document.getElementById(“resourceContent”);
//if(resourceContent != null) {
// document.getElementById(“resourceContent”).style.height = String(getResourceUpHeight()) + “px”;
//}
}
docResize();
}
function getResourceDownTop() {
return f_clientHeight() + RESOURCE_DOWN_TOP_OFFSET;
}
function getResourceUpTop() {
var temp = f_clientHeight() – document.getElementById(“ote_drawer_resources”).offsetHeight;
return (temp > RESOURCE_UP_TOP_CAP) ? temp : RESOURCE_UP_TOP_CAP;
}
function getResourceUpHeight() {
var max = 645;
var result = f_clientHeight() – 180;
return (result < max) ? result : max;
}
function init() {
var c = _(“ote_pc_content”);
if(c != null)
c.style.width = 1144;
//if(!HAS_DRAWERS || !HAS_WRAP) {
if(!HAS_WRAP) {
var cw = document.getElementById(“ote_pc_contentWrapper”);
if(cw != null) {
cw.style.left = 10;
cw.style.width = “98%”;
}
var c = _(“ote_pc_content”);
if(c != null) {
//c.style.height = “100%”;
//c.style.width = String(1144 + 330) + “px”;
c.style.width = 1144;
c.style.left = (document.getElementById(“ote_pc_contentHolder”).clientWidth-parseInt(c.style.width))/2;
}
}
if(!HAS_WRAP) {
var sn = document.getElementById(“sidenav”);
if(sn != null) {
sn.style.width = “1px”;
sn.style.left = “-17px”;
}
}
if(HAS_WRAP) {
c.style.width = String(1144 + 330) + “px”;
}
var c = _(“ote_pc_content”);
docOnLoad();
resize();
stripe(‘printables’, ‘#AEDAFD’, ‘#CEEAFF’);
stripe(‘notebookPrintables’, ‘#AEDAFD’, ‘#CEEAFF’);
if(isIE6) {
var rhi = document.getElementById(“resourcesHeaderImage”);
if(rhi != null) {
document.getElementById(“resourcesHeaderImage”).style.top = “4px”;
}
var resourceContent = _(“resourceContent”);
if(resourceContent != null) {
resourceContent.style.height = “385px”;
resourceContent.style.width = “630px”;
}
}
}
//]]>
</script>
Thanks for all help!