Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DHTML Menus and Frames 2

Status
Not open for further replies.
Einstein47

Einstein47

Programmer
Nov 29, 2001
737
US
Hey all - I originally posted this question in the HTML, CSS forum
thread215-1381312
but the more I think about it, I should ask here.

My problem is that we are currently using frames for our web app. They look something like this:
Code: 
|=============================|
|        Menu bar             |
|=============================|
|    |                        |
| L  |      Main              |
| I  |    Content             |
| N  |                        |
| K  |                        |
| S  |                        |
|    |========================|
|    |    Status Info         |
|=============================|
We current have a Java Applet that resides in the Menu Bar area. It is able to float the dynamic menus over the Main Content frame (because it is Java). My manager wants us to move away from the Java Applet because it was written 8 years ago with MS Java - which is being phased out and the Sun Java has issues with our code (imagine that).

Long story short, I was asked to look into a way to replace our current menus with either Flash or DHTML. The big trick is that we don't want to have to retrain all the employees, we want the new code to look and function as close to the current Java Applet code. My knee jerk reaction was it was impossible. All the examples I saw were limited to a single page. Meaning that the content would have to be limited to the top menu-bar frame. Floating over the Main Content frame would be impossible.

However, the more I have been thinking about it, I have been wondering - can DHTML script to a separate frame? Meaning can I call a javascript function from the menu-bar frame and have it display a layer in the main-content frame?

If that is possible, then I can do something with DHTML that would resemble the Java Applet, but it would not be limited to the pre-21st century MS Java. Right now I really just need a yea or nay. It would be cool to have a proof of concept, but right now I just need to know if this is worth pursuing.

What do you think?

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[[]Starbase47.com]
 
Sort by date Sort by votes
What you want to do is possible. I set up a small example to show communication from one frame to another. I put the javascript in the main frameset page and call this script from the frames themselves.

Here is the code for you to play with.

Code: 
<html>
<head>
<script type="text/javascript">
   function setInnerHTML() {
       window.frames["test2Frame"].document.getElementsByTagName("body")[0].innerHTML = "";;
   }
</script>

</head>
<frameset cols="33%, *">
  <frame name="testFrame" src="test.html">
  <frame name="test2Frame" src="test2.html" />
</frameset>
</html>

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
    <head>
        <title>Testing v1</title>
    </head>
    <body>
        <input id="frameTest" type="button" value="Click Me" onclick="[!]window.parent.[/!]setInnerHTML()" />
    </body>
</html>

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
    <head>
    </head>
    <body>
        <h1>HELLO TESTER, We are going to click on a button in another frame and erase all this</h1>
    </body>
</html>


[monkey][snake] <.
 
Upvote 0 Downvote
Thank you VERY MUCH!!!!

I will give this a shot and let everyone know how it goes - who knows, maybe I can come up with a new DHTML menu for those locked into frames.

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Ok - so far so good - 1 question though.

How do I create a new div by script? I am modifying your setInnerHTML() function to accept 2 parameters. First is the x position of the left edge of the menu div. Second is the contents of the menu (right now just simple text).

My issue is that I don't know if the page in the main content frame has the "menuDiv" defined or not. If this is the first click on the menu buttons, then that div will not exist, and I will need to create it. If it does already exist, then I will need to change the contents (with the innerHTML method), and adjust the style.left so that the menu will line up under the correct button.

I'll look around to see if I can find how to create a div by script. This is actually kind of fun research.



Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
You mentioned it in thread216-1376802

I think I need to use the document.createElement("div") - I just hope that the attributes will set the name and id so I can then GET the element and modify it.

Here's to learning .....


Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Einstein, here's an example of how to check if a div exists or not, and then create it if needed:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function setText(str) {
   var theDiv = document.getElementById("theDiv");
   if (theDiv) {
      theDiv.innerHTML = str;
      alert("div existed, so it was not created");
   }
   else {
      theDiv = document.createElement("div");
      theDiv.setAttribute("id", "theDiv");
      theDiv.innerHTML = str;
      document.body.appendChild(theDiv);
      alert("div did not exist, so it was created");
   }
}

</script>
<style type="text/css"></style>
</head>
<body>

<input type="text" id="myText" />
<input type="button" value="set text to div" onclick="setText(document.getElementById('myText').value)" />

</body>
</html>

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Oh, hi, I just now read the replies to this thread.

I'd listen to what kaht has to say, even though he is a noob.

