Menu Example - Pocket Portal

SlidingMenu example : Pocket Portal

Menu Examples home

CSharp

Javascript

infimum.dk If you work professionally with client side webdevelopment, you should not miss this link collection maintained by a danish Ph.D. in Computer Science.

www.crockford.com A survey of the JavaScript Programming Language.

JavaScript Date and Time Index More about Date & Time than you would ever like to know.

www.irt.org Articles and Tutorials, one of the easiest accessible collection ...

Programmers reference Theme and lexical access ...

Small games Examples and contests ...

Traversing a HTML table with Javascript Well written and a lot of information on the interplay between javascript and DOM, if you want to make client dynamics - it is here ...

Fading in text using the DOM Fading backgrounds may no longer be the rage, but fading text ...

Temperature converter A very handy script that instantly converts between the major temperature units Fahrenheit, Celcius and Kelvin ...

Javascript preloader I had this problem a month ago and because I found a great way to solve it, I decided to show you how ...

Changing image opacity The effect is available only in IE browsers starting from 5.5 version, bacause it is working with the filters, embedded into IE system ...

Image slideshow there are many ways, the simplest and most efficient using JavaScript. In this tutorial ...

Simple 'chalk' board Using a table and different event handlers to change the background of the Cells of the table ...

Advanced messagebox support shadow and opacity, could be interesting ...

Photoshop

This example is extremly simple, no Javascript, no C#, no data source, no nothing but a couple of HTML tables making up the lists of links and wrapped in a SlidingMenu to layer them.

As I use a HTML table to make the list of links inside each GroupCanvas, there is a lot of HTML markup in this example, therefore here I show only the HTML markup for the first 2 links inside each GroupCanvas. However, if you click the Clipboard button, all the code for the Pocket Portal example will be copied to your clipboard, just paste it anywhere inside the <FORM></FORM> tags of your .aspx-file.

SlidingMenu markup is blue, Comments are green.

0.	<wm:SlidingMenu id="smPocketPortal" runat="server">
1.		<SlidingMenuStyle SlideSmootheness="20" BorderWidth="0" Width="350" Height="400" />
2.		<GroupHeaderStyle BorderWidth="0" Height="20" />
3.		<!--starting the CSharp Group-->
4.		<AddManualGroup>
5.			<GroupHeaderStyle BackgroundColor="#FF6600" />
6.			<GroupCanvasStyle ScrollbarArrowColor="White" ScrollbarFaceColor="#FF6600" ScrollbarTrackColor="#F1F1F2" ScrollbarShadowColor="White" Scrollbar3dlightColor="White" />
7.			<!--doing the GroupHeader-->
8.			<GroupHeader>
9.				<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
10.					<tr>
11.						<td><img src="/images/pixel_transparent.gif" width="10" height="1"></td>
12.						<td><img src="/images/groupedcollection/ex_portal_pocket_top.png"></td>
13.						<td width="100%" align="center" style="border-bottom:blue 1px solid"><span class="portal_gc_header">CSharp</span></td>
14.						<td style="border-bottom:blue 1px solid"><img src="/images/pixel_transparent.gif" width="70" height="1"></td>
15.					</tr>
16.				</table>
17.			</GroupHeader>
18.			<!--doing the GroupCanvas-->
19.			<GroupCanvas>
20.				<table border="0" cellpadding="4" cellspacing="0">
21.					<tr class="portal_row_default">
22.						<td><a class="portal_link_csharp" href="http://www.csharphelp.com/archives3/archive494.html" target="_blank">C#
23.								DataGrid with Excel</a><span class="portal_bread"> This is a simple C#
24.								Program that illustrate the usage of DataGrid ,DataSet to get the Excel data
25.								and reading that Excel data from DataGrid ...</span></td>
26.					</tr>
27.					<tr class="portal_row_alternate">
28.						<td><a class="portal_link_csharp" href="http://www.csharphelp.com/archives3/archive499.html" target="_blank">Check
29.								Your Internet Connection With C#</a><span class="portal_bread"> How to
30.								check if your computer is connected to the internet with C#.</span></td>
31.					</tr>
32.					...
33.				</table>
34.			</GroupCanvas>
35.		</AddManualGroup>
36.		<!--ending the CSharp Group-->
37.		<!--starting the Javascript Group-->
38.		<AddManualGroup>
39.			<GroupHeaderStyle BackgroundColor="#FF6699" OpenThisGroupAtStartup="true" />
40.			<GroupCanvasStyle ScrollbarArrowColor="FF6699" ScrollbarFaceColor="#F1F1F2" ScrollbarTrackColor="#F1F1F2" ScrollbarShadowColor="#F1F1F2" Scrollbar3dlightColor="#F1F1F2" ScrollbarDarkshadowColor="#F1F1F2" ScrollbarHighlightColor="#F1F1F2" />
41.			<GroupHeader>
42.				<table width="100%" border="0" cellpadding="0" cellspacing="0">
43.					<tr>
44.						<td><img src="/images/pixel_transparent.gif" width="10" height="1"></td>
45.						<td><img src="/images/groupedcollection/ex_portal_pocket_middle.png"></td>
46.						<td width="100%" align="center" style="border-bottom:blue 1px solid"><span class="portal_gc_header">Javascript</span></td>
47.						<td style="border-bottom:blue 1px solid"><img src="/images/pixel_transparent.gif" width="70" height="1"></td>
48.					</tr>
49.				</table>
50.			</GroupHeader>
51.			<GroupCanvas>
52.				<table class="portal_bread" border="0" cellpadding="2" cellspacing="0" style="border-left:#FF6699 1px solid">
53.					<tr class="portal_row_alternate">
54.						<td><a class="portal_link_js" href="http://www.infimum.dk/HTML/references.html#ref_1_4" target="_blank">infimum.dk</a>
55.							If you work professionally with client side webdevelopment, you should not miss this link collection
56.							maintained by a danish Ph.D. in Computer Science.
57.						</td>
58.					</tr>
59.					<tr class="protal_row_default">
60.						<td><a class="portal_link_js" href="http://www.crockford.com/javascript/survey.html" target="_blank">www.crockford.com</a>
61.							A survey of the JavaScript Programming Language.
62.						</td>
63.					</tr>
64.					...
65.				</table>
66.			</GroupCanvas>
67.		</AddManualGroup>
68.		<!--ending the Javascript Group-->
69.		<!--starting the Photoshop Group-->
70.		<AddManualGroup>
71.			<GroupHeaderStyle BackgroundColor="#FF9900" />
72.			<GroupHeader>
73.				<table width="100%" border="0" cellpadding="0" cellspacing="0">
74.					<tr>
75.						<td><img src="/images/pixel_transparent.gif" width="10" height="1"></td>
76.						<td><img src="/images/groupedcollection/ex_portal_pocket_bottom.png"></td>
77.						<td width="100%" align="center" style="border-bottom:blue 1px solid"><span class="portal_gc_header">Photoshop</span></td>
78.						<td style="border-bottom:blue 1px solid"><img src="/images/pixel_transparent.gif" width="70" height="1"></td>
79.					</tr>
80.				</table>
81.			</GroupHeader>
82.			<GroupCanvas>
83.				<table border="0" cellpadding="2" cellspacing="0" style="border-left:FF9900 1px solid">
84.					<tr class="portal_row_default">
85.						<td><a class="portal_link_ps" href="http://www.planetphotoshop.com/tutorials_effects.html" target="_blank">Planet
86.								Photoshop</a><span class="portal_bread"> sizeable collection of quality
87.								tutorials ...</span></td>
88.					</tr>
89.					<tr class="portal_row_alternate">
90.						<td>
91.							<table border="0" cellpadding="0" cellspacing="0">
92.								<tr>
93.									<td valign="top"><img src="/images/groupedcollection/ex_portal_pocket_pipes.gif" width="30" height="30"></td>
94.									<td><img src="/images/pixel_transparent.gif" width="3" height="1"></td>
95.									<td valign="top"><a class="portal_link_ps" href="http://www.planetphotoshop.com/spivey41.html" target="_blank">Blending
96.										pipes</a><span class="portal_bread"> We are going to learn how to create
97.										pipes and then blend them together ...</span></td>
98.								</tr>
99.							</table>
100.						</td>
101.					</tr>
102.					...
103.				</table>
104.			</GroupCanvas>
105.		</AddManualGroup>
106.		<!--ending the Photoshop Group-->
107.	</wm:SlidingMenu>