This is a migrated thread and some comments may be shown as answers.

iPhone Menu example scrolling not working

4 Answers 138 Views

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 06 Jun 2011, 03:22 PM

I have also noticed that the javascript click's work intermittently. This project I am sending now, when you click on the links in the project, they javascript does not fire.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

<meta name="viewport" content="width=device-width" />

<link href="~/STYLES/Menu.iPhone.css" rel="stylesheet"

type="text/css" />

<link href="~/STYLES/style.css" rel="stylesheet"

type="text/css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.3.1215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.3.1215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI, Version=2010.3.1215.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<div id="iPhoneFrame" class="OrientationVertical">

<div id="RadMenu_iPhone_wrapper">

<a class="backButton" title="Back"><span>Back</span></a>

<div id="RadMenu_iPhone_Content">

<telerik:RadMenu

runat="server" ID="RadMenu1" EnableSelection="False"

EnableEmbeddedSkins="False" Skin="iPhone"

ClickToOpen="True" Flow="Vertical">

<Items>

<telerik:RadMenuItem Text="Corporate Reports">

<Items>

<telerik:RadMenuItem Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Region Reports">

<Items>

<telerik:RadMenuItem Text="Region 1">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 2">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 3">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 4">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 5">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 6">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 7">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 8">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 9">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 10">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 11">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 14">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 15">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 16">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 17">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 19">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Region 23">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="District Reports">

<Items>

<telerik:RadMenuItem Text="District 1">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 2">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 3">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 4">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 5">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 6">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 7">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 8">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 9">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 10">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 11">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 12">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 13">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 14">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 16">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 17">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 19">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 20">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 21">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 22">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 23">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 24">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 25">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 26">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 28">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 29">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 33">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 35">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 37">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 38">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 39">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 40">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 41">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 42">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 42">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 45">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 47">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 48">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 49">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 51">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 52">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 53">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 54">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 55">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 57">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 58">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 59">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 60">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 61">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 62">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 63">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 64">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 65">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 66">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 67">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 68">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 69">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 70">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 78">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 79">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 80">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="District 81">

<Items>

<telerik:RadMenuItem runat="server" Text="Daily Spreadsheet">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<script type="text/javascript" src="~/STYLES/iPodRadMenu.js"></script>

</div>

</form>

</body>

</html>

/*hide ribbon and quick launch */

#s4-ribbonrow, .ms-cui-topBar2, .s4-notdlg, .s4-pr s4-ribbonrowhidetitle, .s4-notdlg noindex, #ms-cui-ribbonTopBars, #s4-titlerow, #s4-pr s4-notdlg s4-titlerowhidetitle, #s4-leftpanel-content {display:none !important;}

.s4-ca{margin-left:0px !important; margin-right:0px !important;}

/*hide webpart margins*/

.ms-webpartpagedescription

{

padding: 0px !important;

}

#ctl00_MSO_ContentDiv table

{

padding: 0px !important;

}

.ms-wpContentDivSpace

{

margin: 0px !important;

padding: 0px !important;

}

.OrientationVertical

{

width: 320px;

height: 460px;

padding: 63px 22px 68px 29px;

margin: 20px auto;

background: transparent url('../Images/frame.jpg') no-repeat 0 0;

}

.OrientationHorizontal

{

height: 320px;

width: 460px;

padding: 22px 68px 29px 63px;

margin: 20px auto;

background: transparent url('../Images/frame_horizontal.jpg') no-repeat 0 0;

}

#RadMenu_iPhone_wrapper

{

position: relative;

background: #fff url('../Images/TopGradient.gif') repeat-x 0 0;

height: 100%;

padding: 0;

}

* html #RadMenu_iPhone_wrapper

{

overflow: hidden;

}

#RadMenu_iPhone_Content

{

overflow: hidden;

position: absolute;

top: 44px;

bottom: 0;

width: 100%;

}

.backButton

{

display: none; /* shown by js when in inner levels */

height: 30px;

padding-left: 16px;

position: absolute;

top: 7px;

left: 5px;

z-index: 2;

cursor: pointer;

background: transparent url('../Images/BackButton.gif') no-repeat 0 0;

}

