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.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Div hiding behind iframe

    I have pop-up Divs that are menu items. One of the selections calls up an XML page and it is loaded into an iframe just right of the menus. If you go over the menus then, half of the pop-up is behind the iframe.

    What is happening?
    Scott Stewart
    Always happy to learn from pros.

  • #2
    dga
    dga is offline
    New Coder
    Join Date
    May 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Without seeing your page and code, my guess you need to add something in the div like the following example:

    <div style="z-index:100;">

    dga

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Thanks for responding,

    I tried the z-index, both in line as you showed then I tried it in my style sheet. It didn't work.

    I read up on the z-index and it said that the iframe supports this property so I gave the iframe a zindex of 0 and the div a zindex of 100. But that didn't work either. Since the page is built from ASP I checked to make sure the code didn't do somthing to it.

    It is only covered when the XML is displayed in the IFrame. Any other page stays in the background. Here is some of the code. There is tons of it so too much to place here.;

    Code:
    Style Sheet
    
    .popup{
          position:absolute;
          visibility:hidden;
          width:10em;
          zindex:100;
    }
    #centerFrame{
          position:relative;
           zindex:-1;
    }
    #dataWindow{
    	scrolling:auto;
    	width:100%;
    	height:100%;
    	border:none;
    	background-color: #f3f3f3;
    	zindex:0;
    }
    
    
    
    default.asp
    
        <div id="centerFrame" onMouseOver="closeopendivs()" height="auto">
            <iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
        </div>
    
    in the popup building asp
    
    <div id="popwin<%=MainRS("MenuID")%>" class="popup">
    		  <table class="menutbl>"

    This is the xsl for the page that is a problem

    Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
    <html>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <body>
    <h1>Resume Of <xsl:value-of select="resume/name" /></h1>
    <xsl:value-of select="resume/photo" />
    <h3>Education:</h3>
        	<xsl:for-each select="resume/education/school">
            <h4><xsl:value-of select="school_name" /></h4><br />
    		<xsl:value-of select="start/date/month" />-
            <xsl:value-of select="start/date/day" />-
            <xsl:value-of select="start/date/year" /> To 
    		<xsl:value-of select="end/date/month" />-
    		<xsl:value-of select="end/date/day" />-
    		<xsl:value-of select="end/date/year" />
        </xsl:for-each>
    <h3>Work Background</h3>
    		 <xsl:value-of select="resume/work_background" />
    <h3>Personal Information</h3>
    		 <xsl:value-of select="resume/personal_info" />
    <h3>Additional Information</h3>
    		 <xsl:value-of select="resume/additional_info" />
    </body>
    </html>
    </xsl:template>
    </xsl:stylesheet>

    I hope someone can tell me what is goin on here.
    Scott Stewart
    Always happy to learn from pros.

  • #4
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    What browser are you on? This is the same problem as we've been seeing in form fields and plugins, that an external control is rendered on top at all times. Didn't both Microsoft and Mozilla address it some time back, though, or am I entirely mistaken?
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #5
    dga
    dga is offline
    New Coder
    Join Date
    May 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's actually z-index, not zindex ... try that.


    Code:
    Style Sheet
    
    .popup{
          position:absolute;
          visibility:hidden;
          width:10em;
          zindex:100;  // change here
    }
    #centerFrame{
          position:relative;
           zindex:-1; // and change here
    }
    #dataWindow{
    	scrolling:auto;
    	width:100%;
    	height:100%;
    	border:none;
    	background-color: #f3f3f3;
    	zindex:0; // and change hhere
    }

    dga

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Thanks again,

    Yes I also tried z-index just to be safe.

    This should be generic not just microsoft. Unfortunately I end up gravitating to IE syntax.

    It just has to be something about the XML/XSL page.

    Thanks again
    Scott Stewart
    Always happy to learn from pros.

  • #7
    dga
    dga is offline
    New Coder
    Join Date
    May 2003
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    Style Sheet
    
    .popup{
          position:absolute;
          visibility:hidden;
          width:10em;
          zindex:100;
    }
    #centerFrame{
          position:relative;
           zindex:-1;
    }
    #dataWindow{
    	scrolling:auto;
    	width:100%;
    	height:100%;
    	border:none;
    	background-color: #f3f3f3;
    	zindex:0;
    }
    
    
    
    default.asp
    These two id match what you're using in the style sheet:

    Code:
        <div id="centerFrame" onMouseOver="closeopendivs()" height="auto">
            <iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
        </div>
    This one does not match:

    Code:
    <div id="popwin<%=MainRS("MenuID")%>" class="popup">
    		  <table class="menutbl>"
    Shouldn't it be popup and not popwin? I might be wrong here.
    I'm far from an expert with style sheets.

    dga

  • #8
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    I appreciate the responses I have received to this post, however (and you just knew there would be a however), the silly div is still half way behidn the xml document being displayed.

    I have tried a lot of combinations of setting zIndexes on the different divs, but nothing seems to be able to overcome the xml. In my script I put an alert to tell me what the zIndex was when the window popped up. It was set at 100. Should be all the way on top.

    Hope someone can see what is the problem. Here are the parts of the code making it all happen.

    Code:
    styles are in a linked stylesheet.
    
    #dataWindow{
    		position:relative;
    		scrolling:auto;
    		width:100%;
    		height:100%;
    		border:none;
    		background-color: #f3f3f3;
    		zIndex:0;
    		}
    #centerFrame{
    		position:relative;
    		margin:0;
    		padding:0;
    		border:none;
    		width:100%;
    		height:100%;
    		background-color:#f3f3f3;
    		scroll:none;
    		zIndex:-1;
    		}
    
    .popup{
    	position:absolute;
    	visibility:hidden;
    	font-size:10pt;
    	font-weight:200;
    	font-family:arial;
    	text-align:center;
    	color:#000000;
    	border:thin solid black;
    	background-Color:#f3f3f3;
    	width:10em;
    	zIndex:100;
    	}
    
    
    Functions are in an included script file. 
    
    function showMenu(MainMnu){
    	closeopendivs();
    	var menunam=String(MainMnu.id);
    	var menunum=menunam.charAt(menunam.length-1);
    	var SubMnu=document.getElementById("popwin" + menunum);
    	if (SubMnu){
       	var Mnu_Position = {
    	   	x : getRealPos(MainMnu,"x"),
    	  	y : getRealPos(MainMnu,"y")
    	  	};
       	SubMnu.style.left=Mnu_Position.x -50;
       	SubMnu.style.top=Mnu_Position.y;
    	SubMnu.style.zIndex="100";
       	SubMnu.style.visibility="visible";
    	}
    }
    
    function loadPage(subLink, pgType){
    	closeopendivs();
    	switch (pgType){
    		case "Resume":
    		 	 document.all.dataWindow.src=subLink+".xml"
    			 break
    		case "asp":
    		 	 document.all.dataWindow.src=subLink+".asp"
    			 break
    	}
    	document.all.dataWindow.style.zIndex=-1;
    }
    
    
    function closeopendivs(){
        var menus=document.all.tags("div");
    	for (var i=0;i<menus.length;i++){
    	   if (menus(i).style.visibility=="visible"){
    	      menus(i).style.visibility="hidden";
    	   }
    	 }
    }
    
    This body is the default.asp page 
    
    <body onload="setup()">
    <div id="Layout" >
        <div id="header" onMouseOver="closeopendivs()">
            <!-- #include virtual="/header.asp" -->
    	</div>
        <div id="leftCol">
    	<hr align="center" width="100%">
            <!-- #include virtual="/Menus.asp" -->
    	<hr align="center" width="100%">	
       </div>
        <div id="centerFrame" onMouseOver="closeopendivs()">
            <iframe frameborder="0" id="dataWindow" name="dataWindow" onMouseOver="closeopendivs()" scrolling="auto"></iframe>
        </div>
       <div id="footer" onMouseOver="closeopendivs()">
    		 <table><tr>
    		 			<td width="20%"><img src="images/smAddress.jpg" width="119" height="100" hspace="10" border="0" align="left"></td>
    					<td><center>DW Surveyor, Inc. 131 Commerce Road, Clute, Texas, 77531 USA * (979) 265-3622</center></td>
    				</tr>
    		 </table>
    	</div>
    	<!-- #include virtual="/popupMenus.asp" -->
        <form id="subLinkForm" Method="Post" target="dataWindow">
        	  <input type="hidden" name="whatToGet" />
        </form>
    </div>
    </body>
    
    This is the XSL page  
    
    <?xml version="1.0" encoding="ISO-8859-1"?>
    
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
    <html>
    <link rel='stylesheet' href='styles.css' type='text/css' />
    <body>
    <h1>Biography:  <xsl:value-of select="resume/name" /></h1>
    <xsl:value-of select="resume/photo" />
    <h3>Education:</h3>
        	<xsl:for-each select="resume/education/school">
            <h4><xsl:value-of select="school_name" /></h4><br />
    		<xsl:value-of select="start/date/month" />-
            <xsl:value-of select="start/date/day" />-
            <xsl:value-of select="start/date/year" /> To 
    		<xsl:value-of select="end/date/month" />-
    		<xsl:value-of select="end/date/day" />-
    		<xsl:value-of select="end/date/year" />
        </xsl:for-each>
    <h3>Work Background</h3>
    		 <xsl:value-of select="resume/work_background" />
    <h3>Personal Information</h3>
    		 <xsl:value-of select="resume/personal_info" />
    <h3>Additional Information</h3>
    		 <xsl:value-of select="resume/additional_info" />
    </body>
    </html>
    </xsl:template>
    </xsl:stylesheet>
    It is a long post, but the info is necessary if I hope to get a working answer.

    Thanks everybody.
    Scott Stewart
    Always happy to learn from pros.

  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    S„o Paulo, Brazil
    Posts
    367
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This problem occurs for me while using IE5.0. So if that's the browser you are using, you have to work around it.

    I solved it by putting the content of the pop-up inside an iframe. And the iframe inside the pop-up div.
    /Daniel

  • #10
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts
    Thanks for the reply,

    I am using IE6.0 but I'll still give it a try when I get home today. It may be something that has to worked around.
    Scott Stewart
    Always happy to learn from pros.

  • #11
    Regular Coder
    Join Date
    Nov 2002
    Posts
    567
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Revisited

    I'm back again. This is the big problem. I have tried the suggestions and nothing changed. I'm thinking that the xml page which is the src of the iframe is having a zIndex higher than the popup (100). Since it is loading after the popup I guess it takes visible priority. How can I set the zIndex of the XML? If I can force it to have a zindex of < 100 then my popup should be on top.
    Scott Stewart
    Always happy to learn from pros.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Check out this thread, it may have the solution you need:

    http://www.codingforums.com/showthre...threadid=28261
    Check out the Forum Search. It's the short path to getting great results from this forum.


  •  

    Posting Permissions

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