jQuery: Prevent multiple clicks? - javascript

I'm trying to prevent mutiple clicks on a link and I need to wait until the function's complete before allowing another click on the same link.
However, everything I do, the multiple clicks is always allowed.
This is my code:
var active = false;
$('#rotRight').live('click', function(){
if (active) {
return;
}
$(this).attr('id', 'rotRight1');
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
if($(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90
})){
active = true;
}
$(this).attr('id', 'rotRight');
active = false;
});
I know I'm in the right path. I just need someone to let me know what i'm missing or if I'm doing something wrong please.
Any help would be appreciated.
Thanks

The rotate plugin has a callback where you can reset the active flag value
var active = false;
$('#rotRight').live('click', function() {
if (active) {
return;
}
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
active = true;
$(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90,
callback: function() {
active = false;
}
})
});

Try preventing default behaviour first before returning
var active = false;
$('#rotRight').live('click', function(e){
if (active) {
e.preventDefault(); // prevent default behaviour before returning
return;
}
...
});

You could always create an overlay (loading screen), stopping the user doing anything till the process is completed via a full screen div with the following css:
#overlay {
background-color: rgba(0, 0, 0, 0.3);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}​
This will do the following: https://gyazo.com/aa833914eda1c39d3b8198db2b32dc41
Makes all content un-clickable until after the loading screen has finished.

You can try to use the Data attribute on your link. Like that, you can set the "active" property on the link itself and act in consequence. Jquery handle that system with $().data(string) method. I think it's cleaner than using a global "active" var.
$('#rotRight').live('click', function() {
if ($(this).data("active") != undefined && $(this).data("active") == true) {
return;
}
var curAngle = parseInt($(".selected").getRotateAngle()) || 0;
$(this).data("active") = true;
var self = $(this);
$(".selected").rotate({
angle: curAngle,
animateTo: curAngle - 90,
callback: function() {
self.data("active") = false;
}
})
});

$('#rotRight').live('click', function(e) {
if (e.handled!=true) {
e.preventDefault(); // prevent default behaviour before returning
return;
}
e.handled=true;
});

Related

Change element css when div has specific class