.backButton span

{

background: transparent url('../Images/BackButton.gif') no-repeat 100% 0;

font: bold 12px/30px "Segoe UI", "Myriad Pro", Arial, sans-serif;

color: #fff;

display: block;

padding-right: 8px;

}

.RadMenu .rmTemplate div.rmText

{

padding: 0;

}

.RadMenu .rmTemplate > .rmText > .rmLink > .rmText

{

line-height: 32px;

}

.RadMenu .rmTemplate > .rmText > .rmLink > .rmText > b

{

display: block;

font-size: 11px;

line-height: 11px;

margin-top: -7px;

margin-bottom: 7px;

}

#description

{

width: 400px;

background: tan;

margin: 0 auto;

padding: 30px 30px 10px;

}

h1

{

font: normal 18px/25px "Segoe UI", "Myriad Pro", Arial, sans-serif;

}

p

{

font: normal 12px/14px Verdana, sans-serif;

}

code, pre

{

font: normal 12px/14px Consolas, "Courier New", monospace;

display: block;

}

code

{

border: 1px solid #555;

background: #fff;

}

.orientationLabel,

.verticalButton,

.horizontalButton

{

float: left;

width: 60px;

height: 29px;

line-height: 29px;

}

.verticalButton

{

width: 107px;

margin-left: 60px;

background: url('../Images/vertical.png');

}

.horizontalButton

{

width: 107px;

margin-left: 60px;

background: url('../Images/horizontal.png');

}

.RadMenu_iOS #mainForm .qsfHeader,

.RadMenu_iOS #mainForm .qsfLeft,

.RadMenu_iOS #mainForm .qsfTitle,

.RadMenu_iOS #mainForm .qsfSubtitle,

.RadMenu_iOS #mainForm .qsfCodeSwitcher,

.RadMenu_iOS #codeContainer,

.RadMenu_iOS #ConfigurationPanel1,

.RadMenu_iOS #mainForm .head1,

.RadMenu_iOS #mainForm .head2,

.RadMenu_iOS #mainForm .titleRight,

.RadMenu_iOS #mainForm .qsfFooter,

.RadMenu_iOS #mainForm .codeNskin

{

display: none;

}

.RadMenu_iOS #exampleContainer

{

width: auto;

margin: 0;

}

.RadMenu_iOS html, .RadMenu_iOS body, .RadMenu_iOS form

{

width: 100%;

height: 100%;

margin: 0;

}

.RadMenu_iOS #RadMenu_iPhone_wrapper

{

position: fixed;

background: #fff url('../Images/TopGradient.gif') repeat-x 0 0;

width: 100%;

height: 100%;

padding: 0;

}

.RadMenu_iOS #iPhoneFrame,

.RadMenu_iOS .innerArea,

.RadMenu_iOS .qsfTable

{

margin: 0;

padding: 0;

background: none;

height: auto;

}

.RadMenu_iOS #RadMenu_iPhone_Content

{

height: auto;

}

.RadMenu_iOS body.BODY

{

background: #fff;

}

.RadMenu_iOS #mainForm .qsfWrap

{

background: none;

min-width: 0;

min-height: 0;

}

.RadMenu_iOS .qsfGrid

{

margin-top: 0;

}

div.RadMenu_iPhone

{

height: auto !important;

}

div.RadMenu_iPhone,

div.RadMenu_iPhone .rmSlide,

div.RadMenu_iPhone .rmGroup

{

float: none;

}

div.RadMenu_iPhone .rmRootGroup,

div.RadMenu_iPhone .rmGroup,

div.RadMenu_iPhone .rmSlide,

div.RadMenu_iPhone .rmItem

{

width: 100% !important;

}

div.RadMenu_iPhone .rmSlide

{

top: 0;

overflow: visible;

background: #fff;

}

.RadMenu_iPhone .rmItem

{

border-bottom: 1px solid #e1e1e1;

}

div.RadMenu_iPhone a.rmLink,

div.RadMenu_iPhone a.rmTemplateLink

