Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (34 sloc) 3.11 KB
uid title author description ms.author ms.date ms.assetid msc.legacyurl msc.type
web-forms/overview/ajax-control-toolkit/dropshadow/manipulating-dropshadow-properties-from-client-code-vb
Manipulating DropShadow Properties from Client Code (VB) | Microsoft Docs
wenz
The DropShadow control in the AJAX Control Toolkit extends a panel with a drop shadow. Properties of this extender can also be changed using client JavaScrip...
riande
06/02/2008
11be4211-2fb9-4e15-b6d4-2aa623d81f3e
/web-forms/overview/ajax-control-toolkit/dropshadow/manipulating-dropshadow-properties-from-client-code-vb
authoredcontent

Manipulating DropShadow Properties from Client Code (VB)

by Christian Wenz

Download Code or Download PDF

The DropShadow control in the AJAX Control Toolkit extends a panel with a drop shadow. Properties of this extender can also be changed using client JavaScript code.

Overview

The DropShadow control in the AJAX Control Toolkit extends a panel with a drop shadow. Properties of this extender can also be changed using client JavaScript code.

Steps

The code starts with a panel containing some lines of text:

[!code-aspxMain]

The associated CSS class gives the panel a nice background color:

[!code-cssMain]

The DropShadowExtender is added to extend the panel with a drop shadow effect, opacity set to 50%:

[!code-aspxMain]

Then, the ASP.NET AJAX ScriptManager control enables the Control Toolkit to work:

[!code-aspxMain]

Another panel contains two JavaScript links for setting the opacity of the drop shadow: the minus link decreases the shadow's opacity, the plus link increases it.

[!code-aspxMain]

The JavaScript function changeOpacity() must then first find the DropShadowExtender control on the page. ASP.NET AJAX defines the $find() method for exactly that task. Then, the get_Opacity() method retrieves the current opacity, the set_Opacity() method sets it. The JavaScript code then puts the current opacity value in the <label> element:

[!code-htmlMain]

The opacity is changed on the client side

The opacity is changed on the client side (Click to view full-size image)

[!div class="step-by-step"] Previous

You can’t perform that action at this time.