hide div in Iframe

[Boxhead]

Are you sitting comfortably?!

I have a html page with an iframe (pageFrame) in the middle.

Into this iframe loads the pages.

One of these pages (shopwindow) is spilt into 3 more iframes - 1 on the left (productFrame) and two on the right (catalogueFrame and modelFrame.)

The html page has a javascript dropdown menu in the top right corner.

The page with the three iframes has a html select menu in the top right iframe (modelFrame).

The problem - When the 'shopwindow' page is open, the javascript dropdown, appears behind the select menu in the 'model' iframe (z value is lower). This is a well documented problem, which I intend to overcome by including the select menu in a div tag and hiding this div with javascript when the javascript menu is rolled over.

Firstly - how do I target the div in this iframe?
Secondly - how do I get this javascript to run ONLY if the 'shopwindow' page is open, so it doesnt trip looking for a div that isnt there?

Phew!!

Any solutions or suggestions?

Monkey

[glenngv]

http://www.codingforum.net/showthrea...highlight=shim

[Boxhead]

Phew! At first glance I thought this looked easy, but i'm missing something!!

Are you aware of the Dreamweaver Javascript popup menu?

I have one of those. I put the iframe on the page -

<iframe
id="DivShim"
src="javascript:false;"
scrolling="no"
frameborder="0"
style="position:absolute; top:0px; left:0px; display:none;"> </iframe>

and there is a select menu below the button that triggers the javascript div. But it doesnt work! What have I missed?

Monkey

[glenngv]

Did you see the simple demo from the author?

[Boxhead]

Yes

I can set the IfrRef var to my Divshim but I dont know what my DivRef is!

As mentioned, I am using the Dreamweaver popup menu, but I can work out what the div it loads is called! Do you know the DW menu - if not I could post the code for you to have a look?



I have had another look, and I'm not sure it is even using a div!

[glenngv]

DivRef is your reference to your popup menu, whatever tag the DW menu uses for the popup.

[Boxhead]

Sorry, wasnt very clear - I know what the DivRef is as in what its function is in the code, but I cant find what DW has called the Div it uses for the drop down!! Here is the code for the drop down, would you mind finding what the div is for me

Cheers

[glenngv]

It's such a long and complicated code and I'm quite lazy to look for it but here it goes...

try:

var DivRef = document.getElementById('menuContainer');

or if it that doesn't work:

if (document.layers) {
...
} else if (FIND("menuItem0")) {
	[b]var l = menu.menuLayer || menu;[/b]
	hideActiveMenus();
	if (typeof(l) == "string") l = FIND(l);
	window.ActiveMenu = l;
	var s = l.style;
	s.visibility = "inherit";
	if (x != "relative") {
		s.pixelLeft = x || (window.pageX + document.body.scrollLeft) || 0;
		s.left = s.pixelLeft + 'px';
	}
	if (y != "relative") {
		s.pixelTop = y || (window.pageY + document.body.scrollTop) || 0;
		s.top = s.pixelTop + 'px';
	}
	l.Menu.xOffset = document.body.scrollLeft;
	l.Menu.yOffset = document.body.scrollTop;
	[b]
	var IfrRef = document.getElementById('DivShim');
	l.style.display = "block";
	IfrRef.style.width = l.offsetWidth;
	IfrRef.style.height = l.offsetHeight;
	IfrRef.style.top = l.style.top;
	IfrRef.style.left = l.style.left;
	IfrRef.style.zIndex = l.style.zIndex - 1;
	IfrRef.style.display = "block";[/b]
}

Since the Iframe shim code only works for IE and the DW menu supports NS4, you should only put the iframe shim code in the if-NS4-else block.

[Boxhead]

Glenngv

I tried the first option:

var DivRef = document.getElementById('menuContainer');

and I am no longer getting an error, but the div is still below the select box -

www.nhw-wilts.org.uk/test2.asp

Am I doing something supidly wrong?



Cheers for your help

monkey

[glenngv]

I can't believe this menu uses 32 divs or so for just one menu (with 4 items) alone!

The outermost div which contains all the items is <DIV id=menuLayer0, and I think it continues to menuLayer1, menuLayer2, menuLayer3, and so on depending on the number of menus. This should be the div which you would align your iframe (DivShim) with.

So here it goes:

function mmDoHide() {
    ...
    [b]IfrRef = document.getElementById('DivShim');
    IfrRef.style.display = "none";[/b]
}

function MM_showMenu(menu, x, y, child, imgname) {
	if (!window.mmWroteMenu) return;

	...

	if (document.layers) {
		
		...
	
	} else if (FIND("menuItem0")) {

		...

		l.Menu.xOffset = document.body.scrollLeft;
		l.Menu.yOffset = document.body.scrollTop;
  
		[b]//display DivShim
		var DivRef = FIND("menuLayer0");
		var IfrRef = document.getElementById('DivShim');
		IfrRef.style.width = DivRef.offsetWidth;
		IfrRef.style.height = DivRef.offsetHeight;
		IfrRef.style.top = DivRef.style.top;
		IfrRef.style.left = DivRef.style.left;
		IfrRef.style.zIndex = DivRef.style.zIndex - 1;
		IfrRef.style.display = "block";[/b]
	}
	if (menu) window.activeMenus[window.activeMenus.length] = l;
	MM_clearTimeout();

}

I hardcoded the menu layer to "menuLayer0". I leave it to you to make it dynamic to point to the active menu layer.

And also change this:

<iframe id="DivShim" src="javascript:false"

to:

<iframe id="DivShim" src="about&#58;blank"

because the word "false" is seen for a moment as the iframe is being hidden.

[Boxhead]

WOO HOO!!!

Everything works fine now!

I didnt realise that DW had created 32 DIVs!! I have never really picked this Javascript apart (I'm not that good yet - it works so I leave it alone! )

I hardcoded the menu layer to "menuLayer0". I leave it to you to make it dynamic to point to the active menu layer.

I'm not sure what you meant by this?

Thanks for all your help

[glenngv]

I just assumed that if you have more than 1 menu, you would have menuLayer0, menuLayer1, menuLayer2, and so on. I think the DivRef should be dynamically pointed to the current active menu layer. Something like this:

//display DivShim
var DivRef = FIND("menuLayer"+currentSuffix);

But if the code works even if the there are 2 or more menus, then there's no need to change anything. It was just my assumption I would like you to know, just in case the code fails in an actual page where there are several menu items.

Wonder I was able to see the 32 divs? I use the this
view-source bookmarklet to see the actual html source even after the page has loaded.

[Boxhead]

Why dont things ever work for me?!

I have put the code on a seperate page -

<script>
javascript:ans=prompt('','');win=window[ans];if(!win)win=top;myWin=window.open('','','width=800,height=600,scrollbars,resizable,menubar');myStr= win.document.documentElement.outerHTML;myStr=myStr.replace(/\</g,'&lt;').replace(/\>/g,'&gt;');myWin.document.open();myWin.document.write('<pre>'+myStr+'</pre>');myWin.document.close();
</script>

(all on one line) and saved it as a favourite. I open my test2 page and then click on the favourite and get a pop up box with script prompt

What do I do!!!?

[glenngv]

You removed the prompt message. It asks you the name of the target frame or iframe. This is for framed pages. If you specify nothing, it will default to the outermost window which is the same as the current window in a frameless page. So what you should do is click OK or Cancel and that will display the source of current window.

[Boxhead]

I have removed the prompt message, leaving-

ans=prompt('','')

but it still doesnt work.

the page with the code on is -

www.nhw-wilts.org.uk/test3.asp

Am I being thick again ('i wish this monkey would swing off' I hear you cry!)