{

cursor: pointer !important;

text-decoration: none;

color: #000;

font: bold 20px/43px "Segoe UI", Arial, sans-serif;

text-indent: 10px;

outline: 0;

padding: 0;

width: 100% !important;

}

div.RadMenu_iPhone .rmGroup .rmText

{

padding: 0;

}

.RadMenu_iPhone .rmTemplate a.rmTemplateLink

{

display: block;

height: 55px;

overflow: hidden;

text-indent: 0;

line-height: 16px;

}

.RadMenu_iPhone a.rmLink .rmLeftImage,

.RadMenu_iPhone a.rmTemplateLink img

{

width: 55px;

height: 55px;

float: left;

}

.RadMenu_iPhone a.rmTemplateLink .rmTitle,

.RadMenu_iPhone a.rmTemplateLink .rmInfo

{

margin-left: 65px;

width: 240px;

white-space: nowrap;

text-overflow: ellipsis;

overflow:hidden;

display: block;

}

.RadMenu_iPhone a.rmTemplateLink .rmTitle

{

font-size: 14px;

margin-top: 11px;

}

.RadMenu_iPhone a.rmTemplateLink .rmInfo

{

font-size: 13px;

color: #7f7f7f;

font-weight: normal;

}

.RadMenu_iPhone a.rmTemplateLink:hover .rmInfo

{

color: #fff;

}

html.RadMenu_Desktop a.rmLink:hover,

div.RadMenu_iPhone .rmActive > a.rmLink,

div.RadMenu_iPhone .rmActive > .rmText > a.rmLink,

div.RadMenu_iPhone a.rmTemplateLink:hover

{

background: transparent url('../Images/ItemSelectedBg.gif') repeat-x 0 0;

color: #fff;

}

html.RadMenu_Desktop a.rmTemplateLink:hover

{

background-position: 0 -43px;

}

div.RadMenu_iPhone .rmExpandRight

{

background: transparent url('../Images/SubMenuIndicator.gif') no-repeat 100% 0;

}

.RadMenu_iPhone a.rmTemplateLink .rmExpandRight

{

background-position: 100% -43px;

}

.RadMenu_Desktop a.rmLink:hover .rmExpandRight,

.RadMenu_iPhone .rmActive > a.rmLink .rmExpandRight,

.RadMenu_iPhone .rmActive > .rmText > a.rmLink .rmExpandRight

{

background-position: 100% -98px;

}

html.RadMenu_Desktop a.rmTemplateLink:hover .rmExpandRight

{

background-position: 100% -141px;

}

* html .RadMenu_iPhone,

* html .rmText

{

zoom: 1;

}

