css pointer-events property change and respective jquery events not triggering together - javascript

Here is my code segment. I am using iscroll 4 for scroll in touch devices and desktop.
$('#next_item').bind('mousedown touchstart',function (e) {
//do something onclick
$(this).bind('mousemove touchmove',function(e){ //triggers only when i drag over it
dragstart = true;
$(this).css('pointer-events', 'none');
myScroll._start(myDown);
return;
});
});
$('#next_item').bind('mouseup touchend',function (e) {
if(dragstart) {
dragstart = false;
$(this).css('pointer-events', 'auto');
}
});
I have the click event on #next_item which does a specific task and also have the drag event on #next_item which does different task. Now the problem is when #next_item receives drag event the css pointer-events is changed to none immediately but the drag is not triggering. When i do mouseup and then again drag from over #next_item then only the drag is triggered. I need the css pointer-events to pass drag event to the underlying element. Please suggest if i am doing anything wrong. Without pointer-events iscroll gives error while passing the drag event below #next_item

When you want to disable the pointer event for an element with .css():
$('#element_id').css('pointer-events','none');
When you want to enable the pointer event for an element with .css():
$('#element_id').css('pointer-events','');
In #1, the element gets disabled and then you cannot access that element.
In #2, the same element gets enabled and you can perform other jQuery operation on it.

