Web Analytics Made Easy -
StatCounter hide div in Iframe - CodingForum

Announcement

Collapse
No announcement yet.

hide div in Iframe

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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; Feb 11, 2004, 11:19 AM.
    Monkey

    My head hurts!

  • #2
    http://www.codingforum.net/showthrea...highlight=shim
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      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
      Monkey

      My head hurts!

      Comment


      • #4
        Did you see the simple demo from the author?
        Glenn
        vBulletin Mods That Rock!

        Comment


        • #5
          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; Feb 13, 2004, 09:09 AM.
          Monkey

          My head hurts!

          Comment


          • #6
            DivRef is your reference to your popup menu, whatever tag the DW menu uses for the popup.
            Glenn
            vBulletin Mods That Rock!

            Comment


            • #7
              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
              Monkey

              My head hurts!

              Comment


              • #8
                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")) {
                	[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.
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  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!

                  Comment


                  • #10
                    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() {
                        ...
                        [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.
                    Glenn
                    vBulletin Mods That Rock!

                    Comment


                    • #11
                      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!

                      Comment


                      • #12
                        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
                        vBulletin Mods That Rock!

                        Comment


                        • #13
                          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!

                          Comment


                          • #14
                            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
                            vBulletin Mods That Rock!

                            Comment


                            • #15
                              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!

                              Comment

                              Working...
                              X