Wednesday 15 August 2012

jquery - HREF links not working on iPad -



jquery - HREF links not working on iPad -

so i've got menu written nested list of form:

<ul id="nav-secondary" class="menu"> <li><a href="javascript:;">about us</a> <ul> <li><a href="http://our.site.com/about-us/index.php">our history</a></li> <li><a href="http://our.site.com/about-us/affiliates.php">affiliated stuff!</a></li> <li><a href="http://our.site.com/about-us/what-is-science/index.php">what science?</a></li> <li><a href="http://our.site.com/about-us/cognoscente-email-list.php">cognoscente email list</a></li> <li><a href="http://our.site.com/about-us/life-in-bloomington.php">life in bloomington</a></li> <li><a href="#">science links</a> <ul> <li><a href="http://our.site.com/about-us/science-links/current-issues.php">current issues</a></li> <li><a href="http://our.site.com/about-us/science-links/experiments.php">experiments</a></li> <li><a href="http://our.site.com/about-us/science-links/scientists.php">some scientists</a></li> <li><a href="http://our.site.com/about-us/science-links/professional-organizations.php">professional organizations </a></li> </ul> </li> <li><a href="http://our.site.com/about-us/contact-information.php">contact us</a></li> <li><a href="http://our.site.com/about-us/spotlights.php">spotlights</a></li> <li><a href="http://our.site.com/about-us/employment.php">employment</a></li> </ul> </li> . . .

this goes on quite while. i've written jquery give nice sliding effect. in document ready function.

$('#nav-secondary li ul').hide(); $('#nav-secondary li a').each(function () { var = $(this); var href = $(this).attr('href'); var current_page = window.location.pathname; if(href.indexof(current_page) !== -1 && current_page !== "/" && current_page!== "/index.php") { $(this).addclass('active'); $(this).parents().addclass('active'); $(this).parents().show(); $(this).attr("href", "javascript:;"); } }); $('#nav-secondary li > a').on('click touchstart', function() { if ($(this).attr('class') != 'active'){ $(this).next().slidetoggle(); $(this).parents().addclass('active'); } else { if(href.indexof(current_page) !== -1 && current_page !== "/") { $(this).slidetoggle(); } } });

because want people able utilize ipads browse our site. on ipad, sliding menu works none of links on page work unless hold downwards finger on them in case you're giving safari's dialog box allowing open it/open in new tab/window/etc. links, except sliding menu sections, require touch hold open them.

are using jquery mobile chance?

the first thing larn in jquery phone call code within $(document).ready() function execute dom loaded. however, in jquery mobile, ajax used load contents of each page dom navigate, , dom ready handler executes first page. execute code whenever new page loaded , created, can bind pageinit event. event explained in detail @ bottom of page.

jquery html ios ipad

No comments:

Post a Comment