jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › menu horizontal on ipad
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 6 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Authormenu horizontal on ipad Posts
-
Hi all, I have a problem with my horizontal menu.
After the update at the last version of jqwidget framework I can’t see the menu when I visit my site using my iPad.when i visit my site using pc/mac – firefox/chrome/explorer the menu working fine, but not on ipad/iphone.
it happen only after the update at the last versione of jqwidget.
I tried also to roolback the jqwidget framework, and the menu shown correctly.thanks a lot
AleHi al3dv,
We are not aware of such issue. We use jqxMenu on our own website and it is displayed correctly on IPAD and the menu’s version is the latest one.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jQuery Menu, Main Menu, Context Menu, Vertical Menu, Popup Menu, Menu, jqxMenu" /> <meta name="description" content="The jqxMenu widget makes it easy to add menus to your website or web application. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting."/> <title id='Description'>The jqxMenu widget makes it easy to add menus to your website or web application. With the jqxMenu you can create website menus, customized context menus, or application-style menu bars with just a small amount of scripting. </title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="scripts/demos.js"></script> <script type="text/javascript" src="jqwidgets/jqx-all.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // Create a jqxMenu $("#jqxMenu").jqxMenu({ width: '670', height: '30px'}); $("#jqxMenu").css('visibility', 'visible'); $("#disabled").jqxCheckBox({ width: '150px', height: '20px' }); $("#open").jqxCheckBox({ width: '150px', height: '20px' }); $("#hover").jqxCheckBox({ width: '150px', height: '20px' }); $("#topLevelArrows").jqxCheckBox({ width: '200px', height: '20px' }); $("#animation").jqxCheckBox({ width: '150px', height: '20px' }); $("#animation").on('change', function (event) { var value = event.args.checked; // enable or disable the menu's animation. if (!value) { $("#jqxMenu").jqxMenu({ animationShowDuration: 0, animationHideDuration: 0, animationShowDelay: 0 }); } else { $("#jqxMenu").jqxMenu({ animationShowDuration: 300, animationHideDuration: 200, animationShowDelay: 200 }); } }); $("#disabled").on('change', function (event) { var value = event.args.checked; // enable or disable the menu if (!value) { $("#jqxMenu").jqxMenu({ disabled: false }); } else { $("#jqxMenu").jqxMenu({ disabled: true }); } }); $("#hover").on('change', function (event) { var value = event.args.checked; // enable or disable the menu's hover effect. if (!value) { $("#jqxMenu").jqxMenu({ enableHover: false }); } else { $("#jqxMenu").jqxMenu({ enableHover: true }); } }); $("#open").on('change', function (event) { var value = event.args.checked; // enable or disable the opening of the top level menu items when the user hovers them. if (!value) { $("#jqxMenu").jqxMenu({ autoOpen: false }); } else { $("#jqxMenu").jqxMenu({ autoOpen: true }); } }); $("#topLevelArrows").on('change', function (event) { var value = event.args.checked; // enable or disable the opening of the top level menu items when the user hovers them. if (!value) { $("#jqxMenu").jqxMenu({ showTopLevelArrows: false }); } else { $("#jqxMenu").jqxMenu({ showTopLevelArrows: true }); } }); }); </script> <div id='jqxWidget' style='height: 300px;'> <div id='jqxMenu' style='visibility: hidden; margin-left: 5px;'> <ul> <li><a href="#Home">Home</a></li> <li>Solutions <ul style='width: 250px;'> <li><a href="#Education">Education</a></li> <li><a href="#Financial">Financial services</a></li> <li><a href="#Government">Government</a></li> <li><a href="#Manufacturing">Manufacturing</a></li> <li type='separator'></li> <li>Software Solutions <ul style='width: 220px;'> <li><a href="#ConsumerPhoto">Consumer photo and video</a></li> <li><a href="#Mobile">Mobile</a></li> <li><a href="#RIA">Rich Internet applications</a></li> <li><a href="#TechnicalCommunication">Technical communication</a></li> <li><a href="#Training">Training and eLearning</a></li> <li><a href="#WebConferencing">Web conferencing</a></li> </ul> </li> <li><a href="#">All industries and solutions</a></li> </ul> </li> <li>Products <ul> <li><a href="#PCProducts">PC products</a></li> <li><a href="#MobileProducts">Mobile products</a></li> <li><a href="#AllProducts">All products</a></li> </ul> </li> <li>Support <ul style='width: 200px;'> <li><a href="#SupportHome">Support home</a></li> <li><a href="#CustomerService">Customer Service</a></li> <li><a href="#KB">Knowledge base</a></li> <li><a href="#Books">Books</a></li> <li><a href="#Training">Training and certification</a></li> <li><a href="#SupportPrograms">Support programs</a></li> <li><a href="#Forums">Forums</a></li> <li><a href="#Documentation">Documentation</a></li> <li><a href="#Updates">Updates</a></li> </ul> </li> <li>Communities <ul style='width: 200px;'> <li><a href="#Designers">Designers</a></li> <li><a href="#Developers">Developers</a></li> <li><a href="#Educators">Educators and students</a></li> <li><a href="#Partners">Partners</a></li> <li type='separator'></li> <li>By resource <ul> <li><a href="#Labs">Labs</a></li> <li><a href="#TV">TV</a></li> <li><a href="#Forums">Forums</a></li> <li><a href="#Exchange">Exchange</a></li> <li><a href="#Blogs">Blogs</a></li> <li><a href="#Experience Design">Experience Design</a></li> </ul> </li> </ul> </li> <li>Company <ul style='width: 180px;'> <li><a href="#About">About Us</a></li> <li><a href="#Press">Press</a></li> <li><a href="#Investor">Investor Relations</a></li> <li><a href="#CorporateAffairs">Corporate Affairs</a></li> <li><a href="#Careers">Careers</a></li> <li><a href="#Showcase">Showcase</a></li> <li><a href="#Events">Events</a></li> <li><a href="#ContactUs">Contact Us</a></li> <li><a href="#Become an affiliate">Become an affiliate</a></li> </ul> </li> </ul> </div> <br /> <div style='margin-left: 60px; margin-top: 120px;'> <div style='font-size: 16px; font-family: Verdana Arial;'> Settings </div> <div style='margin-top: 20px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='animation' checked='checked'>Enable Animation</div> <div style='margin-top: 20px;' id='disabled'>Disabled</div> </div> <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='hover' checked='checked'>Enable Hover</div> <div style='margin-top: 20px;' id='open' checked='checked'>Auto Open</div> </div> <div style='margin-top: 20px; margin-left: 60px; font-size: 14px; font-family: Verdana Arial; float: left;'> <div id='topLevelArrows'>Show Top-Level Arrows</div> </div> </div> </div> </div> </body> </html>I tried to put this page on my web site.
if I open it from my mac/pc it working fine, but if I open it from my ipad/iphone I see the menu in ‘mobile version’.
is it possibile to see the menu on device mobile with the same layout of desktop?
– sorry for my english – thanks
AleHi Ale,
Yes, it is possible. Add reference to jqxmenu.js and jqxcore.js and remove jqx-all.js.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.