jQuery How to disable mobile scrolling then enable it - javascript

I was able to disable it like this
$('#div1').click(function(){
$(document).bind('touchmove', false);
});
But I want to enable it again when I click on another div, I tried:
$('#div2').click(function(){
$(document).bind('touchmove', true);
});
Am I doing something wrong?
I've never used this before.

$('#div2').click(function(){
$(document).unbind('touchmove');
});

Related

Froala editor not working with fancybox plugin

all the things working correctly but when I add froala in fancybox popup then space, arrowkeys not working also when I click f key then act as full screen
please give me solution:
<textarea class="form-control froala-editor" id="comment"></textarea>
js:
$(function(){
$('.froala-editor').froalaEditor();//{'placeholder': 'Enter some text...'})
setTimeout(function(){
$('.froala-editor').froalaEditor('events.focus', true);
console.clear()
console.log('fired focus trigger!')
}, 2000)
$('.froala-editor').on('froalaEditor.focus', function (e, editor) {
console.log('received focus trigger')
});
});
you can try to use in IFRAME like below
or try use another one lik tinyMCE or CKEditor...
Modal recreates textbox so you need to rebind editor may be your current issue.
i wish tihs answer helps
<script type="text/javascript">
jQuery(function($) {
$('.open-fancy-box').on('click', function(e) {
e.preventDefault();
$.fancybox.open({
type: 'iframe',
src: 'youreditor.html'
});
});
});
</script>
The question is completely wrong - fancybox works fine with anything. In your case, you simply have to tell fancybox not to listen to keyboard events, and most likely you will want to disable touch events, too:
keyboard: false,
touch : false

jQuery: hide element after it has been shown?

I have this strange scenario that I cannot understand.
Basically, I show an element using jquery show(); which works fine.
But I need to hide() the same element using the hide(); function but the element stays visible and the hide() doesn't work.
Can someone please advice on this?
Here is a working FIDDLE.
This is my code:
$(document).on('click','.buildExMain', function(e){
$(this).children('.buildExDrop').show();
});
$(document).on('click','.pSelection', function(e){
$('.buildExDrop').hide();
});
#billyonecan was spot on, adding e.stopPropagation(); after your $('.buildExDrop').hide(); fixes this.
This allows the hide click event for the sub-elements .pSelection to not bubble up to the show click event of the .buildExDrop element.
Your click to hide also triggers the click to show. this works
$(function(){
$(document).on('click','.buildExMain span', function(e){
$('.buildExDrop').show();
});
$(".buildExMain").on('click','.pSelection', function(){
$('.buildExDrop').hide();
});
});

How do I use JQuery to hide a div on click again?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#clicker").click(function() {
$(".show_this").show();
e.preventDefault();
});
});
</script>
Using the script above I am able to show .show_this on clicking #clicker but on clicking #clicker again i want to hide it. How can I tweak my code to do that?
I did some research and it seemed that by using e.preventDefault(); I would be able to achieve that but it didn't work.
You can use toggle();
$(".show_this").toggle();
This will toggle every time, so if it is hidden it will show it and vice versa
Api Documentation: http://api.jquery.com/toggle
Also event.preventDefault(); will not be able to do this, though it is useful if the .show-this is a anchor tag because it will prevent the default action and that is to follow the link.
Use .toggle() instead.
$(document).ready(function() {
$("#clicker").click(function(e) {
$(".show_this").toggle();
e.preventDefault();
});
});
jsFiddle example
You can do this using the .toggle() method like:
$(document).ready(function() {
$("#clicker").click(function(e) { // call the event variable 'e' first here
e.preventDefault();
$(".show_this").toggle();
});
});

Button won't re-enable it self using jQuery

I can't figure out why my button won't re-enable when another button is clicked. Any help will be most appreciated
My code is as follows:
$(document).ready(function() {
$('#btnAdd').click(function() {
// enable the "remove" button
$('#btnDele').attr('disabled','');
}
});
demo here: http://jsfiddle.net/ATzBA/2/
$('#btnDele').attr('disabled',false);
should do the trick.
You could also try $("#btnDele").removeAttr('disabled');
The prop function is the correct way to do this in JQuery.
$('#btnDele').prop('disabled', false); //enabled
$('#btnDele').prop('disabled', true); //disabled
$('#btnDele').prop('disabled'); //returns true if disabled, false if enabled.
See documentation here.
The "disabled" attr has to be removed completely, not just set to null/an empty string. You need to use jQuery's removeAttr():
$(function(){
$('#btnAdd').click(function(e){
$(this).removeAttr('disabled');
});
});
Somebody talks about it/browser compatibility issues here: Toggle input disabled attribute using jQuery
Instead of using the .attr function I'd use Jquery UI and use $('#btnDele').button("enable");
http://docs.jquery.com/UI/Button#methods
$(document).ready(function() {
$('#btnAdd').click(function() {
// to enable the "remove" button
// set 'disabled to false'
$('#btnDele').attr('disabled','false');
});
});

disabling an input button

I want to disable this button on document ready but I'm new to it so please help:
Here is my code:
$(document).ready function {
setTimeout("check_user()", 250);
}
please help
If button's id is button1, this should work.
$('#button1').attr('disabled', 'disabled');
The correct way to disable a button in current versions of jQuery is:
$('#btnid').prop('disabled', true);
.attr() is the old way. See the jQuery 1.6.1 release notes for more information.
$(document).ready(function(){
$('#btnId').attr('disabled', 'disabled');
});
$(function(){
$('#button').attr('disabled', 'disabled');
});
$(document).ready(function(){
$('#buttonclass').attr('disabled', true);
});

Categories

Resources