dropshadowextender - how to show and hide in javascript

Hello

How would i turn a dropshadowextender on and off in javascript. In essence i need to show and hide teh drop shadow at different points.

Thanks

andrea

Hi Andrea,

The easiest approach is to set the width of the drop shadow to0, like the sample page does inchkShadow'sonclick. You can do it using$object('dsBehavior').set_Width(0);.

Thanks,
Ted
thanks :)

DropShadow hides my menu items on back

I used dropshadow and when I pull down menut item to navigate to other page I cannot click on it as it's hide behind dropshadowextender?

On the menu element, try setting:

<asp:Menu id="Menu1" style="position:relative:z-index:5" ... >

I tried this and this does not work! The shadow override the menus.

This worked when I removed this tag:

<

atlasToolkit:DropShadowExtenderID="dse"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"Width="5"Rounded='true'Opacity=".75"TrackPosition="true"ID="dsBehavior"/>

</

atlasToolkit:DropShadowExtender>

Yes I had to remove the shadow to get this going even though my menu has:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"Font-Bold="true"style="position:relative; z-index:5">

It's the 2nd level menus that are hidden underneath the shadow. I think it completely ignores the Z-index of the menu

That worked for me but I have more question,

1) how to make size of both panel and table look same so that I have good effect of drop shadow, as with the below code my panel is too big and table is inside the panel. I tried to make size of both table and panel same still does not work.

2)How to use different color besides black for shadow?

<

asp:PanelID="pnlTable"runat="server">
<tableclass="table">
<tr>
|<tdcolspan="2"class="heading">Search Parts By Supplier or Return Parts</td>
</tr>
<tr>
<tdclass="tdheading">Supplier ID</td>
<td><asp:TextBoxID="txtsearchsuppID"runat="server"Width="208px"></asp:TextBox></td>
</tr>
<tr>
<tdclass="tdheading">From Date<asp:TextBoxID="txtfromdate"runat="server"></asp:TextBox>
<asp:PanelID="pnlFrom"runat="server">
<asp:CalendarID="fromClnd"runat="server"OnSelectionChanged="fromClnd_SelectionChanged">
</asp:Calendar>
</asp:Panel><cc1:CollapsiblePanelExtenderID="CPEfromClnd"runat="server"><cc1:CollapsiblePanelPropertiesCollapseControlID="txtfromdate"Collapsed="True"AutoCollapse="True"AutoExpand="True"CollapsedSize="0"ExpandControlID="txtfromdate"ExpandedSize="180"TargetControlID="pnlFrom"/></cc1:CollapsiblePanelExtender></td></tr>
<tr>
<tdcolspan="2"><asp:ButtonID="btnSearch"runat="server"Text="Search"OnClick="btnSearch_Click"/>
</td></tr>
</table></asp:Panel>

The DropShadow isn't ignoring the zIndex of the menu - it has no knowledge of it. I suspect that the sub-menu items created by the ASP.NET menu control don't have zIndexes on them, so they default to 0 which causes them to show up beneath the dropshadow items.

The Sub Menus don't have a style property to adjust unlike the asp:Menu. They have a CssClass which is what I'm assuming you mean.

I removed the following off the panel to show the underlying shadow.

CssClass="dropShadowPanel"

Then I placed z-index: 155 everywhere for the menu.

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="z-index:115"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;z-index:115}

The menu appears beneath the shadow regardless of all the combinations I have tried.

A quick fix but I lose screen space is:

StaticDisplayLevels

="2"

Oh - ok. Yeah, the dropshadow is absolutely positioned. Since your items are statically positioned, they have a different zIndex stack. Sorry, I didn't think of that. Try adding "position:relative" to your MenuStyle class (and specify that on your Menu control's CssClass property too).

No you're not slipping. You mentioned that before. :)

It's beyond me. I've gone throught the 2 stylesheets I have and I can't figure it out.

I'm down to:

<asp:MenuID="Menu1"runat="server"DataSourceID="SiteMapDataSource1"StaticDisplayLevels="1"Font-Bold="true"Style="position:relative; z-index:30"><StaticMenuItemStyleCssClass="MenuStyle"VerticalPadding="2px"/><DynamicHoverStyleCssClass="MenuStyle"BackColor="#e1ecfc"/><DynamicMenuItemStyleCssClass="MenuStyle"BackColor="#e1ecfc"/></asp:Menu>

.MenuStyle

{FONT-SIZE:8pt;VERTICAL-ALIGN:top;FONT-FAMILY:verdana;PADDING-BOTTOM:5px;position:relative;z-index:30}

On load up it flashes ontop then quickly reverts underneath. I'musing IE6.0 SP2. I'll send the source if you are really keen! :)

I have same issue like Glyder, on load up it flashes for a second for many Atlast control like dropshadow, collapsible Panel etc.
second issue is I loose my css style sheet setting any where I use atlas control. when it post back it settings are applied.
Example:

Suppose I applied css="table" for table it does not take affect until first post back, how to take care of this both problem.This will be really helpful if we can figure this out.

Hmm - yeah I'd like to take a look at this. If you could send me a repro, I'd appreciate it.
what is repro? my code?
<atlas:ScriptManagerID="SM"EnablePartialRendering="true"runat="server"></atlas:ScriptManager><atlas:UpdateProgressID="Progress"runat="server"><ProgressTemplate>

Updating Please Wait...

<imgalt="Wait"id="ImgWait"src="Images/Wait_indicator_flower.gif"/></ProgressTemplate></atlas:UpdateProgress>
<atlas:UpdatePanelID="Up1"runat="server"><ContentTemplate><asp:PanelID="pnlParent"DefaultButton="btnaddparSupp"runat="server"Visible="False"><tableclass="table"><tr><tdcolspan="2"class="heading1">

Supplier Maintenance - Setting up New Supplier Information

</td></tr><tr><tdstyle="width: 153px"align="left">

Supplier Name

</td><tdstyle="width: 334px"align="left"><asp:TextBoxID="txtparSuppName"runat="server"></asp:TextBox><asp:RequiredFieldValidatorID="ReqParSuppName"runat="server"ControlToValidate="txtparsuppName"ErrorMessage="Req"></asp:RequiredFieldValidator></td></tr>

<

tr><tdalign="center"colspan="2"class="tdheading"><asp:ButtonID="btnaddparSupp"runat="server"Text="Add"/><asp:ButtonID="btncancelparSupp"runat="server"CausesValidation="False"EnableViewState="False"Text="Cancel"/></td></tr></table></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnParent"EventName="Click"/></Triggers></atlas:UpdatePanel>

The XHTML you're using including the menu, the DropShadowExtender, and the panel it's targeting please.

Also, please use a smaller font size when pasting in code. Thanks.

Hi, I've the same problem as you, and I found a workaround:
I have a panel where my menu is:

<asp:Panel ID="menuPanel" runat="server" CssClass="menuDiv" Style="z-index:115">
 <asp:Menu ID="Menu1" runat="server">
 <Items>
 ... (items)
 </Items>
 <StaticHoverStyle BackColor="#990000" ForeColor="White" />
 </asp:Menu>
</asp:Panel>

then other panel for the content of the page:

<asp:Panel ID="mainPanel" runat="server" CssClass="mainDiv">
 ...
</asp:Panel>

then I apply the shadow to the mainPanel, but also I have to apply shadows to menuPanel (otherwise doesn't work):

<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server">
 <cc1:DropShadowProperties TargetControlID="mainPanel" />
</cc1:DropShadowExtender
<cc1:DropShadowExtender ID="DropShadowExtender2" runat="server">
 <cc1:DropShadowProperties TargetControlID="menuPanel" />
</cc1:DropShadowExtender>

And it works!!! but that's not the perfect way. As you can see I have to apply shadow on both panels, and in the menuPanel I have to put Style="z-index:115", and the most strange is that if a put z-index in a CssClass (menuDiv in my case) i doesn't work, I have to put it in the control itself.

Haha, thanks Matias I was able to get around a similar issue by using your method.