CLoseFlipMenus() onLoad works with FireFox and not with Explorer!!
Hi,
I have a file.jsp with a flip menu defined. I have 2 options "Show All" and "Hide All" that shows/hides the flip menus.
Now, it works fine with IE and FireFox.
What I want is the flip menus to be closed when the page is loaded.... so I have add:
Code:
<body onLoad=closeAllFlips();>It works with Firefox but does not work with IE.
What am I doing wrong???? Please, help me.
Elisabeth
Here is the file.jsp
Code:
<html>
<head>
<script type="text/javascript" language="JavaScript" src="flipmenu.js">
</script>
<body onLoad=closeAllFlips();>
<ul class="flipMenu">
<li>Section 1
<ul>
<li><ahref="#">I1.1</a></li>
</ul>
</li>
<li>Section 2
<ul>
<li><a href="#">I2.1</a></li>
<li>Sub-Section 2.1
<ul>
<li><a href="#">I2.1.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript :closeAllFlips()">Hide All </a></li>
<li><a href="javascript :openAllFlips()">Show All</a></li>
</ul>
</body>
</html>
could you include the flipmenu.js file?
but my guess is the that since you have it on bodyload, the elements your trying to hide arent written yet.. try putting this at the bottom of the page:
Code:
<script language="JavaScript">
closeAllFlips();
</script>
I've tried what you suggested.... still not working!!
Here is part of the flip*.js:
The rest comes in another thread
Code:
// ## flipMenu 5.0.0 (c) J. Reijers
flipIndentation = "5px"; // ## Degree of indentation from the left
flipVerticalPadding = "4px"; // ## Padding inbetween menu items.
flipLeftMargin = "16px"; // ## Margin between the left of browser and menu.
flipTopMargin = "10px"; // ## Margin between top of browser and menu.
flipOpenMultipleMenus = false; // ## Allow multiple menus to fold out without closing all the other open ones
flipSaveMenuState = true; // ## Preserve the current state of the menu (requires cookies).
flipImages = true; // ## Use custom images for bullets
// ## Images to use (specify full path)
flipImg_open = "flip_open.gif";
flipImg_closed = "flip_closed.gif";
flipImg_static = "flip_static.gif";
// ## Initialise all flipMenus onload
flipInitOnLoad = true;
// ## Message to display in status bar while loading
flipLoadingMessage = "Loading...";
function alterSize(someSize, alterAmount) {
someSize = String(someSize);
var tmpNr = parseFloat(someSize.replace(/\D/g, ""));
var tmpChar = someSize.replace(/\d/g, "");
return isNaN(tmpNr) ? someSize : ((tmpNr + alterAmount) + tmpChar);
}
isIE = (String(navigator.appVersion).indexOf("MSIE") > -1);
if (!isIE) flipIndentation = alterSize(flipIndentation, -16);
if (!isIE) flipLeftMargin = alterSize(flipLeftMargin, -16);
document.write(
"<style type=\"text/css\">" +
"ul.flipMenu { margin-top: " + flipTopMargin + "; margin-left: " + flipLeftMargin + "; " + (flipImages ? "" : "list-s
tyle-type: none;") + " }" +
"ul.flipMenu ul, ul.flipMenu li { padding-top: " + flipVerticalPadding + "; margin-left: " + flipIndentation + "; mar
gin_right: 0px; " + (flipImages ? "" : "list-style-type: none;") + " }" +
"li.flipFolderOpen { cursor: pointer; " + (flipImages ? "list-style-image: url(" + flipImg_open + ");" : "") + " }" +
"li.flipFolderClosed { cursor: pointer; " + (flipImages ? "list-style-image: url(" + flipImg_closed + ");" : "") + "
}" +
"</style>"
);
if (flipImages) {
aFlipPreloads = [];
aFlipPreloads[0] = new Image;
aFlipPreloads[0].src = flipImg_open;
aFlipPreloads[1] = new Image;
aFlipPreloads[1].src = flipImg_closed;
aFlipPreloads[2] = new Image;
aFlipPreloads[2].src = flipImg_static;
}
function addEvent(someObj, someEvent, someFunction) {
if (someObj.addEventListener) { someObj.addEventListener(someEvent, someFunction, true); return true; } else if (some
Obj.attachEvent) return someObj.attachEvent("on" + someEvent, someFunction); else return false;
}
function openCloseFlip(theItem, newSetting, openParents) {
if (theItem.flipID) {
if (openParents) {
var tmpItem = theItem;
while (tmpItem.parentElement || tmpItem.parentNode) {
tmpItem = (tmpItem.parentElement) ? tmpItem.parentElement : tmpItem.parentNode;
openCloseFlip(tmpItem, newSetting);
}
}
if ((theItem.className == "flipFolderOpen" && newSetting == "closed") || (theItem.className == "flipFolderClo
sed" && newSetting == "open")) {
if (!theItem.childrenInitialised) {
for (var j = 0; j < theItem.childNodes.length; j++) if (theItem.childNodes[j].nodeName == "UL
" && !theItem.childNodes[j].initialised) initFlip(theItem.childNodes[j]);
theItem.childrenInitialised = true;
}
theItem.getElementsByTagName("UL")[0].style.display = (newSetting == "open") ? "" : "none";
theItem.className = newSetting == "open" ? "flipFolderOpen" : "flipFolderClosed";
}
}
}
function openFlip(theItem, openParents) {
openCloseFlip(theItem, "open", openParents);
}
function closeFlip(theItem, closeParents) {
openCloseFlip(theItem, "closed", closeParents);
}
function toggleFlip(theElement) {
if (theElement.flipID) {
var theItem = theElement;
var isContained = true;
} else {
if (theElement && theElement.button > 0) return false;
var theItem = (isIE) ? event.srcElement : theElement.target;
var isContained = false;
if (theItem.className == "flipFolderOpen" || theItem.className == "flipFolderClosed") isContained = true; else while (theItem.parentElement || theItem.parentNode) {
if (theItem.className == "flipStatic" || theItem.className == "flipFolderOpen" || theItem.className == "flipFolderClosed") {
isContained = (theItem.className == "flipFolderOpen" || theItem.className == "flipFolderClosed");
break;
}
theItem = (theItem.parentElement) ? theItem.parentElement : theItem.parentNode;
}
}
var toOpenFlip = (isContained && theItem.className == "flipFolderClosed");
if (!flipOpenMultipleMenus && (toOpenFlip || theItem.className == "flipStatic")) {
if (theItem.parentElement || theItem.parentNode) {
var parentUL = (theItem.parentElement) ? theItem.parentElement : theItem.parentNode;
for (var i = 0; i < parentUL.childNodes.length; i++) closeFlip(parentUL.childNodes[i]);
}
}
if (isContained) {
if (toOpenFlip) openFlip(theItem); else closeFlip(theItem);
}
}
function setAllFlips(startElement, newSetting) {
if (typeof startElement == "undefined") var startElement = document;
if (typeof newSetting == "undefined") var newSetting = "closed";
var aUL = startElement.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var parentFlip = aUL[i].parentElement ? aUL[i].parentElement : aUL[i].parentNode;
openCloseFlip(parentFlip, newSetting);
}
}
function openAllFlips(startElement) {
setAllFlips(startElement, "open");
}
function closeAllFlips(startElement) {
setAllFlips(startElement, "closed");
}
function initFlip(startElement) {
if (!document.createElement) return false;
if (!startElement || !startElement.nodeName) {
var aUL = document.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
if (flipLoadingMessage != "") window.status = flipLoadingMessage + " " + parseInt((i / (aUL.length - 1)) * 100, 10) + "%";
var curUL = aUL[i];
if (curUL.className == "flipMenu") {
initFlip(curUL);
// ## Fix text selecting problem in Mozilla
curUL.onselectstart = new Function("return false");
curUL.onmousedown = new Function("return false");
curUL.onclick = new Function("return true");
}
}
if (flipSaveMenuState) loadMenuState();
if (flipLoadingMessage != "") window.status = "";
return true;
}
if (startElement.className == "flipMenu") startElement.style.display = "";
if (!startElement.childNodes || startElement.childNodes.length == 0) return false;
if (typeof flipIDCur == "undefined") flipIDCur = 0;
if (!startElement.initialised) {
var aUL = startElement.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) aUL[i].style.display = "none";
}
for (var i = 0; i < startElement.childNodes.length; i++) {
var curNode = startElement.childNodes[i];
if (curNode.nodeName == "LI") {
flipIDCur++;
curNode.flipID = flipIDCur;
var nodeHasChildren = curNode.getElementsByTagName("UL").length > 0;
if (nodeHasChildren) {
if (flipImages && curNode.flipClosed) curNode.style.listStyleImage = "url(" + curNode.flipClosed + ")";
if (curNode.className == null || curNode.className == "") curNode.className = "flipFolderClosed";
} else {
curNode.className = "flipStatic";
if (flipImages && !curNode.style.listStyleImage) {
if (!curNode.flipStatic) curNode.flipStatic = flipImg_static;
curNode.style.listStyleImage = "url(" + curNode.flipStatic + ")";
}
}
if (!curNode.flipOpen) curNode.flipOpen = flipImg_open;
if (!curNode.flipClosed) curNode.flipClosed = flipImg_closed;
if (curNode.flipIsOpen) openFlip(curNode);
}
}
startElement.initialised = true;
}
The rest of the js file is:
Code:
function rootOfFlip(flipID, startElement) {
function containsFlip(startElement, flipID) {
var flipFound = false;
var i = 0;
while (i < startElement.childNodes.length && !flipFound) {
var curNode = startElement.childNodes[i];
flipFound = (curNode.flipID == flipID) ? true : containsFlip(curNode, flipID);
i++;
}
return flipFound;
}
var rootFlip = null;
if (!startElement || !startElement.nodeName) {
var aUL = document.getElementsByTagName("UL");
var i = 0;
while (rootFlip == null && i < aUL.length) {
var curUL = aUL[i];
if (curUL.nodeName == "UL" && curUL.className == "flipMenu") rootFlip = rootOfFlip(flipID, curUL);
i++;
}
return rootFlip;
}
if (startElement.childNodes) for (var i = 0; i < startElement.childNodes.length; i++) {
var curNode = startElement.childNodes[i];
if (curNode.flipID == flipID || containsFlip(curNode, flipID)) rootFlip = curNode;
}
return rootFlip;
}
function getCookie(cookieName) {
var allCookies = document.cookie;
var indexStr = allCookies.indexOf(cookieName + "=");
if (indexStr == -1) return "";
indexStr = allCookies.indexOf("=", indexStr) + 1;
var endStr = allCookies.indexOf(";", indexStr);
if (endStr == -1) endStr = allCookies.length;
return unescape(allCookies.substring(indexStr, endStr));
}
function inArray(someID, someArray) {
for (var i = 0; i < someArray.length; i++) if (someArray[i] == someID) return true;
return false;
}
function getMenuState(startElement) {
if (!startElement.childNodes || startElement.childNodes.length == 0) return "";
var openItems = "";
var aUL = startElement.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var curNode = aUL[i];
var parentFlip = (curNode.parentElement) ? curNode.parentElement : curNode.parentNode;
if (curNode.style.display == "" && parentFlip.flipID) openItems += " " + parentFlip.flipID;
}
return openItems;
}
function putMenuState(startElement) {
if (!startElement.childNodes || startElement.childNodes.length == 0) return false;
var aUL = startElement.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var curNode = aUL[i];
var parentFlip = (curNode.parentElement) ? curNode.parentElement : curNode.parentNode;
if (inArray(parentFlip.flipID, aOpenItems)) {
openFlip(parentFlip);
if (typeof prevFlipRoot == "undefined") {
var testRoot = rootOfFlip(parentFlip.flipID);
if (testRoot.flipID == parentFlip.flipID) prevFlipRoot = testRoot;
}
}
}
}
function saveMenuState() {
if (flipSaveMenuState) {
var aUL = document.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var curUL = aUL[i];
var curID = curUL.id ? curUL.id : i;
if (curUL.className == "flipMenu") document.cookie = cookiePrefix + curID + "=" + getMenuState(curUL) + ";";
}
}
}
function loadMenuState() {
var aUL = document.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var curUL = aUL[i];
var curID = curUL.id ? curUL.id : i;
if (curUL.className == "flipMenu") {
var savedState = String(getCookie(cookiePrefix + curID));
if (savedState != "") {
aOpenItems = savedState.split(" ");
putMenuState(curUL);
}
}
}
addEvent(window, "unload", saveMenuState);
}
function clearMenuState(flipMenuID) {
if (typeof flipMenuID == "undefined") {
var aUL = document.getElementsByTagName("UL");
for (var i = 0; i < aUL.length; i++) {
var curUL = aUL[i];
var curID = curUL.id ? curUL.id : i;
if (curUL.className == "flipMenu") document.cookie = cookiePrefix + curID + "=;";
}
} else document.cookie = cookiePrefix + flipMenuID + "=;";
}
cookiePrefix = document.location.pathname + "_";
addEvent(document, "click", toggleFlip);
if (flipInitOnLoad) addEvent(window, "load", initFlip);
FlipMenu
I'm using this javascript to generate an Accordion menu. With the html static on the page it works fine. The issue I'm having is that in my code I'm going to the serverside to select some records and then repopulate the html portion with info from my records. The html comes back fine, but after it comes back the flip menu function are not working. Is there a way to reload the javascript so that the newly updated html recognizes it.
Thanks
Michelle
I don't know if this is your problem or not ( I have a Linux box--I have to go elsewhere to test things on IE) but it could be that your HTML is your problem.
<body onLoad=closeAllFlips();> really should read <body onload="closeAllFlips()">
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Bookmarks