This is a migrated thread and some comments may be shown as answers.
iPhone Menu example scrolling not working
4 Answers 42 Views
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 01 Jun 2011, 06:01 PM
Has anyone been able to get scrolling to work with the iPhone Menu Appearance example?  When I have more Rad Items than will fix on the iphone / ipad screen, it will not scroll.  I'm also getting a Javascript error "iPodMenu" is undefined.  It's related to the javascript in the .aspx page controlling vertical and horizontal.

4 Answers, 1 is accepted

Sort by
0
Ivan Zhekov
Telerik team
answered on 06 Jun 2011, 11:34 AM
Hello Chris,

Could you set up and send us a sample project that has these errors.

I tested locally with the latest iOS and I couldn't find a problem.

Greetings,
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.

0
Chris
Top achievements
Rank 1
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">
  
<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>
         </div>
        </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
0
Chris
Top achievements
Rank 1
answered on 07 Jun 2011, 03:49 PM
Any thoughts?  My POC for the company ends in 2 days.  I have begun to rebuild this functionality in straight Javascript since Telerik seems to have issues.  If you have a soluiton, I would love to recommend the telerik tools instead. 
0
Ivan Zhekov
Telerik team
answered on 04 Jul 2011, 09:50 AM
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.

Tags
Menu
Asked by
Chris
Top achievements
Rank 1
Answers by
Ivan Zhekov
Telerik team
Chris
Top achievements
Rank 1
Share this question
or