(function ($) {

var iOS = navigator.userAgent.match(/iPod|iPad|iPhone/i);

if (!iOS)

$(document.documentElement).addClass('RadMenu_Desktop');

else

$(document.documentElement).addClass('RadMenu_iOS');

var lastElement;

var getEventLocation = function (e) {

var location = { x: e.pageX, y: e.pageY };

if (iOS && e.originalEvent.changedTouches.length < 2) {

location.x = e.originalEvent.changedTouches[0].pageX;

location.y = e.originalEvent.changedTouches[0].pageY;

}

return location;

};

var cancelEvents = function (e) {

e.stopPropagation();

e.preventDefault();

};

// enforces context over function

var bind = function (context, name) {

return function (e) {

if (e && e.preventDefault)

e.preventDefault();

return context[name].apply(context, arguments);

};

// enforces "top" coordinate of element to be within container

var constrain = function (element, container) {

var endTop = parseInt($(element).css("top"));

var maxScrollTop = container.offsetHeight - element.offsetHeight;

if (endTop > 0 || maxScrollTop > 0) {

$(element).animate({

top: 0

}, "slow");

} else if (endTop < maxScrollTop) {

$(element).animate({

top: maxScrollTop

}, "slow");

}

};

// <dragging>

var dragStartPos = 0;

var dragStartTop = 0;

var dragElement = null;

var hasDragged = false;

var dragStart = function (e) {

if (!iOS)

cancelEvents(e);

if (this.offsetHeight > $get('RadMenu1').parentNode.offsetHeight) {  /* disable scrolling for menus that do not need it */

if (!iOS) {

$(document.body)

.bind("mousemove", compositeDrag)

.bind("mouseup", dragEnd);

} else {

$(document.body)

.bind("touchmove", compositeDrag)

.bind("touchend", dragEnd);

}

dragElement = $(this).stop();

dragStartPos = getEventLocation(e).y;

var top = parseInt(dragElement.css("top")) || 0;

dragStartTop = top < 0 ? top : 0;

}

hasDragged = false;

};

var simpleDrag = function (e) {

cancelEvents(e);

dragElement

.css("top", dragStartTop - (dragStartPos - getEventLocation(e).y) + 'px');

};

// hit-test

var compositeDrag = function (e) {

cancelEvents(e);

if (Math.abs(dragStartPos - getEventLocation(e).y) > 10) /* threshold value */

{

var container = $get("RadMenu_iPhone_Content");

$("<div id='overlay'></div>")

.css({

height: container.offsetHeight,

width: container.offsetWidth,

position: "absolute",

top: 0,

zIndex: 7100

})

.appendTo(container);

hasDragged = true;

if (!iOS) {

$(document.body)

.unbind("mousemove", compositeDrag)

.bind("mousemove", simpleDrag);

} else {

$(document.body)

.unbind("touchmove", compositeDrag)

.bind("touchmove", simpleDrag);

// lastElement = container;

// lastElement.addEventListener( "click", cancelEvents, true );

}

};

var dragEnd = function (e) {

cancelEvents(e);

if (!iOS) {

$(document.body)

.unbind("mousemove", simpleDrag)

.unbind("mousemove", compositeDrag)

.unbind("mouseup", dragEnd);

} else {

$(document.body)

.unbind("touchmove", simpleDrag)

.unbind("touchmove", compositeDrag)

.unbind("touchend", dragEnd);

// setTimeout ( function () { lastElement.removeEventListener( "click", cancelEvents, true ); }, 0 );

}

constrain(dragElement[0], $get('RadMenu_iPhone_Content'));

$('#overlay').remove();

};

// </dragging>

$.fn.reverse = [].reverse;

window.iPodMenu = function (RadMenuInstance) {

this._animating = false;

this.menu = RadMenuInstance;

this._menu = RadMenuInstance.get_element();

this._backButton =

$('a.backButton', this._menu.parentNode.parentNode)

.bind("click", bind(this, "navigateBack"));

/* go to selected item */

var selectedItem = $('.rmSelected', this._menu);

var parentItems = selectedItem.parents('.rmItem');

this._level = parentItems.length - 1;

var me = this;

if (this._level >= 0) {

this._backButton.css('display', 'inline');

$.each(parentItems.reverse(), function () {

$('> .rmSlide', this)

.css({

display: 'block',

left: me._menu.offsetWidth + 'px',

top: -this.offsetTop + 'px'

})

.find('> .rmGroup')

.css('display', 'block');

});

this._lastChild = selectedItem.parent().parent()[0];

$(this._menu).css('left', -(this._menu.offsetWidth * me._level));

}

RadMenuInstance.add_itemClicking(bind(this, "navigateForward"));

RadMenuInstance.add_itemPopulated(bind(this, "doAnimateForward"));

/* necessary for 2nd level menus */

RadMenuInstance.add_itemOpening(

function (sender, args) {

args.set_cancel(true);

});

RadMenuInstance.add_itemClosing(

function (sender, args) {

args.set_cancel(true);

});

if (!iOS) {

/* init drag interface for non-iphone users */

$(".rmVertical", this._menu)

.live('mousedown', dragStart);

} else {

$(".rmVertical", this._menu)

.live('touchstart', dragStart);

}

$(".rmTemplateLink", this._menu)

.click(function (e) {

if (hasDragged || $(this).attr('href') == '#')

e.preventDefault();

});

};

window.iPodMenu.prototype =

{

_animateTransition: function (direction, onAnimationEnded, resetMenu) {

this._animating = true;

var that = this;

var finalPosition = 0;

if (resetMenu !== true) {

finalPosition = parseInt($telerik.getCurrentStyle(this._menu, 'left', 0), 10) || 0;

if (direction == Telerik.Web.UI.jSlideDirection.Left)

finalPosition -= this._menu.offsetWidth;

else

finalPosition += this._menu.offsetWidth;

}

$(this._menu)

.animate({

left: (finalPosition + 'px')

}, 300, "linear",

function () {

if (onAnimationEnded)

onAnimationEnded();

that._animating = false;

$('.rmActive', this._menu).removeClass('rmActive');

});

},

changeOrientation: function (orientation) {

var frame = $(this._menu).parents('#iPhoneFrame');

frame.removeClass('OrientationVertical')

.removeClass('OrientationHorizontal')

.addClass('Orientation' + orientation.substr(0, 1).toUpperCase() + orientation.substr(1));

if (!this._lastChild) {

this._lastChild = this._menu;

}

$('.rmSlide', this._menu).css({

left: this._menu.offsetWidth + 'px'

});

$(this._menu).css({

left: -this._menu.offsetWidth * (this._level + 1) + 'px'

});

if (this._lastChild.offsetHeight < this._menu.parentNode.offsetHeight) {

if (this._level == -1)

$('.rmRootGroup', this._lastChild).css('top', '0px');

else

$('.rmGroup', this._lastChild).css('top', '0px');

}

},

hideLastChild: function () {

if (this._level >= 0) {

this._lastChild =

$(this._lastChild)

.hide()

.parents('.RadMenu, .rmSlide')[0];

} else {

$('.rmSlide', this._menu).hide();

this._lastChild = this._menu;

}

},

navigateBack: function (reset) {

if (this._animating) return;

if (reset !== false && reset !== true)

reset = false;

if (this._lastChild.parentNode.parentNode.offsetHeight < this._menu.parentNode.offsetHeight) {

$(this._lastChild.parentNode.parentNode).css({

top: '0px'

});

}

this._animateTransition(Telerik.Web.UI.jSlideDirection.Right, $.proxy(this.hideLastChild, this), reset);

if (reset)

this._level = 0;

if (--this._level < 0) {

this._backButton.fadeOut("fast");

}

},

navigateForward: function (sender, args) {

if (hasDragged) {

args.set_cancel(true);

return;

}

else

if (this._animating)

return;

this.clickedItem = args.get_item();

var clickedElement = this.clickedItem.get_element();

$('.rmActive', clickedElement.parentNode).removeClass('rmActive');

$(clickedElement).addClass('rmActive');

if (this.clickedItem._isWebServiceCallNeeded()) {

this.menu._loadChildrenFromWebService(this.clickedItem);

return true;

}

this.doAnimateForward(sender, args);

},

doAnimateForward: function (sender, args) {

var childList = this.clickedItem.get_childListElement();

if (childList) {

// update back button

this._backButton.fadeIn("fast");

// show child list on the right

childList.style.display = "block";

this._lastChild = childList.parentNode;

$(this._lastChild).css({

display: 'block',

left: this._menu.offsetWidth + 'px',

top: -this.clickedItem.get_element().offsetTop - this.clickedItem.get_parent().get_childListElement().offsetTop + 'px'

});

// animate left

this._animateTransition(Telerik.Web.UI.jSlideDirection.Left);

this._level++;

}

else {

if (this.clickedItem.get_navigateUrl() == '#')

args.set_cancel(true);

}

};

})($telerik.$);

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Web.Security;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

Chris Gore

answered on 04 Jul 2011, 09:50 AM

Test-Project.zip

Hi Chris,
Please accept our apologies for the delayed reply.

I created a small demo -- http://www.screencast.com/t/aKYnSMN5 -- that shows that the menu is working. I also attached it as a project.

The scrolling DOES work, BUT no in the usual manner, as it is modified by the touch scroll extender:
-- There are no scrollbars shown on the device view port to save screen real estate;
-- Scroll button does not scroll;
-- To scroll, click and drag.

The attached project is the one used for the demo.

Best wishes,
Ivan Zhekov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.