Menu Example - Rotator

SlidingMenu example : Rotator

Menu Examples home

			Easy to use
			ADO.NET integration
			Drag from Toolbox
			Full IntelliSense
			Dynamic Help

This code will produce a SlidingMenu version of an (Ad) Rotator. It is not very sofisticated, especially it is not currently possible to give different layers different time spans - but it is extremely simple to set up (in the JS tab, you will see there is only one line of JavaScript code!)

The important thing to notice here in the XML/HTML code is line 2, there the GroupHeaders default height is set to zero (remember also to set the BorderWidth to zero). The first Group however, have a GroupHeader with height=25 pixels set at line 5 (the BorderWidth do not need to be zero for that GroupHeader), in effect creating a SlidingMenu with one Header and an arbitrary (here 3) number of GroupCanvas's sliding.

All the XML/HTML markup to make this example is shown below and you can click the Clipboard button to copy the code to your clipboard and paste it anywhere between the <FORM></FORM> tags in your .aspx-file.

SlidingMenu markup is blue, Comments are green.

0.	<wm:SlidingMenu id="smRotator" runat="server">
1.		<SlidingMenuStyle Width="132" Height=125 SlideDelay="10" SlideSmootheness="1" BorderWidth="0" />
2.		<GroupHeaderStyle BorderWidth="0" Height="0" />
3.		<GroupCanvasStyle BackgroundColor="" VerticalScrollbar="Hidden" />
4.		<AddManualGroup>
5.			<GroupHeaderStyle Height="25" BorderWidth="0" BackgroundColor="white" />
6.			<GroupHeader><a href="/index.aspx?product=slidingmenu" title="SlidingMenu Homepage"><img src="/images/slidingmenu/example_rotator/header.png" onmouseover="this.src='/images/slidingmenu/example_rotator/header_movr.png'" onmouseout="this.src='/images/slidingmenu/example_rotator/header.png'" border="0" style="cursor:hand"></a></GroupHeader>
7.			<GroupCanvas>
8.				<table style="color:blue;font-weight:bold;font-family:verdana;font-size:16px" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
9.					<tr><td><span style="color:red"> Slide</span></td></tr>
10.					<tr><td align="center"><span style="color:green">those</span></td></tr>
11.					<tr><td align=right><span style="color:blue">Layers </span></td></tr>
12.				</table>
13.			</GroupCanvas>
14.		</AddManualGroup>
15.		<AddManualGroup>
16.			<GroupHeader></GroupHeader>
17.			<GroupCanvas>
18.				<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
19.					<tr><td align="center"><img src="/images/slidingmenu/example_rotator/layers.gif"></td></tr>
20.				</table>
21.			</GroupCanvas>
22.		</AddManualGroup>
23.		<AddManualGroup>
24.			<GroupHeader></GroupHeader>
25.			<GroupCanvas>
26.				<table width="100%" height="100%" class="rotator_check_text" border="0" cellpadding="0" cellspacing="0">
27.					<tr><td>  </td><td><img src="/images/slidingmenu/example_rotator/check_in.gif"></td><td> </td><td>Easy to use</td></tr>
28.					<tr><td></td><td><img src="/images/slidingmenu/example_rotator/check_in.gif"></td><td></td><td>ADO.NET integration</td></tr>
29.					<tr><td></td><td><img src="/images/slidingmenu/example_rotator/check_in.gif"></td><td></td><td>Drag from Toolbox </td></tr>
30.					<tr><td></td><td><img src="/images/slidingmenu/example_rotator/check_in.gif"></td><td></td><td>Full IntelliSense </td></tr>
31.					<tr><td></td><td><img src="/images/slidingmenu/example_rotator/check_in.gif"></td><td></td><td>Dynamic Help </td></tr>
32.				</table>
33.			</GroupCanvas>
34.		</AddManualGroup>
35.	</wm:SlidingMenu>

All you need to do to make the (Ad) Rotator spinning is to call wm_3_SMPLay('[WhatSlidingMenu]', -1, [delay]) from your BODY onload event handler, eg. <BODY onload="wm_3_SMPlay('smRotator', -1, 4000)" ...>. It is important that the wm_3_SMPlay call comes after the page is finish loading, otherwise the SlidingMenu may not yet exist in your browser.

Very simple to set up, however you need to use the wm_3_SMPLay which is a Client API object and therefore only available in what by SlidingMenu is defined as uplevel browsers, check Browser Support to see which browsers currently is SlidingMenu uplevel browsers.

If you click the Clipboard button, you will only get the "wm_3_SMPlay('smRotator', -1, 4000)" code in you clipboard and you should then paste that code into your .aspx-file in the <BODY onload="here" ...>

Then using wm_3_SMPlay(...) you will ALWAYS supply a SlidingMenuId to specify what SlidingMenu on your page to play. The next argument is here -1, which means that the SlidingMenu will play ALL its Groups (starting with the first Group) and continue playing forever (until the page is abondoned by the user). The third argument tells how long time to show each Group, in this example, there is 4 seconds (4000 milliseconds) between a Group starts to open and the next Group starts to open.

One word of caution though - if you call a SlidingMenu with the wm_3_SMPlay and set the second argument to -1, then client dynamic resizing will be disabled for that SlidingMenu (in this example resizing is disabled for smRotator). Each SlidingMenu on a page by default resizes then the browser resizes so that if a SlidingMenu is sized in percent of the browser size, that SlidingMenu will resize nicely, however with resizing disabled for a certain SlidingMenu that SlidingMenu will not behave well if that SlidingMenu is sized in percent and eg. the user resizes the browser. Therefore, if you are going to call a SlidingMenu with the wm_3_SMPlay(...) function, be sure to size that SlidingMenu absolute (<SlidingMenuStyle Width="200px" Height="300px" ... /> and not <SlidingMenuStyle Width="70%" Height="80%" ... />).