[monkey][snake] <.
 
Upvote 0 Downvote
indeed [thumbsup2]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
WOO HOO!!!

I am getting so close.

Of course since I am scripting to a different frame my code looks a little messier:
Code: 
  <script language="javascript" src="PopupMenu.js" type="text/javascript"></script>
  <script type="text/javascript">
	var menuDIv;
    function setInnerHTML(x,menu) {
      menuDiv = window.frames["mainFrame"].document.getElementById("menuDiv");
      if (menuDiv && menuDiv.style) {
        menuDiv.innerHTML = menu;
        menuDiv.style.left = x+"px";
		menuDiv.style.visibility = "visible";
      }
	  else {
		var newElement = window.frames["mainFrame"].document.createElement("div");
		newElement.setAttribute("name", "menuDiv");
		newElement.setAttribute("id", "menuDiv");
		newElement.setAttribute("style","position:absolute; visibility: hidden; border:1px solid black; width: 100px; height: 48px; background-color: #d4d4d4;");
		newElement.innerHTML=menu;
		window.frames["mainFrame"].document.body.appendChild(newElement);

		var win = new PopupMenu('menuDiv');
		win.autoHide();
		win.populate(menu);
		win.showPopup(x,0);
	  }
    }
I bet you are wondering about that PopupMenu.js include. That is a modified script from Matt Kruse - shown here:
Code: 
// ===================================================================
// Author: Matt Kruse <matt@mattkruse.com>
// WWW: [URL unfurl="true"]http://www.mattkruse.com/[/URL]
//
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
//
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download. Instead,
// please just point to my URL to ensure the most up-to-date versions
// of the files. Thanks.
// ===================================================================


/* 
PopupMenu.js
Author: Matt Kruse (and Einstein)
Last modified: 3/21/02 (6/25/07)

DESCRIPTION: This object allows you to easily and quickly popup a window
in a certain place. The window can either be a DIV or a separate browser
window.

COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small
positioning errors - usually with Window positioning - occur on the 
Macintosh platform. Due to bugs in Netscape 4.x, populating the popup 
window with <STYLE> tags may cause errors.

USAGE:
// Create an object for a WINDOW popup
var win = new PopupMenu(); 

// Create an object for a DIV window using the DIV named 'mydiv'
var win = new PopupMenu('mydiv'); 

// Set the window to automatically hide itself when the user clicks 
// anywhere else on the page except the popup
win.autoHide(); 

// Show the window relative to the anchor name passed in
win.showPopup(anchorname);

// Hide the popup
win.hidePopup();

// Set the size of the popup window (only applies to WINDOW popups
win.setSize(width,height);

// Populate the contents of the popup window that will be shown. If you 
// change the contents while it is displayed, you will need to refresh()
win.populate(string);

// Refresh the contents of the popup
win.refresh();

// Specify how many pixels to the right of the anchor the popup will appear
win.offsetX = 50;

// Specify how many pixels below the anchor the popup will appear
win.offsetY = 100;

NOTES:
1) Requires the functions in AnchorPosition.js

2) Your anchor tag MUST contain both NAME and ID attributes which are the 
   same. For example:
   <A NAME="test" ID="test"> </A>

3) There must be at least a space between <A> </A> for IE5.5 to see the 
   anchor tag correctly. Do not do <A></A> with no space.

4) When a PopupMenu object is created, a handler for 'onmouseup' is
   attached to any event handler you may have already defined. Do NOT define
   an event handler for 'onmouseup' after you define a PopupMenu object or
   the autoHide() will not work correctly.
*/ 

// Set the position of the popup window based on the anchor
function PopupMenu_getXYPosition(anchorname) {
    //alert(" get X Y Pos");
	var coordinates;
	if (this.type == "WINDOW") {
		coordinates = getAnchorWindowPosition(anchorname);
		}
	else {
		coordinates = getAnchorPosition(anchorname);
		}
	this.x = coordinates.x;
	this.y = coordinates.y;
	}
// Set width/height of DIV/popup window
function PopupMenu_setSize(width,height) {
	//alert("set size");
	this.width = width;
	this.height = height;
	}
// Fill the window with contents
function PopupMenu_populate(contents) {
	//alert("populate: "+contents);
	this.contents = contents;
	this.populated = false;
	}
