...

View Full Version : hide div in Iframe



Boxhead
02-11-2004, 04:15 PM
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
02-12-2004, 05:37 AM
http://www.codingforums.com/showthread.php?s=&threadid=28261&highlight=shim

Boxhead
02-12-2004, 11:28 AM
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
02-13-2004, 01:52 AM
Did you see the simple demo (http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx) from the author?

Boxhead
02-13-2004, 01:52 PM
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! :confused:

glenngv
02-16-2004, 01:46 AM
DivRef is your reference to your popup menu, whatever tag the DW menu uses for the popup.

Boxhead
02-16-2004, 10:10 AM
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:D

Cheers

glenngv
02-17-2004, 04:01 AM
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")) {
var l = menu.menuLayer || menu;
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;

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";
}


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
02-17-2004, 02:27 PM
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?

:confused:

Cheers for your help

monkey

glenngv
02-18-2004, 03:43 AM
I can't believe this menu uses 32 divs or so for just one menu (with 4 items) alone! :eek:

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() {
...
IfrRef = document.getElementById('DivShim');
IfrRef.style.display = "none";
}

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;

//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";
}
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
02-18-2004, 09:50 AM
WOO HOO!!!:D

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
:thumbsup:

glenngv
02-18-2004, 10:24 AM
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 (http://www.codingforums.com/showthread.php?s=&threadid=32851#post169853) to see the actual html source even after the page has loaded.

Boxhead
02-18-2004, 11:33 AM
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!!!?:confused:

glenngv
02-18-2004, 12:21 PM
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
02-18-2004, 01:41 PM
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!)

glenngv
02-19-2004, 07:39 AM
Bookmarklets (http://www.bookmarklets.com/about/) are not meant to be executed that way. They are bookmarks, as the name suggests, the usual bookmarks or Favorites link. But instead of containing URLs, it contains small javascript codes that will be executed once clicked from the menu.

Once you have saved the bookmarklet to your Favorites menu, open your test2 page (http://www.nhw-wilts.org.uk/test2.asp) and then click that bookmark to see the actual source of the loaded page which is test2.asp.

Boxhead
02-19-2004, 01:19 PM
sorry, got it now - cool feature, I have found several that are really useful already

Cheers



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum