Hello this may be a little clean and green.
The current stack I am using is:
phonegap cordova
jquery mobile
and I am making a TODO app for IOS
the app works fine,
<ul id="todo_list" data-role="listview" data-autodividers="false" data-filter="true" data-theme="d">
<li id="'+i+'"><span style="white-space:normal;">'+todo+'</span></li>
</ul>
however what I would like to implement is edit on click, like jeditable. when the user click on the
<li>
element instead of popping a textbox.
Related
I am modifying an existing navigation system for the iphone which does not support the hover class. The menu should work on both a desktop computer and on iphone.
When I click on a menu item it shows and hides correctly. It also shows and hides on hover. Great. The problem is that when a user clicks on a link on the iphone and navigates to a different page, when the user comes back to the original page the menu is still open. It remains that way until the user dutifully clicks the menu again to hide it whichisi not acceptable.
Can anyone help on this? I have been at this a full day checking Stackoverflow with no results. My wife wants a divorce and my girl friend is unhappy too.
Here's the operative part of the css.
<div class="top_nav">
<ul id="nav" class="dropdown">
<li <span class="dir">Desserts</span>
<ul>
<li>Pie</li>
<li>Ice Cream</li>
<li>Toppings
<ul>
<li>Chocolate Sauce</li>
<li>Nuts</li>
<li>Whipped Cream</li>
</ul>
</li>
</ul>
</li>
<li>Dessert Wines</li>
<li>Brandy</li>
</ul>
</div>
$(document).ready(function(){
$('.top_nav').children("ul").children("li").click(function(e) { //this works with click
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
$('.top_nav').children("ul").children("li").children("ul").children("li").click(function(e){
if($(e.target).closest("li").get(0) !== this) { return; }//anti-bubbling measure (try without this line and see the effect)
$(this).find("ul").stop(true, true).toggle();
});
});
I'm working on a site that another designer built: http://bigbolts.qa.aztekhq.com/. The products in the New Products and Recently Viewed areas on that page have two buttons with tooltips on them, and when they are clicked, they are supposed to trigger other link events: "More Information" goes to the detail page, "Add To Cart" triggers a modal. This works fine on desktops, but not on touch devices. On my iPhone and iPad, touching the links only triggers the tooltips and nothing else. I added data-options="disabled-for-touch:true" to the links, but it does not seem to be working.
foundation makes it easy to disable or enable on touch-enabled devices, just add class= "show-for-touch" or "hide-for-touch" to the element you want to disable. code example below.
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>
Ahem... according to the tooltips documentation, it is better to add data-options="disable_for_touch:true" to your link. Like this:
<span data-tooltip data-options="disable_for_touch:true" class="has-tip" title="Tooltips are awesome!">
Your Cart
</span>
i had web app using jquery mobile framework, i added back button there using this code:
<div data-role="header" data-theme="g" data-position="fixed" data-tap-toggle="false">
<a data-icon="back" data-role="button" data-add-back-btn="true" data-direction="reverse" data-rel="back" >Back</a>
</div>
its working when normal stage and even minimize mobile safari... but when minimize my webapp fullscreen mode then reaopen my back button not working, for example: i link page A to B while page B i minimize my fullscreen webapp, then when return to Page B again if i click back burron how to go back Page A.?
i am making a website for mobile devices, in which i have a list of name and i need to bind click event to the list. i done this using jquery. in all webdevices (android, blackberry, nokia) when i click the list the result will come but nly in iphone the event is not triggering. how can i solve it.
<ol id="movie-list">
<li> Movie 1 </li>
<li> Movie 2 </li>
<li> Movie 3 </li>
</ol>
$('#movie-list li").live("click", function() {
console.log($(this).html());
});
http://bugs.jquery.com/ticket/5677 - Live Click Events Don't Register On MobileSafari (iPhone)
Apparently that's a jQuery bug. "The workaround is to add onclick="" to the element you are attaching to...."
On a different note though, .live() has been deprecated.
The link provides information on porting to newer methods. If using jQuery 1.7+:
$(document).on("click", "#movie-list li", function() {
console.log($(this).html());
});
Use jquery .on instead of .live
There is typo in your code '#movie-list li" should be "#movie-list li"
$(document).on("click", "#movie-list li", function() {
alert($(this).html());
});
EDIT:
Exact duplicate - How do I use jQuery for click event in iPhone web application
I have a single-page scrolling website. It uses a fixed-position nav bar with jquery to scroll to different sections of the website. The site works fine except for on the iOS (I haven't tested it on Android). On iOS, after clicking a link, the navigation freezes until you manually scroll up or down. For some reason the link stays active until you scroll. Is this a bug in Mobile Safari? Is there some workaround?
Here's the basic HTML:
<body>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<div class = "page" id = "home"> </div>
<!-- About -->
<div class = "page" id="about">
<div class="pagebreak"></div>
</div>
<!-- Portfolio -->
<div class = "page" id="portfolio">
<div class="pagebreak"></div>
</div>
<!-- Contact Me -->
<div class = "page" id="contact">
<div class="pagebreak"></div>
</div>
</body>
Here's the actual site if you would like to see the problem: http://boundincode.com
BTW, I don't think this is a jquery or javascript issue because even if I remove the javascript and the jquery, the problem persists.
I'll add another answer since it's completely separate from my original one.
Since you need a temporary workaround, you might find what you're looking for in iScroll 4. I'd used it to do what you're trying to accomplish in pre-iOS 5 days so it might be worth looking into.
position: fixed support was only added to Mobile Safari in iOS 5, so it's likely that the implementation of it is still buggy, especially if you're seeing the same problem in other sites. Probably worth filing a bug report with Apple.