// Refresh the displayed contents of the popup
function PopupMenu_refresh() {
	if (this.divName != null) {
		//alert("refresh div: "+this.divName);
		// refresh the DIV object
		if (this.use_gebi) {
			//alert("set innerHTML: "+ this.contents);
			//document.getElementById(this.divName).innerHTML = this.contents;
			window.frames["mainFrame"].document.getElementById(this.divName).innerHTML = this.contents;
			}
		else if (this.use_css) { 
			document.all[this.divName].innerHTML = this.contents;
			}
		else if (this.use_layers) { 
			var d = document.layers[this.divName]; 
			d.document.open();
			d.document.writeln(this.contents);
			d.document.close();
			}
		}
	else {
		if (this.popupWindow != null && !this.popupWindow.closed) {
			this.popupWindow.document.open();
			this.popupWindow.document.writeln(this.contents);
			this.popupWindow.document.close();
			this.popupWindow.focus();
			}
		}
	}
// Position and show the popup, relative to an anchor object
function PopupMenu_showPopup(xpos, ypos) {
	//alert(" x=" + xpos +", y=" + ypos);
	//this.getXYPosition(anchorname);
	this.x = xpos;
	this.y = ypos;
	this.x += this.offsetX;
	this.y += this.offsetY;
	if (!this.populated && (this.contents != "")) {
		this.populated = true;
		this.refresh();
		}
	if (this.divName != null) {
		// Show the DIV object
		if (this.use_gebi) {
			window.frames["mainFrame"].document.getElementById(this.divName).style.left = this.x +"px";
			window.frames["mainFrame"].document.getElementById(this.divName).style.top = this.y +"px";
			window.frames["mainFrame"].document.getElementById(this.divName).style.visibility = "visible";
			}
		else if (this.use_css) {
			document.all[this.divName].style.left = this.x;
			document.all[this.divName].style.top = this.y;
			document.all[this.divName].style.visibility = "visible";
			}
		else if (this.use_layers) {
			document.layers[this.divName].left = this.x;
			document.layers[this.divName].top = this.y;
			document.layers[this.divName].visibility = "visible";
			}
		}
	else {
		if (this.popupWindow == null || this.popupWindow.closed) {
			// If the popup window will go off-screen, move it so it doesn't
			if (screen && screen.availHeight) {
				if ((this.y + this.height) > screen.availHeight) {
					this.y = screen.availHeight - this.height;
					}
				}
			if (screen && screen.availWidth) {
				if ((this.x + this.width) > screen.availWidth) {
					this.x = screen.availWidth - this.width;
					}
				}
			this.popupWindow = window.open("about:blank","window_"+anchorname,
   "toolbar=no,location=no,status=no,menubar=no, scrollbars=auto,resizable,alwaysRaised,dependent, titlebar=no,width="+this.width
  +",height="+this.height+",screenX="+this.x
  +",left="+this.x+",screenY="+this.y+",top="+this.y+"");
			}
		this.refresh();
		}
	}
// Hide the popup
function PopupMenu_hidePopup() {
	//alert("hide popup");
	if (this.divName != null) {
		if (this.use_gebi) {
			window.frames["mainFrame"].document.getElementById(this.divName).style.visibility = "hidden";
			}
		else if (this.use_css) {
			document.all[this.divName].style.visibility = "hidden";
			}
		else if (this.use_layers) {
			document.layers[this.divName].visibility = "hidden";
			}
		}
	else {
		if (this.popupWindow && !this.popupWindow.closed) {
			this.popupWindow.close();
			this.popupWindow = null;
			}
		}
	}
// Pass an event and return whether or not it was the popup DIV that was clicked
function PopupMenu_isClicked(e) {
	//alert(" clicked ");
	if (this.divName != null) {
		if (this.use_layers) {
			var clickX = e.pageX;
			var clickY = e.pageY;
			var t = document.layers[this.divName];
			if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) {
				return true;
				}
			else { return false; }
			}
		else if (document.all) { // Need to hard-code this to trap IE for error-handling
			var t = window.event.srcElement;
			while (t.parentElement != null) {
				if (t.id==this.divName) {
					return true;
					}
				t = t.parentElement;
				}
			return false;
			}
		else if (this.use_gebi) {
			var t = e.originalTarget;
			while (t.parentNode != null) {
				if (t.id==this.divName) {
					return true;
					}
				t = t.parentNode;
				}
			return false;
			}
		return false;
		}
	return false;
	}

