Search the web
Sign In
New User? Sign Up
ydn-javascript · Yahoo! User Interface Library Group
  • Members Only
  • Post
  • Links
  • Polls
  • Members
  • Promote
  • Groups Labs (Beta)
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Message search is now enhanced, find messages faster. Take it for a spin.

Best of Y! Groups

   Check them out and nominate your group.
Having problems with message search? Fill out this form to ensure your group is one of the first to be migrated to the new message search system.

Messages

   Messages Help
Message #
Search:
Advanced
YUI Menu with tabsview z-index problem   Message List  
Reply | Forward Message #14951 of 52120 |
Hello there

I've combined the YUI Menus with the Tabview. In one of the tabs I
have a select. The select in the tab which is suppose to be under
the menu always is visible over the menu.

The code is below, take a look. just copy and paste this code in a
file and see yourself.

Please help. I'm stuck with this for 3 days now!

Thanks in Advance
Sri

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TabView Example - Basic From Existing Markup</title>

<link rel="stylesheet" type="text/css" href="css/example.css">

<link rel="stylesheet" type="text/css"
href="http://developer.yahoo.com/yui/build/tabview/assets/tabview.css
">
<link rel="stylesheet" type="text/css"
href="http://developer.yahoo.com/yui/build/tabview/assets/border_tabs
.css">
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/event/event.js"></script>
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/dom/dom.js"></script>
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/element/element-
beta.js"></script>
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/tabview/tabview.js"></scrip
t>

<style type="text/css">
#demo { width:30em; }
#demo .yui-content { padding:1em; } /* pad content container */
</style>

<script type="text/javascript">
YAHOO.example.init = function() {
var tabView = new YAHOO.widget.TabView('demo');
};

YAHOO.example.init();
</script>
<link rel="stylesheet" type="text/css"
href="http://developer.yahoo.com/yui/build/reset-fonts-grids/reset-
fonts-grids.css">



<!-- CSS for Menu -->

<link rel="stylesheet" type="text/css"
href="http://developer.yahoo.com/yui/build/menu/assets/menu.css">


<!-- Page-specific styles -->

<style type="text/css">

div.yui-b p {

margin:0 0 .5em 0;
color:#999;

}

div.yui-b p strong {

font-weight:bold;
color:#000;

}

div.yui-b p em {

color:#000;

}

h1 {

font-weight:bold;
margin:0 0 1em 0;
padding:.25em .5em;
background-color:#ccc;

}

#productsandservices {

margin:0 0 10px 0;

}

</style>

<!-- Namespace source file -->

<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/yahoo/yahoo.js"></script>

<!-- Dependency source files -->

<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/event/event.js"></script>
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/dom/dom.js"></script>


<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/animation/animation.js"></s
cript>

<!-- Container source file -->
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/container/container_core.js
"></script>

<!-- Menu source file -->
<script type="text/javascript"
src="http://developer.yahoo.com/yui/build/menu/menu.js"></script>

<!-- Page-specific script -->

<script type="text/javascript">

YAHOO.example.onMenuBarReady = function() {

// Animation object

var oAnim;


// Utility function used to setup animation for
submenus

function setupMenuAnimation(p_oMenu) {

if(!p_oMenu.animationSetup) {

var aItems = p_oMenu.getItemGroups();

if(aItems && aItems[0]) {

var i = aItems[0].length - 1;
var oSubmenu;

do {

oSubmenu = p_oMenu.getItem
(i).cfg.getProperty("submenu");

if(oSubmenu) {


oSubmenu.beforeShowEvent.subscribe(onMenuBeforeShow, oSubmenu, true);
oSubmenu.showEvent.subscribe
(onMenuShow, oSubmenu, true);

}

}
while(i--);

}

p_oMenu.animationSetup = true;

}

}


// "beforeshow" event handler for each submenu of
the menu bar

function onMenuBeforeShow(p_sType, p_sArgs, p_oMenu)
{

if(oAnim && oAnim.isAnimated()) {

oAnim.stop();
oAnim = null;

}

YAHOO.util.Dom.setStyle
(this.element, "overflow", "hidden");
YAHOO.util.Dom.setStyle(this.body, "marginTop",
("-" + this.body.offsetHeight + "px"));

}


// "show" event handler for each submenu of the menu
bar

function onMenuShow(p_sType, p_sArgs, p_oMenu) {

oAnim = new YAHOO.util.Anim(
this.body,
{ marginTop: { to: 0 } },
.5,
YAHOO.util.Easing.easeOut
);

oAnim.animate();

var me = this;

function onTween() {

me.cfg.refireEvent("iframe");

}

function onAnimationComplete() {

YAHOO.util.Dom.setStyle
(me.body, "marginTop", ("0px"));
YAHOO.util.Dom.setStyle
(me.element, "overflow", "visible");

setupMenuAnimation(me);

}


/*
Refire the event handler for the "iframe"
configuration property with each tween so
that the
size and position of the iframe shim remain
in sync
with the menu.
*/

if(this.cfg.getProperty("iframe") == true) {

oAnim.onTween.subscribe(onTween);

}

oAnim.onComplete.subscribe(onAnimationComplete);

}


// "render" event handler for the menu bar

function onMenuRender(p_sType, p_sArgs, p_oMenu) {

setupMenuAnimation(p_oMenu);

}


// Instantiate and render the menu bar

var oMenuBar = new YAHOO.widget.MenuBar
("productsandservices", { autosubmenudisplay:true, hidedelay:750,
lazyload:true });


// Subscribe to the "render" event

oMenuBar.renderEvent.subscribe(onMenuRender,
oMenuBar, true);

oMenuBar.render();

};


