PDA

View Full Version : [CLOSED] Menu and Image z-index



cwolcott
Apr 15, 2015, 11:52 PM
This is a larger example than what I wanted to send, but it demonstrates my issue.

This combines two previous threads that you helped iron out awhile ago.

The Image Caption, Post #4 (http://forums.ext.net/showthread.php?55781-CLOSED-Image-Caption&p=258231&viewfull=1#post258231) thread discussed how to apply the film layer to solve my issue. The Image Caption Film Layer (http://forums.ext.net/showthread.php?55991-CLOSED-Image-Caption-Film-Layer) thread completed some minor issues.
The Menu not collapsing (http://forums.ext.net/showthread.php?56911-CLOSED-Menu-not-collapsing) thread fixed some general issues with the menu and a more specific IE7/IE8 issue.


Setting the z-index of the film layer at 19002 allows the tooltip not to flicker, but the submenu collapses when the mouse moves over the image.
Setting the z-index of the film layer at 19001 allows the submenu to show when the mouse moves over the image, but the tooltip flickers when the mouse moves over it.



StyleSpec = "position: absolute; z-index: 19002; background-color: red; opacity: 0.0; filter:Alpha(opacity=0);",

I can't figure out where to apply the z-indez on the submenu so that it won't collapse when moving over the image.

Full example:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
public class MyImage
{
public string Filename { get; set; }
public string Title { get; set; }
public string Credit { get; set; }
public string Caption { get; set; }
public DateTime DateAdded { get; set; }
public Boolean Active { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
List<MyImage> images = GetImages();
int imageIndex = 0;

foreach (MyImage myImage in images)
{
imageIndex++;
String imageUrl = String.Format("images/{0}", myImage.Filename);
String id = String.Format("Image{0}", imageIndex);

Ext.Net.Image img = new Ext.Net.Image
{
ID = id,
ImageUrl = imageUrl,
Tag = imageIndex,
Width = 480
};

String lId = String.Format("Layer{0}", imageIndex);
Container ctnr = new Container
{
ID = lId,
// Add background-color: red; opacity: 0.2; filter:Alpha(opacity=20); to style below to see the filmLayer.
// IE9 and belows require the background-color and filter:Alpha(opacity=0) to show a tooltip or it could be a z-index issue.
StyleSpec = "position: absolute; z-index: 19002; background-color: red; opacity: 0.0; filter:Alpha(opacity=0);",
CustomConfig = { new ConfigItem { Name = "layerTargetID", Value = id, Mode = ParameterMode.Value } },
Listeners = { AfterLayout = { Fn = "ApplyPanel" } }
};
if (imageIndex > 1) ctnr.Hidden = true;

string caption = String.Format("<span style='float: right'><i>{1}</i></span><b>{0}</b><hr/>{2}", myImage.Title, myImage.Credit, myImage.Caption);
String tId = String.Format("ToolTip{0}", imageIndex);
ToolTip tt = new ToolTip
{
ID = tId,
Frame = true,
MaxWidth = 479,
Width = 479,
DismissDelay = 0,
Html = caption,
BaseCls = "imageTooltip",
BodyCls = "imageTooltipBody",
CustomConfig = { new ConfigItem { Name = "getTargetXY", Value = "getConstrainedTipXY", Mode = ParameterMode.Raw },
new ConfigItem { Name = "onDocMouseDown", Value = "Ext.emptyFn", Mode = ParameterMode.Raw }}
};
ctnr.ToolTips.Add(tt);
ImageCarousel.ContentControls.Add(ctnr);

ImageCarousel.Items.Add(img);
};
}

private List<MyImage> GetImages()
{
List<MyImage> data = new List<MyImage>();

data.Add(new MyImage { Filename = "car03.jpg", Title = "BLUE COLD", Credit = "2010 Ford Mustang At SEMA 2009", Caption = "Blah", DateAdded = DateTime.Parse("2015-01-01"), Active = true });

return data;
}

</script>
<head runat="server">
<title></title>
<style type="text/css">
/* Menu body */
.wsMenu .x-menu-body {
background-color: #B9CDE5 !important;
border: 0;
}

/* Menu items */
.wsMenu .x-menu-item-link {
padding-left: 6px;
padding-right: 30px;
line-height: 18px;
font-weight: bold;
}

/* Menu mouseover item */
.wsMenu .x-menu-item-active {
border: 0 !important;
}

/* Menu mouseover item */
.wsMenu .x-menu-item-active .x-menu-item-link {
background-color: #FFFFFF !important;
background-image: none;
}

/* Menu mouseover text */
.wsMenu .x-menu-item-active .x-menu-item-text {
color: #B22222 !important;
}

/* Menu arrow */
.wsMenu .x-menu-item-arrow {
display: none;
}

/* SubMenu body */
.wsSubMenu .x-menu-body {
background-color: #FFFFFF !important;
border: 0;
}

/* SubMenu items */
.wsSubMenu .x-menu-item-link {
padding-left: 11px;
line-height: 16px;
font-weight: bold;
display: block;
background-color: #FFFFFF !important;
}

/* SubMenu mouseover item */
.wsSubMenu .x-menu-item-active {
border: 0 !important;
}

/* SubMenu mouseover item */
.wsSubMenu .x-menu-item-active .x-menu-item-link {
background-color: #DEDEDE !important;
}

/* SubMenu mouseover text */
.wsSubMenu .x-menu-item-active .x-menu-item-text {
color: #B22222 !important;
background-image: none;
}
</style>
<script type="text/javascript">
var onSubMenuMouseEnter = function () {

this.allowHide = true;
};

var onSubMenuMouseLeave = function () {

if (this.allowHide) {
this.parentMenu.deactivateActiveItem();
}
};

var onMenuItemAfterRender = function () {

this.mon(this.el, "mouseenter", function () {
this.menu.allowHide = false;
}, this);
this.mon(this.el, "mouseleave", function () {
this.parentMenu.deactivateActiveItem();
}, this);
};
</script>
<script type="text/javascript">
var getConstrainedTipXY = function () {

var me = this,
offsets, xy, dh, dw, de, bd, scrollX, scrollY, axy, sz;
imageDom = me.target.dom;
tooltipDom = this.el.dom;

xy = me.getAlignToXY(me.target, 'tl-bl');
dw = Ext.Element.getViewWidth() - 5;
dh = Ext.Element.getViewHeight() - 5;
de = document.documentElement;
bd = document.body;
scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5;
scrollY = (de.scrollTop || bd.scrollTop || 0) + 5; tooltipSz = me.getSize();
if (xy[1] - tooltipSz.height > dh)
return [xy[0], xy[1] - imageDom.clientHeight];
else
return [xy[0], xy[1] - (tooltipDom.clientTop + tooltipDom.clientHeight)];
};

var ApplyPanel = function (layer) {
var target = Ext.getCmp(layer.layerTargetID);
var targetDom = target.el.dom;
var myDom = layer.el.dom;
myDom.style.top = targetDom.clientTop + "px";
myDom.style.left = targetDom.clientLeft + "px";
myDom.style.width = targetDom.clientWidth + "px";
myDom.style.height = targetDom.clientHeight + "px";
};

</script>
<style>
.imageTooltip {
background-color: #000000;
opacity: 0.80;
filter: Alpha(opacity=80);
}

.imageTooltipBody {
padding: 5px 7px 5px 7px;
font-size: 11px;
color: #FFFFFF;
}

.x-ie7 .imageTooltip table.x-table-plain {
width: 100%;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" SourceFormatting="true" />
<ext:Viewport runat="server">
<Items>
<ext:Panel runat="server" Region="North" Height="23">
<Items>
<ext:Menu
ID="wsMainMenu"
runat="server"
Floating="false"
Layout="HBoxLayout"
ShowSeparator="false"
Cls="wsMenu"
Border="false">
<Defaults>
<ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
</Defaults>
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Menu 1">
<Menu>
<ext:Menu ID="SubMenu1" runat="server" Cls="wsSubMenu">
<Items>
<ext:MenuItem runat="server" Text="Menu 1.1" />
<ext:MenuItem runat="server" Text="Menu 1.2" />
<ext:MenuItem runat="server" Text="Menu 1.3" />
</Items>
<Listeners>
<BeforeRender Handler="if (Ext.isIE7 || Ext.isIE8) this.shadowOffset = -1;" />
<MouseEnter Fn="onSubMenuMouseEnter" />
<MouseLeave Fn="onSubMenuMouseLeave" />
</Listeners>
</ext:Menu>
</Menu>
<Listeners>
<AfterRender Fn="onMenuItemAfterRender" />
</Listeners>
</ext:MenuItem>

<ext:MenuItem ID="MenuItem2" runat="server" Text="Menu 2">
<Menu>
<ext:Menu ID="SubMenu2" runat="server" Cls="wsSubMenu">
<Items>
<ext:MenuItem runat="server" Text="Menu 2.1" />
<ext:MenuItem runat="server" Text="Menu 2.2" />
<ext:MenuItem runat="server" Text="Menu 2.3" />
</Items>
<Listeners>
<BeforeRender Handler="if (Ext.isIE7 || Ext.isIE8) this.shadowOffset = -1;" />
<MouseEnter Fn="onSubMenuMouseEnter" />
<MouseLeave Fn="onSubMenuMouseLeave" />
</Listeners>
</ext:Menu>
</Menu>
<Listeners>
<AfterRender Fn="onMenuItemAfterRender" />
</Listeners>
</ext:MenuItem>
</Items>
<Listeners>
</Listeners>
</ext:Menu>
</Items>
</ext:Panel>
<ext:Container runat="server" Region="Center" Layout="HBoxLayout" Height="294" Width="600">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" DefaultMargins="3" />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Html="Filler" Flex="1" />
<ext:Panel ID="ImageCarousel" runat="server" Width="480" Layout="CardLayout" />
</Items>
</ext:Container>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Apr 16, 2015, 8:23 PM
Hi Chris,

Yes, it needs to increase z-index of the sub menu...

I came up with setting up this listener for the SubMenu2.

<Show Handler="this.el.setStyle('z-index', 19003);" />

cwolcott
Apr 17, 2015, 11:38 AM
Works perfectly.

Why did it have to be set in the show listener and not CSS .wsSubMenu?

Daniil
Apr 17, 2015, 1:47 PM
z-index is managed internally in JavaScript by a special ZIndexManager utility class. So, it would override a CSS value anyways. It calculates a z-index on showing and it cannot handle the scenario you are dealing with.

cwolcott
Apr 17, 2015, 1:57 PM
I found my issue. I can define the following and it does work. Forgot !important.



.wsSubMenu
{
z-index: 19003 !important;
}


Please close the thread.

Daniil
Apr 17, 2015, 2:11 PM
Ah, I tried a little different thing and now understood why it didn't work for me.

Nice caught!