// Check an onMouseDown event to see if we should hide
function PopupMenu_hideIfNotClicked(e) {
	if (this.autoHideEnabled && !this.isClicked(e)) {
		this.hidePopup();
		}
	}
// Call this to make the DIV disable automatically when mouse is clicked outside it
function PopupMenu_autoHide() {
	//alert("set autoHide");
	this.autoHideEnabled = true;
	}
// This global function checks all PopupMenu objects onmouseup to see if they should be hidden
function PopupMenu_hidePopupMenus(e) {
	for (var i=0; i<popupWindowObjects.length; i++) {
		if (popupWindowObjects[i] != null) {
			var p = popupWindowObjects[i];
			p.hideIfNotClicked(e);
			}
		}
	}
// Run this immediately to attach the event listener
function PopupMenu_attachListener() {
	if (document.layers) {
		document.captureEvents(Event.MOUSEUP);
		}
	window.popupWindowOldEventListener = document.onmouseup;
	if (window.popupWindowOldEventListener != null) {
		document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupMenu_hidePopupMenus();");
		}
	else {
		document.onmouseup = PopupMenu_hidePopupMenus;
		}
	}
// CONSTRUCTOR for the PopupMenu object
// Pass it a DIV name to use a DHTML popup, otherwise will default to window popup
function PopupMenu() {
	//alert("inside Constructor");
	if (!window.popupWindowIndex) { window.popupWindowIndex = 0; }
	if (!window.popupWindowObjects) { window.popupWindowObjects = new Array(); }
	if (!window.listenerAttached) {
		window.listenerAttached = true;
		PopupMenu_attachListener();
		}
	this.index = popupWindowIndex++;
	popupWindowObjects[this.index] = this;
	this.divName = null;
	this.popupWindow = null;
	this.width=0;
	this.height=0;
	this.populated = false;
	this.visible = false;
	this.autoHideEnabled = false;
	
	this.contents = "";
	if (arguments.length>0) {
		this.type="DIV";
		this.divName = arguments[0];
		}
	else {
		this.type="WINDOW";
		}
	//alert(this.type + ", name=" + this.divName);
	this.use_gebi = false;
	this.use_css = false;
	this.use_layers = false;
	if (document.getElementById) { this.use_gebi = true; }
	else if (document.all) { this.use_css = true; }
	else if (document.layers) { this.use_layers = true; }
	else { this.type = "WINDOW"; }
	this.offsetX = 0;
	this.offsetY = 0;
	// Method mappings
	this.getXYPosition = PopupMenu_getXYPosition;
	this.populate = PopupMenu_populate;
	this.refresh = PopupMenu_refresh;
	this.showPopup = PopupMenu_showPopup;
	this.hidePopup = PopupMenu_hidePopup;
	this.setSize = PopupMenu_setSize;
	this.isClicked = PopupMenu_isClicked;
	this.autoHide = PopupMenu_autoHide;
	this.hideIfNotClicked = PopupMenu_hideIfNotClicked;
}

This is getting me closer. Now I need to figure out the even click handler that automatically hides the div when the user clicks somewhere else on the page. And then I will have to do the actual menus - but I am getting so much further than I thought possible.

Thanks go to you too, khat! This knowledge sharing rocks.

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Ok - so far I have had great success.

I got the onclick handler working so if the user clicks off the menu, it will hide.

I got the window scrolling working so the menu will be correctly positioned.

However, if the user scrolls the page (in IE) the menu will scroll away from its desired position. Is there a way I can "listen" for when the page is scrolled and if so hide the popup menu? Or would it be better to figure out how to move the menu dynamically with the scrolling of the page?

Sorry for all these questions, but success has strengthened hopes that I might be able to do the "impossible".

If you want to see my current code - you can find it here


Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
That onscroll works great for FireFox - but it doesn't want to work for IE 6.

[red]Grrrr - why does IE need to be so non-standard.[/red]