// Initialize and render the menu bar when it is
available in the DOM

YAHOO.util.Event.onContentReady("productsandservices",
YAHOO.example.onMenuBarReady);

</script>

</head>
<body>

<!-- start: primary column from outer template -->
<div id="yui-main">
<div class="yui-b">
<!-- start: stack grids here -->

<div id="productsandservices"
class="yuimenubar">
<div class="bd">
<ul class="first-of-type">
<li class="yuimenubaritem first-
of-type"><a href="http://communication.yahoo.com">Menu1</a>
<div
id="pim" class="yuimenu">
<div
class="bd">
<ul
class="first-of-type">

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

</ul>
</div>
</div>
</li>
</ul>

<ul class="first-of-type">
<li class="yuimenubaritem first-
of-type"><a href="http://communication.yahoo.com">Menu2</a>
<div
id="pim" class="yuimenu">
<div
class="bd">
<ul
class="first-of-type">

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

</ul>
</div>
</div>
</li>
</ul>
<ul class="first-of-type">
<li class="yuimenubaritem first-
of-type"><a href="http://communication.yahoo.com">Menu3</a>
<div
id="pim" class="yuimenu">
<div
class="bd">
<ul
class="first-of-type ">

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

<li class="yuimenuitem"><a
href="http://mail.yahoo.com">menuItem1</a></li>

<li class="yuimenuitem"><a
href="http://addressbook.yahoo.com">W</a></li>

<li class="yuimenuitem"><a
href="http://calendar.yahoo.com">menuItem2</a></li>

<li class="yuimenuitem"><a
href="http://notepad.yahoo.com">menuItem4</a></li>

</ul>
</div>
</div>

</li>
</ul>

</div>

</div>
</div>
</div>
</div>
<div id="doc">

<p> <select> <option>This Works!</option> <option>works</option>
<option>Works</option></select> </p>

<h1>TabView Example - Basic From Existing Markup</h1>
<p>This example demonstrates how to create a basic TabView
widget from existing markup.</p>

<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a
href="#lorem"><em>lorem</em></a></li>
<li><a href="#ipsum"><em>ipsum</em></a></li>
<li><a href="#dolor"><em>dolor</em></a></li>
</ul>
<div class="yui-content">
<div id="lorem">
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat.</p>
<select>
<option>Doesn't work
</option> <option>Doesn't work</option> <option>Doesn't work</option>
</select>


</div>
<div id="ipsum">
<ul>
<li><a href="#">Lorem ipsum dolor sit
amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit
amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit
amet.</a></li>
<li><a href="#">Lorem ipsum dolor sit
amet.</a></li>
</ul>
</div>
<div id="dolor">

<form action="#">
<fieldset>
<legend>Lorem Ipsum</legend>
</fieldset>
</form>

</div>

</div>
</div>
</div>
</body>
</html>
Wed Jun 27, 2007 10:31 am

Show Message Option
gnsri_web
Offline Offline
Send Email Send Email

Forward 		Message #14951 of 52120 |
Expand Messages Author Sort by Date

Hello there I've combined the YUI Menus with the Tabview. In one of the tabs I have a select. The select in the tab which is suppose to be under the menu... 		gnsri_web
Offline Send Email 		Jun 27, 2007
10:31 am

Hi manish, Thanks for the reply, but I was not able to find the function "onbeforeShowEvent" in any of the js files, can you please point me to the correct js...
gnsri_web
Offline Send Email 		Jun 27, 2007
3:24 pm

I recently had the same exact problem. I got arround it by setting the zIndex property of the menubar really high (like 99). But when I first tried this, it...
c_j_pierce
Offline Send Email 		Jul 26, 2007
10:11 pm
< Prev Topic  |  Next Topic >
Message #
Search:
Advanced
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help