I have problem with my code. What I want to do is change css of elemnt when I'm on first div. So, when I'm on first div my element have for example font-size: 24px; when I scroll down my element should have font-size: 40; I'm using wordpress and Vase theme. My site - http:///www.ciranga.pl
When I'm on main slide (with red background) I want to make my arrows on right to be white. When I scroll down I want it to be red. How Can I do that? Any help would be great.
jQuery(document).ready(function($) {
if ($('.swiper-slide:first-of-type').hasClass('swiper-slide-active')) {
$('.vase_whiteC').css('font-size', '40px');
} else {
$('.vase_whiteC').css('font-size', '24px');
}
$('html').keydown(function(e) {
var Key = e.keyCode;
if ([37, 38, 39, 40].indexOf(Key) > -1) {
// up!
if (Key == 38) {
$(".umicon-vase_arrowPrev").parent().trigger("click");
}
// down!
if (Key == 40) {
$(".umicon-vase_arrowNext").parent().trigger("click");
}
return false;
}
});
});
After working with the original poster, we have arrived at this solution:
$(window).on('wheel', function() { setButtonState(); });
arw = $('.sliderBtnWrapper [class*="vs_swiper-button"]').click(function() { setButtonState(); });
function setButtonState() {
setTimeout(function() {
var sbw = $('.sliderBtnWrapper').children('.vs_swiper-button-prev-contentSlider.swiper-button-disabled').length;
if(!sbw) {
arw.css('color', 'red');
} else {
arw.css('color', 'white');
}
}, 600);
}
You can use other methods like $(document).scroll(function(){
Below code is not your answer but you can try something like that
var
$w = $(window).scroll(function(){
if ( $w.scrollTop() > targetOffset ) {
// add css here
}
}
targetOffset would be 38,40.

Enable double tap event while allowing scrolling using Jquery

I have been developing mobile apps using Cordova/Phonegap and this time I had to enable a double tap on rows of one specific table. I don't want to use a plugin or another library for it as it is only for one part of the app. How do I check double tap on Javascript?
So I searched "How do I check for double tap in javascript?", and voila! using #mfirdaus answer in this question I solved it. But I came to another issue, I cant scroll. So I searched "How do I enable scrolling while checking for double tap?" and found the answer here very useful.
I compiled both answers to create a function that attaches a double tap event on a given element:
var tapped = false;
var isDragging = false;
function attachDoubleTap(elem, callbacks) {
callbacks = callbacks || {};
callbacks.onSingleTap = callbacks.onSingleTap || function() {}
callbacks.onDoubleTap = callbacks.onDoubleTap || function() {}
$(document)
.on('touchstart', elem, function(e) {
$(window).bind('touchmove', function() {
isDragging = true;
$(window).unbind('touchmove');
});
})
.on('touchend', elem, function(e) {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("touchmove");
if (!wasDragging) { //was clicking
//detect single or double tap
var _this = $(this);
if(!tapped){ //if tap is not set, set up single tap
tapped=setTimeout(function(){
tapped=null
//insert things you want to do when single tapped
callbacks.onSingleTap(_this);
},200); //wait 300ms then run single click code
} else { //tapped within 300ms of last tap. double tap
clearTimeout(tapped); //stop single tap callback
tapped=null
//insert things you want to do when double tapped
callbacks.onDoubleTap(_this);
}
}
})
}
$(document).ready(function() {
attachDoubleTap('#canvas', {
onSingleTap: function() {
$('.msg').text('single tap');
},
onDoubleTap: function() {
$('.msg').text('double tap');
},
onMove: function() {
$('.msg').text('moved');
}
});
});
var tapped = false;
var isDragging = false;
function attachDoubleTap(elem, callbacks) {
callbacks = callbacks || {};
callbacks.onSingleTap = callbacks.onSingleTap || function() {}
callbacks.onDoubleTap = callbacks.onDoubleTap || function() {}
callbacks.onMove = callbacks.onMove || function() {}
$(document)
.on('touchstart', elem, function(e) {
$(window).bind('touchmove', function() {
isDragging = true;
callbacks.onMove();
$(window).unbind('touchmove');
});
})
.on('touchend', elem, function(e) {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("touchmove");
if (!wasDragging) { //was clicking
//detect single or double tap
var _this = $(this);
if (!tapped) { //if tap is not set, set up single tap
tapped = setTimeout(function() {
tapped = null
//insert things you want to do when single tapped
callbacks.onSingleTap(_this);
}, 200); //wait 300ms then run single click code
} else { //tapped within 300ms of last tap. double tap
clearTimeout(tapped); //stop single tap callback
tapped = null
//insert things you want to do when double tapped
callbacks.onDoubleTap(_this);
}
}
})
}
body {
font-family: arial;
}
#canvas {
width: 500px;
height: 450px;
background-color: #b0dddf;
border: 1px solid #ccc;
}
.msg {
border: 1px solid #ccc;
margin: 0 auto;
width: 300px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas">
<ul>
<li>Try to tap once</li>
<li>Try to tap twice</li>
<li>Try to tap and drag</li>
</ul>
<div class='msg'></div>
</div>
I hope this helps someone in the future. (I only included the Move() callback on the snippet to show it is working, it is up to you to add it to the function)

Stop a textarea acting as a drag target for images

I have various elements on the page that can be dragged onto various drop zones. However for the textarea I can't find a way to show to the user that a draggable image suitable for a different zone, may not be dropped in the textarea.
I tried all kinds of combinations handling the ondragenter and ondragover events but it has been impossible to show the "no drop" icon when the image is dragged over the textarea.
There are lots of tutorials and tips on how to made a drop zone accept everything. I want to know how to make a dropzone and a textarea in particular reject a drag item. Turning of drag behavior for the item is not an option because there are other zones that should accept that image.
This JS fiddle shows that by default an image can be dragged into a textarea resulting in the URL being shown. I would love some help showing me how to stop that.
function dragstart(event) {//stuff}
function dragenter(event) {event.preventDefault();}
function dragover(event) {event.preventDefault();}
function dragdrop(event) {event.preventDefault();}
http://jsfiddle.net/mWKd3/16/
You aren't binding/attaching your events, for the attributes ondragstart, ondragenter, ondragover, and ondragdrop are not defined.
Here is a new fiddle that displays it http://jsfiddle.net/mWKd3/18/
In-Short - the Javascript (I'm using jQuery to attach the events)
$("img").bind("dragstart",function(e){
});
$("textarea").bind("dragenter",function(e){
e.preventDefault();
});
$("textarea").bind("dragover",function(e){
e.preventDefault();
});
$("textarea").bind("dragdrop",function(e){
e.preventDefault();
});
The following was an alternative method of doing drag-n-drop.
Referencing http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/ and extending your jsfiddle
HTML*
<div style='height:2em;display:block;'></div>
<img id='imgarea' src="http://www.planetinaction.com/images/gexplorer_logo48.png" draggable="true">
<textarea id='tarea' class="textzone"></textarea>
<div id='debugger' style='top:0em;left:5em;right:0em;height:2em;width:auto;position:absolute;display:block;'>Debug Window</div>
CSS*
.targetzone {
width: 200px;
height: 200px;
background-color: yellow;
}
.textzone {
width: 200px;
height: 200px;
background-color: white;
}
Javascript*
(function($) {
$.fn.dragstart = function(opt) {
opt = $.extend({handle:"",cursor:"move"}, opt);
if(opt.handle === "") {
var $el = this;
} else {
var $el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
if(opt.handle === "") {
var $drag = $(this).addClass('draggable');
} else {
var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$(this).data("start_pos_x",$drag.offset().left);
$(this).data("start_pos_y",$drag.offset().top);
$(this).data("start_z_idx",z_idx);
$drag.css('z-index', 1000).parents().on("mousemove", function(e) {
$('.draggable').offset({
top:e.pageY + pos_y - drg_h,
left:e.pageX + pos_x - drg_w
});
}).on("mouseup", function(e) {
$(this).removeClass('draggable').css('z-index', z_idx);
$("#debugger").append(document.elementFromPoint(e.pageX,e.pageY).id + " was selected!");
})
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if(opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
$(this).offset({
top: $(this).data("start_pos_y"),
left: $(this).data("start_pos_x")
});
});
}
})(jQuery);
$("img").dragstart();

having trouble with the slideUp method in jquery

I am using a show hide slider which works for the slide down but doesn't respond for the slide up, can anyone explain where Im going wrong with this:
var moreServicesList = $('#more-services-list').hide();
$('#more-services').on('click', function(e) {
var flag = 0;
if( flag === 0) {
flag = 1;
moreServicesList.slideDown('slow');
$(this).html('Hide');
} else {
moreServicesList.slideUp('slow');
$(this).html('Show');
flag = 0;
}
e.preventDefault();
});
Thanks in advance
Kyle
You have to move var flag = 0; outside of the event listener - http://jsfiddle.net/Nnhz8/
var moreServicesList = $('#more-services-list');
var flag = 0;
$('#more-services').on('click', function(e) {
if( flag == 0) {
moreServicesList.slideDown('slow');
flag = 1;
$(this).html('Hide');
} else {
moreServicesList.slideUp('slow');
$(this).html('Show');
flag = 0;
}
e.preventDefault();
});
You're resetting your flag each time the event handler is called:
$('#more-services').on('click', function(e) {
var flag = 0;
}
To fix this, move the flag declaration in front of the event handler:
var flag = 0;
$('#more-services').on('click', function(e) {}
Here's a working example: http://jsfiddle.net/wMNtT/
Because you define your flag inside the function. It resets to zero every time the function is called.
you can use the toggle method for this like
$('#more-services').on('toggle', function(e) {
$('#more-services-list').slideDown('slow');
$(this).html('Hide');
} function(){
$('#more-services-list').slideUp('slow');
$(this).html('Show');
}
});
var flag every time initializes to 0 in your case

zClip not working

http://jsfiddle.net/w4eL7/1/
its not working in my case because my copy handler the copy id is hidden initially and zClip has a check for hidden element
if (o.is(':visible') && (typeof settings.copy == 'string' || $.isFunction(settings.copy)))
so i removed o.is(':visible') check from it but still its not working, my swf file is placed at right place.
on checking i found that
clip.addEventListener('mouseDown', function (client) {
o.trigger('mousedown');
if(!$.isFunction(settings.copy)){
clip.setText(settings.copy);
} else {
clip.setText(o.triggerHandler('zClip_copy'));
}
if ($.isFunction(settings.beforeCopy)) {
o.trigger('zClip_beforeCopy');
}
});
is not working i mean any thing inside the addeventlistner is not working at all, can anybody either tell me the workaround of doing it or can help me in fixing it
thanks
First remove the display: none; in .rightMenu in the css-file. It will be hidden after the zclip-call which moved to the beginning. I made some more smaller changes (look also at my jsfiddle: http://jsfiddle.net/wV3H8/).
$(document).ready(function() {
var selectedElement = null;
$("#copyChildDivId").zclip({
path: "swf/ZeroClipboard.swf",
copy: function() {
return (selectedElement !== null ? $(selectedElement).attr("id") : "");
},
afterCopy: function() {
$('#rightMenuItem').hide();
}
});
$('.rightMenu').hide();
$(".item").bind("contextmenu", function(e) {
$('#rightMenuItem').css({
top: e.pageY+'px',
left: e.pageX+'px'
}).show();
selectedElement = this;
return false;
});
});

Categories

Resources