I do really appreciate all the help. You really do deserve that tip-master recognition.

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Is there something special with IE and the onscroll event that I need to look for? This is what I'm doing to try to listen for the onscroll event. It works fine in FireFox, but IE needs something more - any clue what?
Code: 
function PopupMenu_attachListener() {
	var frameWin = window.frames["mainFrame"].document;
	if (document.layers) {
		document.captureEvents(Event.MOUSEUP | Event.SCROLL | Event.MOUSEWHEEL);
	}
	window.popupWindowOldEventListener = frameWin.onmouseup;
	if (window.popupWindowOldEventListener != null) {
		frameWin.onmouseup = new Function("window.popupWindowOldEventListener(); PopupMenu_hidePopupMenus();");
	}
	else {
		frameWin.onmouseup = PopupMenu_hidePopupMenus;
	}
// Added for scrolling to hide menu
	window.popupWindowOldScroll = frameWin.onscroll;
	if (window.popupWindowOldScroll != null) {
		frameWin.onscroll = new Function("window.popupWindowOldScroll(); PopupMenu_hidePopupMenus();");
	}
	else {
		frameWin.onscroll = PopupMenu_hidePopupMenus;
	}
// Added for scroll wheel to hide menu
	window.popupWindowOldMouseWheel = frameWin.onmousewheel;
	if (window.popupWindowOldMouseWheel != null) {
		frameWin.onmousewheel = new Function("window.popupWindowOldMouseWheel(); PopupMenu_hidePopupMenus();");
	}
	else {
		frameWin.onmousewheel = PopupMenu_hidePopupMenus;
	}
}

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Looks like you got some nice work in so far.


About your problem, I looked around some for an answer to this. It is an IE bug, and so far I've learned that if you put your code into quirks mode (essentially removing the DOCTYPE), your code will work in IE.

YOu can also get into quirks mode by typing any random character before your DOCTYPE.

I'll look more into this.

[monkey][snake] <.
 
Upvote 0 Downvote
Well, I just found a solution. In IE, you must use document.documentElement to attach the event to.

So to check to see if you are using IE, check for an instance of document.all.

I'll make changes to your onscroll code so you can understand what I'm trying to say.

Code: 
function PopupMenu_attachListener() {
    var frameWin = window.frames["mainFrame"].document;
    if (document.layers) {
        document.captureEvents(Event.MOUSEUP | Event.SCROLL | Event.MOUSEWHEEL);
    }
    window.popupWindowOldEventListener = frameWin.onmouseup;
    if (window.popupWindowOldEventListener != null) {
        frameWin.onmouseup = new Function("window.popupWindowOldEventListener(); PopupMenu_hidePopupMenus();");
    }
    else {
        frameWin.onmouseup = PopupMenu_hidePopupMenus;
    }
[!]// Added for scrolling to hide menu
   //If we are browsing with IE, reassign frameWin
    if (document.all) {    
        frameWin = window.frames["mainFrame"].document.documentElement;
    }
    window.popupWindowOldScroll = frameWin.onscroll;
    if (window.popupWindowOldScroll != null) {
       frameWin.onscroll = new Function("window.popupWindowOldScroll(); PopupMenu_hidePopupMenus();");
    }
    else {
       frameWin.onscroll = PopupMenu_hidePopupMenus;
    }
[/!]
// Added for scroll wheel to hide menu
    window.popupWindowOldMouseWheel = frameWin.onmousewheel;
    if (window.popupWindowOldMouseWheel != null) {
        frameWin.onmousewheel = new Function("window.popupWindowOldMouseWheel(); PopupMenu_hidePopupMenus();");
    }
    else {
        frameWin.onmousewheel = PopupMenu_hidePopupMenus;
    }
}



[monkey][snake] <.
 
Upvote 0 Downvote
Well - I tried it and still no luck. What browser are you using? Try it here and let me know, please.
I really appreciate this help - BTW. I have been Googling up a storm, and can't seem to find something that will help.

Just so you know - this is for an in-house web app, so we ONLY support IE5.5 and 6.0 right now. (So, why am I testing in FF - because I want to know that I am standards compliant - so there).

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Hi, sorry I didn't get to you sooner I had left work for the day.

I'm using the dreaded IE6, so if a problem is happening, I'll see it.

I'll paste the test code I made, so you can copy/paste it and see what I did.

Code: 
<html>
<head>
<script type="text/javascript">
function addListen() {
   if (document.all) {
      window.frames["testFrame"].document.documentElement.onscroll = new Function("shell(); hell();");
      alert("Hey you");
   }
   else {
      window.frames["testFrame"].document.onscroll = new Function("shell(); hell();");
      alert("Poop");
   }
}   

function hell() {
   alert("hi");
}

function shell() {
   alert("kli");
}

</script>
</head>
<frameset cols="33%, *" onload="addListen()">
  <frame name="testFrame" src="test.html">
  <frame name="test2Frame" src="test2.html" />