I've had better luck using the methods provided with iScroll rather than rolling my own. Specifically, onBeforeScroll and onScrollEnd.
var myScroll;
function loaded() {
myScroll = new iScroll('scroller-parent', {
onBeforeScrollStart: function () {
$('#scroller').css('opacity',0.5); // just for a visual ref
return false;
},
onScrollEnd: function () {
alert('done');
$('#scroller').css('opacity',1);
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
Also, the inclusion of the listeners for touch and the DOM help. Wish I knew exactly what you were trying to do - might be able to show you a better example.
If I'm way off, I'll pull this answer. BTW, jQ 1.6.4 working fine for this answer.
HTH

Include the following <script> in your page:
HTML
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>
$(document).ready(function () {
$('#widget').draggable(); // This is required for drag...
$('#widget').dialog().addTouch();
// Here you call your functions and perform
// the functionality for touch and drag...
});
</script>
</head>
<body>
<div id="widget" style="width:200px; height:200px border:1px solid red" ></div>
</body>
It is just an example, as I am completely unaware of what functionality you want from your code snippet. It may not answer your entire question, but this is the logical flow required to solve the problem.

Related

How to wrap multiple dynamic eventListeners into one?

I just started to learn js and need a little help: I have the following function:
//SET CHAT BEHAVIOR
function chatSettings() {
console.log('ChatSettings called')
function BtnAndScrollBar(texteditor) {
console.log('BTNAndScrollBar called');
const sendBtn = $('.cl.active').find('.sendBtn');
const attachBtn = $('.cl.active').find('.attachBtn');
console.log(sendBtn)
}
function sendAndDeleteMessage(send) {
console.log(send);
}
var sendBtn = $('.cl.active').find('.sendBtn');
sendBtn.mousedown(function () {
sendAndDeleteMessage(this);
});
var textEditor1 = $('.cl.active').find('.chatTextarea');
textEditor1.on('focus change mousedown mouseout keyup mouseup', function (){
console.log(this);
BtnAndScrollBar(this)
});
}
$('document').ready(function () {
console.log('hello');
$('.tabs').tabs();
chatSettings();
});
I prepared a js.fiddle - As you can see from console.log when clicking into the textarea, the eventListener always listens to #cl1, even if .cl.active switches along with the according TAB.
The events in the textarea are just relevant, if .cl is active. My target is to wrap all three eventListener into one and apply the event to the textarea in the active stream, but all I tried went wrong... Can anyone help? #Dontrepeatyourself #DRY
$(".chatTextarea").on(
'focus change mousedown mouseout keyup mouseup',
function (this) {
//this.id can contain the unique id
greatFunction(this);
});
This will bind event individually with unique id found with this keyword and also wraps all event listener into one function but this is better when you want to process each event with same functionality
please let me know if this helps.
Peace
$(".cl textarea").on('focus change mousedown mouseout keyup mouseup', function () {
greatFunction(this)
});
Tada!
P.S. Is there a reason greatFunction is defined inside window.onload?
Try using $(document).ready function to load code when the page loads.
Also use $('textarea #cl1').on to get the textarea with the #cl1 or whichever id you want to use and then call the function after using the .on.
Hope this helps!
Let me know if it works!
$(document).ready(function () {
function greatFunction(elem) {
//do stuff
}
$('textarea').on('focus change mousedown mouseout keyup mouseup', function () {
greatFunction(this)
});
}
First off, I changed the onload to bind with jQuery, so all your logic is doing jQuery bindings, rather than swapping back and forth between jQuery and vanilla javascript. Also, doing an actual binding removes an inline binding.
Next, the binding has been condensed into a single delegate event listener. Since you eluded in your comments that it wasn't working for the active element after the active was moved or added, this reflected that you were dealing with dynamic elements. Delegate event listeners are one way to handle such things.
Delegate event listeners bind on a parent element of the elements that will change, or be created. It then waits for an event to happen on one of it's children. When it gets an event it is listening for, it then checks to see if the element that it originated from matches the child selector (second argument) for the listener. If it does match, it will then process the event for the child element.
Lastly, I added some buttons to swap around the active class, so you could see in the snippet that the event handler will start working for any element that you make active, regardless of it starting out that way.
$(window).on('load', function () {
function greatFunction (elem) {
console.log(elem.value);
}
$(document.body).on(
'focus change mousedown mouseout keyup mouseup',
'.cl.active .chatTextarea',
function () {
greatFunction(this);
}
);
$('.makeActive').on('click', function () {
$('.active').removeClass('active');
$(this).closest('div').addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cl1" class="cl active"><textarea class="chatTextarea">aa</textarea><button class="makeActive">Make Active</button></div>
<div id="cl2" class="cl"><textarea class="chatTextarea">bb</textarea><button class="makeActive">Make Active</button></div>
<div id="cl3" class="cl"><textarea class="chatTextarea">cc</textarea><button class="makeActive">Make Active</button></div>

jQuery: Resize event does not fire when using multiple events in a selector

I would like to assign multiple events to a selector instead of creating separate event.
$('element').on('click resize scroll mouseover', function(){
// do something
});
The problem is that the resize event does not fire while the others do.
The documentation for on states that the event argument is one or more space-separated event types and optional namespaces, such as click or keydown.myPlugin. So essentially, what you'r showing in your question is the answer itself.
In the next snippet you can see that clicking an moving the mouse over the element both trigger the listener. What you do inside there is entirely up to you
$(function() {
$("#target").on("click mouseover", function(ev) {
$("#output").text($("#output").text() + "\n"+"event triggered");
})
});
$(function() {
$("#target").on("click mouseover", function(ev) {
$("#output").text($("#output").text() + "\n"+"event triggered");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">I'm a target</div>
<pre id="output">
</pre>
space seperated is correct.
$('element').on('click resize scroll mouseover', function(){
// do something
});
But if the element is live one, you should use this statement.
$(document).on('click resize scroll mouseover', 'element', function(){
// do something
});
$('element').on('click mouseover', function(e) {
// your code here
});

Jquery click event not working on mobile device

I am trying to make the below JSFiddle work for tablet/mobile devices (e.g. 'on touch' as well as 'click').
https://jsfiddle.net/lkw274/7zt1zL0g/87/
<div class="user-navigation">
<a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>
$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
e.preventDefault();
$(".user-navigation a.mobile-menu-new").toggleClass("current");
});
});
.current { background: #F00;}
Expected behaviour:
On clicking 'Menu', either by touch or with clicked with mouse, the background is highlighted red until it is clicked again when the class should be removed, removing the red background and returning it to its original state.
Current behaviour:
On clicking 'Menu', by touch on mobile/tablet device, the background is highlighted red however the class is not removed when 'menu' is clicked for the second time.
Could anyone help to understand how this code needs to be modified for tablet/mobile devices?
I have tried the solution in the below StackOverflow link however this did not function on click once implemented.
document-click-function-for-touch-device
Thanks in advance.
Looks like event delegation is the way to do this since, when you modify the target element, bind seems to fail.
Try the following (works on my iPhone/Chrome).
$(document).ready(function() {
$(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
Please note I have used .delegate since you seem to be using jQuery 1.6 (as per your fiddle) as otherwise, with jQuery 1.7+, you could use .on like below.
$(document).ready(function() {
$(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
e.preventDefault();
$(this).toggleClass("current");
});
});
add the cursor:pointer to the property of your class and it should work find in mobile
.user-navigation{
cursor:pointer
}
$(selector).bind("click touchstart", function(){
.......
});
Well, in modern jQuery versions, I suppose something like this:
$(document).on('click','selector', function(e){
e.preventDefault();
your code here
});
...would do the trick for mobile devices...

jQuery onclick not working on mobile

I'm trying to activate a menu with jQuery with a click (touch) on mobile, but it is not working in mobile. When I do the 'window' resize to try the mobile look, it works with the click, but in an emulator or even trying it with my phone, it doesn't work.
HTML Markup
<img src="i/mobilemenu.jpg" id="mobileMenuButton" style="position:absolute; right:0;"/>
CSS:
#mobileNavigation {display:none}
Javascript Code:
<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('click touchstart',function(){
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
}
else
{
$('#mobileNavigation').css('display','none'); }
});
});
</script>
Establish a click handler based on the client as such:
var clickHandler = ("ontouchstart" in window ? "touchend" : "click")
and use it whenever you want to listen to click events:
$(".selector").on(clickHandler, function() {...})
This way you can always make sure the proper event is being listened to.
<script type="text/javascript">
$(document).ready(function(){
$('#mobileMenuButton').on('mousedown touchstart',function(){
var userAgent = window.navigator.userAgent;
if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)|| userAgent.match(/Android/i)) {
if ($('#mobileNavigation').css('display') == 'none') {
$('#mobileNavigation').css('display','block');
} else {
$('#mobileNavigation').css('display','none');
}
}
});
});
</script>
Just provide the user agent.
I remember when I was building a mobile app, elements that weren't links wouldn't pick up on the click event unless I gave them the CSS property of cursor: pointer. Perhaps this is a similar issue. Try giving the button that property in the style attribute.
Came across this question and realized the click (and touchstart) should work.
#vulcanR, it is not working in your case is because you already have #mobileNavigation as display: none; So, there is no place for the event to be triggered.
Instead, try the following code and it should work-
$(document).ready(function() {
$('#mobileMenuButton').on('click touchstart', function() {
if ($('#mobileNavigation').css('opacity') == '0') {
$('#mobileNavigation').css('opacity','1');
} else {
$('#mobileNavigation').css('opacity','0'); }
});
});
});
The reason behind this working is that opacity:0 retains the height and width of the element whereas display:none makes the dimensions zero, so there is no estate for the event.
You could have also used visibility:hidden, but that doesn't listen to click event or any events in general.

How to get JQuery.trigger('click'); to initiate a mouse click

I'm having a hard time understand how to simulate a mouse click using JQuery. Can someone please inform me as to what i'm doing wrong.
HTML:
<a id="bar" href="http://stackoverflow.com" target="_blank">Don't click me!</a>
<span id="foo">Click me!</span>
jQuery:
jQuery('#foo').on('click', function(){
jQuery('#bar').trigger('click');
});
Demo: FIDDLE
when I click on button #foo I want to simulate a click on #bar however when I attempt this, nothing happens. I also tried jQuery(document).ready(function(){...}) but without success.
You need to use jQuery('#bar')[0].click(); to simulate a mouse click on the actual DOM element (not the jQuery object), instead of using the .trigger() jQuery method.
Note: DOM Level 2 .click() doesn't work on some elements in Safari. You will need to use a workaround.
http://api.jquery.com/click/
You just need to put a small timeout event before doing .click()
like this :
setTimeout(function(){ $('#btn').click()}, 100);
This is JQuery behavior. I'm not sure why it works this way, it only triggers the onClick function on the link.
Try:
jQuery(document).ready(function() {
jQuery('#foo').on('click', function() {
jQuery('#bar')[0].click();
});
});
See my demo: http://jsfiddle.net/8AVau/1/
jQuery(document).ready(function(){
jQuery('#foo').on('click', function(){
jQuery('#bar').simulateClick('click');
});
});
jQuery.fn.simulateClick = function() {
return this.each(function() {
if('createEvent' in document) {
var doc = this.ownerDocument,
evt = doc.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, doc.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
this.dispatchEvent(evt);
} else {
this.click(); // IE Boss!
}
});
}
May be useful:
The code that calls the Trigger should go after the event is called.
For example, I have some code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
$(function() {
$("#expense_tickets").change(function() {
// code that I want to be executed when #expense_tickets value is changed, and also, when page is reload
});
// now we trigger the change event
$("#expense_tickets").trigger("change");
})
jQuery's .trigger('click'); will only cause an event to trigger on this event, it will not trigger the default browser action as well.
You can simulate the same functionality with the following JavaScript:
jQuery('#foo').on('click', function(){
var bar = jQuery('#bar');
var href = bar.attr('href');
if(bar.attr("target") === "_blank")
{
window.open(href);
}else{
window.location = href;
}
});
Try this that works for me:
$('#bar').mousedown();
Technically not an answer to this, but a good use of the accepted answer (https://stackoverflow.com/a/20928975/82028) to create next and prev buttons for the tabs on jQuery ACF fields:
$('.next').click(function () {
$('#primary li.active').next().find('.acf-tab-button')[0].click();
});
$('.prev').click(function () {
$('#primary li.active').prev().find('.acf-tab-button')[0].click();
});
I have tried top two answers, it doesn't worked for me until I removed "display:none" from my file input elements.
Then I reverted back to .trigger() it also worked at safari for windows.
So conclusion, Don't use display:none; to hide your file input , you may use opacity:0 instead.
Just use this:
$(function() {
$('#watchButton').trigger('click');
});
You can't simulate a click event with javascript.
jQuery .trigger() function only fires an event named "click" on the element, which you can capture with .on() jQuery method.

Categories