I am using phoneGap and jQuery Mobile. When I use a <div></div> tag then it works properly but on an iPhone it is auto scroll-able. How do I stop this?
if you want to prevent a div to scroll use this:
<div id="container" ontouchmove="touchMove(event);">
content goes here
</div>
and the function touchMove(event):
touchMove = function(event) {
event.preventDefault();
}
hope this works
Related
I'm trying to prevent close of fancybox when someone click outside of fancybox-content area.
HTML:
<div id="banner-message" style="display: none">
<p>Hello World</p>
</div>
JS:
jQuery.fancybox.open(jQuery('#banner-message'), {
clickOutside: false
});
DEMO:
https://jsfiddle.net/xjw4b5jq/
You have to use clickSlide option instead.
fancybox3 works as a slider and you can reposition/resize slider area, therefore there are two similar, but different options.
I have used this config to prevent closing the modal clicking outside.
<!--HTML-->
<a id="enlace" href="#modal">enlace</a>
<div id="modal">
<p>Hola cracks</p>
</div>
// script
$("#enlace").fancybox({
clickSlide: false,
clickOutside: false
});
hope it works for u too :)
I'm trying out the ionic framework and it looks really nice. However, I have a problem with form submission: the form fires twice. First when the submit button is pressed, and then if I just tap anywhere on the screen. This happens both in the xcode simulator and on my iphone 4gs.
This is what I have done:
I install the sidemenu template with: ionic start myApp sidemenu.
I then simply paste this form in to the tab-dash template:
<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>
And in my controller I simply have:
$scope.createTask = function(task) {
alert(task.title);
};
This is the only change I made to the starter template, and still the form submits twice. I have no idea why. Would really appreciate some guidance here!
Remove the type="submit" from the button and remove the ng-submit from the form and move it as a ng-click on the button itself.
So you should end up with
<button ng-click(createTask) class="...">Create Task</button>
This is possibly because whenever the ng-click is called there are two calls made ,one by angular and other by ionic .As ionic and angular comes as a bundle when you are working with ionic project.
You could try one of this method.
1) have ionic and angular javascript seperated in your index.html
instead of including (ionic and angular in one javascript file)
ionic.bundle.min.js
use as
ionic.min.js
angular.min.js
2) Alternatively you can create a directive of your own instead of ng-click like below.
before that Include angular-touch.js and inject ngTouch as a module in your app in app.js
app.directive('myclick', function() {
return function(scope, element, attrs) {
element.bind('touchstart click', function(event) {
event.preventDefault();
event.stopPropagation();
scope.$apply(attrs['myclick']);
});
};
});
Hope this helps.
in your controller
$scope.createTask = function(task) {
alert(task.title);
};
add $scope.task= {}; to init
I've got weird problem. I'm trying to add Facebook Like Button on my website, but it doesn't show up in Internet Explorer and Firefox. Yes, I've already added this:
<html xmlns:fb="http://ogp.me/ns/fb#">
and FB-Root and JS SDK. Whenever I'm trying to add XFBML or HTML5 version, it always doesn't show up in IE and Firefox. In Chrome and Safari it works well.
However, when I leave cursor on the button that is displaying div that contains FB like box over the mouse hover, it will display properly. Also, when I put this like button in any other place on my site, it will show up.
Here's the code:
<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span>
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
</div>
</a>
</li>
It looks like Firefox and IE are rendering this box at the start of loading the page. However, they leave space for them. It's weird.
I wish you could help me. Thanks in advance.
OK, so I found solution for this problem.
Firstly, I've clear up all z-index in my css file and set z-index: 8; for .box_pop.
Secondly, set .ikonka div to display: none; and leave .ikonka:hover div with nothing (you can just don't put this in css).
Thirdly, I've set up some jQuery:
<script>
$(document).ready(function() {
$('#your-li-id').hover(function() {
$(this).addClass('pretty-hover');
}, function() {
$(this).removeClass('pretty-hover');
});
});
</script>
Note: where is #your-li-id you must put here id of your li element. This script will add pretty-hover class to your li. Then, in CSS, put this:
.pretty-hover div{
display: block;
}
It should work now.
As you can see, you mustn't set display: none; into your CSS and then - also via CSS - just add display: block; on hover.
If you will do that, iFrame won't be visible in IE or even FF. You must do this trick with jQuery.
I had the same problem on Firefox only (v.29.0.1) and it turned out to be AdBlock plus (v.2.6) blocking the Like and Share buttons from rendering.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
With following code I can not click on labels in jqtouch (on iphone simulator and iphone itself):
<ul class="rounded">
<li>
<label for="user_name">Name</label>
<input type="text" name="user_name" id="user_name"/>
</li>
</ul>
It is working well in safari, I have checked this also in demo of jquery-mobile and it is working on iphone simulator, so problem seams to be strictly jqtouch specific.
There is an obscure trick for this, using CSS:
label { cursor: pointer; }
And it will work on iPhone and iPad.
add onclick="" to the label
<label for="blah" onclick="">blah</label>
Tapping on <label> does not auto-focus linked in Mobile Safari
thanks to #Ivan I found better solution:
$('label[for],input[type="radio"]').bind('click', function(e) {
e.stopPropagation();
});
Additionally it fixes radio buttons.
The only downside is - it stops propagation, but in my case it is ok.
yeah, the user693942 CSS trick is enough, actually, it works!
label { cursor: pointer; }