</frameset>
</html>

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head> 
<title>Intelligent Forms</title>
<script type="text/javascript">



function change(userInput) {
  if (userInput.value == 'usa') {
    document.getElementById("StateDiv2").style.display = 'none';
    document.getElementById("StateDiv1").style.display = 'block';
    document.getElementById("stateNameDD").focus();
  }
  else {
    document.getElementById("StateDiv1").style.display = 'none';
    document.getElementById("StateDiv2").style.display = 'block';
    document.getElementById("stateProvText").focus();
  }
}
</script>
<style type="text/css">
div.rowDiv {
   height:25px;
   margin:0px 0px 10px 0px;
}

div#stateDiv1 {
   display:none;   
}
</style>
</head>
<body>
<form id="mainform" method="post" action="test2.html">
  <div class="rowDiv">
     Select a country
     <select id="countryDD" onchange="change(this)">
       <option value="cv1">Country 1</option>
       <option value="cv2">Country 2</option>
       <option value="usa">USA</option>
       <option value="cv4">Country 4</option>
     </select>
  </div>   
  <div id="stateDiv1" class="rowDiv">
    State/Province:
    <select id="stateNameDD">
       <option value="sv1">Select a State</option>
       <option value="sv2">MA</option>
       <option value="sv3">NH</option>
       <option value="sv4">NY</option>
    </select>
  </div>
  <div id="StateDiv2" class="rowDiv">
     State/Province:
     <input type="text" id="stateProvText" />
  </div>
  <div>
    <input type="submit" />
    <input type="reset" />
  </div> 
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  <br />
  <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  <br />
  <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
      <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
      <br />
      <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
      <br />
      <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    <br />
  <br />Hello
</form>
</body>
</html>

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
    <head>
    </head>
    <body>
        <h1>HELLO TESTER, We are going to click on a button in another frame and erase all this</h1>
    </body>
</html>

[monkey][snake] <.
 
Upvote 0 Downvote
WOO HOO - I figured it out. I'm hoping that I'm not adding too much complexity to this function, but the onscroll is referenced from the [red]document.body[/red] object for IE6. So I changed the attachListener like you indicated but used the [red]window.frames["mainFrame"].document.body[/red] object.

This posed a different JavaScript error which took me a while to pin down. I found it in the isClicked() function here:
Code: 
// Pass an event and return whether or not it was the popup DIV that was clicked
function PopupMenu_isClicked(e) {
	if (this.divName != null) {
		if (this.use_layers) {
			var clickX = e.pageX;
			var clickY = e.pageY;
			var t = document.layers[this.divName];
			if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) {
				return true;
			}
			else { return false; }
		}
		else if (document.all) { // Need to hard-code this to trap IE for error-handling
			var t = window.frames["mainFrame"].event.srcElement;
			[COLOR=red yellow]if (t) {[/color]
			  while (t.parentElement != null) {
				if (t.id==this.divName) {
					return true;
				}
				t = t.parentElement;
			  }
			[COLOR=red yellow]}[/color]
			return false;
		}
		else if (this.use_gebi) {
			var t = e.originalTarget;
			while (t.parentNode != null) {
				if (t.id==this.divName) {
					return true;
				}
				t = t.parentNode;
			}
			return false;
		}
		return false;
	}
	return false;
}
I highlighted what I had to add because from the onscroll event DOES NOT have a srcElement so t is null. Once I trapped that - the scrolling now hides the menuDiv correctly.

I am glad to have this basic functionality in the bag. Now - on to making the menus actually work (with multi-layers, and control of where the link opens). I will search for existing DHTML menus and see what I can use there. Not to mention that I need to make it easy enough for a secretary to maintain. (ok, she is my tech lead, but her comprehension of JavaScript leaves MUCH to be desired and I don't want to have to fix this every time a change in the menu structure is made.)

Thank you VERY much again for sticking with me on this. You are very deserving of the Tip-Master award (maybe you will get it again for this week [medal])

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[&#91;]Starbase47.com]
 
Upvote 0 Downvote
Thank you VERY much again for sticking with me on this. You are very deserving of the Tip-Master award (maybe you will get it again for this week )
Click to expand...

Thanks, that's nice of you.

Also, I'm real glad you got it figured out, that's good work.

[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
575
trevil620
trevil620
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
566
nanbread
nanbread
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
573
rogerte
rogerte
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
624
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
185
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top