Loading ...
Sorry, an error occurred while loading the content.
 

FW: [ydn-javascript] MENU/TABVIEW: Select Boxes in Iframes showingthrough Submenu IE

Expand Messages
  • dave@sternisc.com
    Todd- Thanks so much, I was indeed in the right location and just needed to add the zindex:2 value into the submenu s I was creating! Thanks for the help, it s
    Message 1 of 1 , Feb 15, 2008
      Todd-
      Thanks so much, I was indeed in the right location and just needed to add
      the zindex:2 value into the submenu's I was creating!

      Thanks for the help, it's working beautifully!

      Dave


      -----Original Message-----
      From: ydn-javascript@yahoogroups.com
      [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Todd Kloots
      Sent: Thursday, February 14, 2008 2:07 PM
      To: dave@...
      Cc: ydn-javascript@yahoogroups.com
      Subject: Re: [ydn-javascript] MENU/TABVIEW: Select Boxes in Iframes
      showingthrough Submenu IE

      Dave -

      The issue is that the content of each Tab has a higher z-index than
      iframe shim for the submenus. Increasing the value of each Menu
      instance's zindex configuration property will boost the iframe shim's
      z-index as well, causing it to appear properly on top of the TabView
      content. Here is an example:

      http://yuiblog.com/sandbox/yui/v241/examples/menu/example06.html
      <http://yuiblog.com/sandbox/yui/v241/examples/menu/example06.html>

      - Todd

      dave@... <mailto:dave%40sternisc.com> wrote:
      > Todd-
      > It appears we are using the latest version, although some still say
      2.3.1,
      > assuming they have not changed. Here is a link to the issue. Simple
      click
      > a link in the menu and a frame and page will come up with the select
      > showing through in IE6
      >
      > http://www.sternisc.com/yui/iframeissue.html
      <http://www.sternisc.com/yui/iframeissue.html>
      >
      > Thanks in advance, I appreciate you all being available to help us
      through
      > these types of issues so our app's turn out well!
      >
      > Dave
      >
      > Original Message:
      > -----------------
      > From: Todd Kloots kloots@... <mailto:kloots%40yahoo-inc.com>

      > Date: Thu, 14 Feb 2008 08:29:45 -0800
      > To: ydn-javascript@yahoogroups.com
      <mailto:ydn-javascript%40yahoogroups.com> , dave@...
      <mailto:dave%40sternisc.com>
      > Subject: Re: [ydn-javascript] MENU/TABVIEW: Select Boxes in Iframes
      > showingthrough Submenu IE
      >
      >
      > Hey Dave -
      >
      > I'd be happy to help you with this issue. Menu does use an iframe shim

      > to prevent the issue that you are experiencing and the iframe shim is
      > automatically applied to all submenus as well. So, not sure why you
      are
      > having this problem. Do you happen to have any CSS in your app that is

      > hiding iframe elements by default? Also - which version of YUI are you

      > using? Lastly, if you could provide me a URL to a page that
      > demonstrates this issue it'd be much easier to help me help you debug.
      >
      > - Todd
      >
      > dave@... <mailto:dave%40sternisc.com> wrote:
      >
      >> Hello all,
      >> I am David Stern, emailing from Arizona!
      >>
      >> I see z order has been addressed in YUI but I need a little help
      making
      >> sure that I am configuring the menu and tabs correctly.
      >>
      >> Current situtation: Using MenuBar and Widget.Tab to create an iframe
      >> framework to bring many disparate applications into a common
      >> interface. The
      >> issue in IE is that one of those apps has a select box the displays
      itself
      >> on top of the submenu that we are creating. Since this is IE only, I
      >> believe this is the known z-order issue with select boxes in IE.
      >>
      >> The documentation talks about positioning dynamically for a shim
      iframe to
      >> be created for IE6/5, I am not sure if this applies to the submenu as

      >> well.
      >> Basically, I am in need of a little help making sure that I am using
      the
      >> shim features correctly as they do not seem to be working out of the
      box
      >> for me.
      >>
      >> Can you all shed some light on what I will need to add to make the
      submenu
      >> stay on top when active?
      >>
      >> Thanks in advance, here are some snippets and a pic of the issue!
      >>
      >> -----Dave
      >>
      >> Example Pic: http://sternisc.com/yui/examplepic.jpg
      <http://sternisc.com/yui/examplepic.jpg>
      >> <http://sternisc.com/yui/examplepic.jpg
      <http://sternisc.com/yui/examplepic.jpg> >
      >>
      >> ***********************************
      >> Here is the submenu code:
      >> ***********************************
      >>
      >> var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", {
      >> autosubmenudisplay: true, showdelay: 250, hidedelay: 750, lazyload:
      >> true});
      >>
      >> #productsandservices { margin: 0 0 10px 0;}
      >>
      >> ***********************************
      >> Here is the iframe code for the tab:
      >> ***********************************
      >>
      >> tabTracker.push(trackerlbl);
      >> var c;
      >> c = "<IFRAME id=pagehost src="+url+" width='920' height='500'
      >> style='overflow:auto'></IFRAME>";
      >> tabView.addTab
      >> (
      >> new YAHOO.widget.Tab
      >> (
      >> {
      >> label: lbl+" <img src='images/close.gif'
      >> onClick=xit('"+trackerlbl+"')>",
      >> content: c,
      >> active: true,
      >> }
      >> )
      >> );
      >>
      >>
      >> ***********************************
      >> Here is the html code for the div:
      >> ***********************************
      >> <div id="doc2">
      >> <div id="hd">
      >> <span id="divTitle" class="fseoHeading">My Iframe Issue</span>
      >>
      >> <span id="accountLinks" class="trAdmin"><%
      if(currentUser.isPortalAdmin()
      >> || currentUser.isUserAdmin()) { %><a href="javascript:a(0);"><img
      >> src="images/wrench.png" alt="Administrator Functions"></a><% }
      >> %> <a href="javascript:doHome();"><img src="images/house_go.png"
      >> alt="Home"></a> <a href="javascript:h(0);"><img
      >> src="images/help.png" alt="Help"></a> <a
      >> href="javascript:doLogout();"><img src="images/door_out.png"
      >> alt="Logout"></a></span>
      >> <span id="greeting"
      >> class="tlAdmin">Welcome, <%out.println(displayname); %></span>
      >> </div>
      >> <div id="bd" class="menuWidth">
      >>
      >> <!-- start: primary column from outer template -->
      >> <div id="yui-main">
      >> <!-- end: primary column from outer template -->
      >> <div class="yui-b">
      >> <!-- start: stack grids here -->
      >> <div id='productsandservices' class='yuimenubar yuimenubarnav'>
      >> <div class='bd'><ul id="thelist" class='first-of-type'>
      >> </ul>
      >> <!-- start: secondary column from outer template -->
      >> <!-- end: secondary column from outer template -->
      >> </div>
      >> </div>
      >> </div>
      >> </div>
      >>
      >> <div id="main"></div>
      >>
      >> ----------------------------------------------------------
      >> mail2web - Check your email from the web at
      >> http://link.mail2web.com/mail2web <http://link.mail2web.com/mail2web>
      <http://link.mail2web.com/mail2web <http://link.mail2web.com/mail2web> >
      >>
      >>
      >>
      >
      >
      >
      > ----------------------------------------------------------
      > mail2web - Check your email from the web at
      > http://link.mail2web.com/mail2web <http://link.mail2web.com/mail2web>
      >
      >
      >





      --------------------------------------------------------------------
      myhosting.com - Premium Microsoft® Windows® and Linux web and application
      hosting - http://link.myhosting.com/myhosting
    Your message has been successfully submitted and would be delivered to recipients shortly.