Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hide div in Iframe

    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
    Last edited by Boxhead; 02-11-2004 at 04:19 PM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Did you see the simple demo from the author?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #5
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    Last edited by Boxhead; 02-13-2004 at 02:09 PM.
    Monkey

    My head hurts!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    DivRef is your reference to your popup menu, whatever tag the DW menu uses for the popup.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Attached Files Attached Files
    Monkey

    My head hurts!

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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:

    Code:
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Monkey

    My head hurts!

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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:
    Code:
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #11
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Monkey

    My head hurts!

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!!?
    Monkey

    My head hurts!

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #15
    Regular Coder
    Join Date
    Dec 2003
    Location
    UK
    Posts
    106
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!)
    Monkey

    My head hurts!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •