Menu
I made a 50th anniversary guest book to add memories/etc about our organization. The people can look at the entries and then if they want to add one of their own, there’s a link that should pop up a form in a new for them to add it. [B]I have no idea why this pop is not working in Internet Explorer (both IE6 and 7). It works beautifully in Firefox.
Again, [I]only the actual pop up function doesn’t work.
[B]HTML Page
[CODE]<html>
<head>
<title>50th Anniversary Reflections</title>
<script type=”text/javascript” src=”js/guestbook.js”></script>
<link href=”css/guestbook.css” media=”all” type=”text/css” rel=”stylesheet”>
</head>
<body>
<div id=”guestbook_container”>
<div id=”tab_nav_container”>
<ul>
<li><div id=”tab_1″ class=”tabs_on” onclick=”tabsClass.switchTab(this);”><a target=”gstbk_frame” href=”guestbook_query.asp?cat=1″ onclick=”change_value(1);”>Past Memories</a></div></li>
<li><div id=”tab_2″ class=”tabs_off” onclick=”tabsClass.switchTab(this);”><a target=”gstbk_frame” href=”guestbook_query.asp?cat=2″ onclick=”change_value(2);”>Career Impact</a></div></li>
<li><div id=”tab_3″ class=”tabs_off” onclick=”tabsClass.switchTab(this);”><a target=”gstbk_frame” href=”guestbook_query.asp?cat=3″ onclick=”change_value(3);”>Future Wishes</a></div></li>
<li><div id=”new” class=”tabs_off” onclick=”popupform();”>Share Your Memories</div></li>
</ul>
</div><!– end tab_nav_container –>
<div id=”tab_content_container”>
<div id=”tab_1_data” class=”tab_content”><p class=”tab_category”>What is your most important memory of NACUA?</p></div>
<div id=”tab_2_data” class=”tab_content” style=”display: none;”><p class=”tab_category”>How has NACUA benefitted you and your career?</p></div>
<div id=”tab_3_data” class=”tab_content” style=”display: none;”><p class=”tab_category”>What is your most important wish or hope for NACUA’s future?</p></div>
</div><!– end tab_content_container –>
<script type=”text/javascript”>
tabsClass.addTabs(“tab_nav_container”);
</script>
<br class=”clear” />
<div id=”iframe_container”>
<iframe name=”gstbk_frame” id=”gstbk_frame” src=”guestbook_query.asp?cat=1″ width=”730px” height=”550px” scrolling=”auto” frameborder=”none”></iframe>
</div><!– end iframe_container –>
<br class=”clear” />
</div><!– end guestbook_container –>
</body>
</html>
[B]Guestbook.js File
[CODE]//***** ASSIGN/CHANGE CATEGORY VALUES *****
function popupform(){
var href;
href=”guestbook_submission_form.asp?cat=”+catValue;
window.open(href, “Submission Form”, ‘width=600, height=400, scrollbars=no’);
}
var catValue = “1”
function change_value(catChange){
catValue=catChange;
change_text();
}
function change_text(){
if(catValue==”1″){
document.getElementById(“new”).innerHTML = “<a href=’#’ style=’color:#ffffff;’>Share Your Memories!</a>”;
}
if(catValue==”2″){
document.getElementById(“new”).innerHTML = “<a href=’#’ style=’color:#ffffff;’>Share Your Career Experiences!</a>”;
}
if(catValue==”3″){
document.getElementById(“new”).innerHTML = “<a href=’#’ style=’color:#ffffff;’>Add Your Own Wish!</a>”;
}
}
//***** ASSIGN/CHANGE VALUES AND TABS *****
function assignCategory(cat){
document.form.category.value=cat;
}
function onLoadAssignAndSwitch(cat){
assignCategory(cat);
tabsClass.addTabs(“tab_nav_container”);
var initialTab = “tab_” + cat + “_data”
if (initialTab != “tab_1_data”){
document.getElementById(initialTab).style.display = “”;
document.getElementById(“tab_1_data”).style.display = “none”;
}
document.getElementById(“tab_” + cat).className = “tabs_on”;
}
function assignAndSwitch(element, cat){
tabsClass.switchTab(element);
assignCategory(cat);
}
//***** TABBED MENU *****
var tabsClass = {
tabSetArray: new Array(),
classOn: “tabs_on”,
classOff: “tabs_off”,
addTabs: function (tabsContainer) {
tabs = document.getElementById(tabsContainer).getElementsByTagName(“div”);
for (x in tabs) {
if (typeof(tabs[x].id) != “undefined”) {
this.tabSetArray.push(tabs[x].id);
} else {}
}
},
switchTab: function (element) {
for (x in this.tabSetArray) {
tabItem = this.tabSetArray[x];
dataElement = document.getElementById(tabItem + “_data”);
if (dataElement) {
if (dataElement.style.display != “none”) {
dataElement.style.display = “none”;
} else {}
} else {}
tabElement = document.getElementById(tabItem);
if (tabElement) {
if (tabElement.className != this.classOff) {
tabElement.className = this.classOff;
} else {}
} else {}
}
document.getElementById(element.id + “_data”).style.display = “”;
element.className = this.classOn;
}
};
I’m not too advanced in javascript but not a total idiot, just a designer trying to make a nice website. Any help and/or suggestions would be greatly appreciated! Thank you!