I need to remove class from li tag when i click or tap on the navigation arrow in flexslider. It is working perfectly in all my browsers but i can't able to produce the same in iphone and ipad.when i click on navigation arrow slider moves correctly using flexslider plugin code but alert in my code comes rarely not continuously
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click', 'tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Do you have any special properties for mobile or any idea on this code?I tried touchstart instead of tap.
The two events should be combined like "click tap" instead of "click", "tap":
$(".flex-direction-nav a.flex-next,.flex-direction-nav a.flex-prev").on('click tap', function () {
alert("hi");
$(".repeat-cont li.active-slide.open").removeClass("open");
});
Also, be sure you are using jquery mobile if you are using tap()
Related
I am trying to have navbar dropdowns open on hover on desktop, and on-click on mobile. I've looked at several similar questions, but thought my approach would be easier to read and in practice, work without a hitch.
This code alone allows both desktop and mobile dropdowns to open with a click:
$('.anchor').click(function() {
$(this).siblings('.navigation__dropdown').slideToggle('slow');
});
I've made the following jQuery function, which is tested and works (per with .css and .removeClass, console.log, etc). But here, in place, I've added a .click to open dropdowns on mobile, and a .hover to open dropdowns on desktop:
(function ($) {
$(function () {
var mq = window.matchMedia('(max-width: 800px)');
mq.addEventListener('change', function () {
if (mq.matches) {
$('.anchor').click(function() {
$(this).siblings('.navigation__dropdown').slideToggle('slow');
} else {
$('.anchor').hover(function() {
$(this).siblings('.navigation__dropdown').slideToggle('slow');
});
}
});
However, after I load the website at desktop width, the following happens:
Desktop dropdowns do not open at all (undesired outcome). Using the "document ready" shorthand, I thought it would detect the viewport width when the page loaded?
I resize to mobile, and clicks open dropdowns (desired outcome).
I resize back to desktop, and hover works on dropdowns (desired outcome).
I resize to mobile again, and now dropdowns open on hover (undesired outcome). From this point, both views are locked in hover only.
Regardless of when .hover() is called (e.g. whether in an if or else, the result always gets stuck on hover animation.
Solved it by using a combination of .on() and .hover() vs .click() and hover.().
$('.anchor').on('click', function (e) {
if (mq.matches) {
e.preventDefault();
$(this).next($('.navigation__dropdown')).slideToggle('fast');
$('.navigation__dropdown').not($(this).siblings()).hide('fast');
e.stopPropagation();
}
})
$('.anchor').hover(function (e) {
if (!mq.matches) {
e.preventDefault();
$(this).next($('.navigation__dropdown')).slideToggle('fast');
$('.navigation__dropdown').not($(this).siblings()).hide('fast');
e.stopPropagation();
}
})
I have a page with multiple Bootstrap panels, and I want to make it so that only the "active" panel has the panel-primary class (so, highlighted, in a sense). The definition of "active" in this case is that the user has clicked anywhere inside a panel or changed focus with keyboard or something.
So, I started with this:
function highlightActivePanel($activePanel) {
$('.panel-primary').toggleClass('panel-primary panel-default');
$activePanel.toggleClass('panel-default panel-primary');
}
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
The trouble is, I have a table with jquery DataTables plugin inside the panels. So, if I register the click event, it generally works, but not when you click on of the DataTables paging number buttons at the bottom of the panel for some reason. The click even doesn't fire. Probably due to DT's own click events, I'm guessing.
So, I then tried the focus event:
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
... and that works better with clicking on DataTables buttons and fields, but doesn't work if the user simply clicks on the text (or in a table cell) inside a panel.
Finally, if I just simply leave both event listeners registered, it seems to work, but I'm wondering if this is smart, or if there is a better/cleaner way of doing this?
$(document).on('click', '.panel-default', function () {
highlightActivePanel($(this));
});
$(document).on('focus', '.panel-default', function () {
highlightActivePanel($(this));
});
Here's a JsFiddle that better illustrates what I'm talking about.
Edit: Just realized I can easily combine the two events like this:
$(document).on('click focus', '.panel-default', function () {
highlightActivePanel($(this));
});
But if there is still a better way to do this, let me know.
Clicking on the DataTables paging numbers triggers page.dt, so you could do click page.dt in place of click focus to avoid potentially losing focus to something else on the page (though you could also do that by using a more specific selector).
I would like to make a overlay when the uses make hover event on a link.
This part ok, the overlay created and everything fine.
But I also would like to remove this overlay, when user click (or hover) for it, and this part create a strange bug.
I try clicking for the overlay and its dosen't close, nothing happening, but if you paste script to the chrome console, this working fine.
Js, first part, add script:
var overlay = jQuery('<div class="overlay"> </div>');
$("#link-'.$myqlVideoID.'").hover(function() {
$("#hover-").attr("src","http://youtube.com/embed/'.$myqlVideoID.'?autoplay=1");
$(".drop-target").css("background-color","#070707");
$(".drop-target").css("padding","11px");
$(".drop-target").css("margin-bottom","16px");
$(".drop-target").show().fadeIn("3000");
overlay.appendTo(document.body)
});
And the second part, remove overlay:
$(document).ready(function() {
$(".overlay").click(function() {
$("#hover-").removeAttr("src");
$(".drop-target").hide().fadeOut("3000");
$(".overlay").remove();
console.log("clicked");
});
});
My site is where you can see the bug:
http://neocsatblog.mblx.hu/search/
Just search something and scroll down to "Cimkék"
Try delegating the event on the overlay by writing the following:
$(document).on('click', '.overlay', function () {
//The rest of your code
}) ;
And same for the rest of your event handlers.
The reason for this is that the element overlay is being added dynamically, and the script doesn't know about it at the moment when it's being instantiated.
I create a animation that works when I hover over it, but due to mobile reasons I want the animation to play when the user clicks or touches it.
Here is my js code that makes the hover work, but not sure how to make the onclick work.
$(document).ready(function() {
$('.phone').hover(function(){
$('.phone').addClass('phone-two');
},
function(){
$('.phone').removeClass('phone-two');
});
});
Here is a JSFiddle to explain it better.
With $.on() you can add the 'touchstart' and 'touchend' event.
$(document).ready(function() {
$('.phone').on({
'mouseover touchstart': function(){
$('.phone').addClass('phone-two');
},
'mouseout touchend': function(){
$('.phone').removeClass('phone-two');
}});
});
note that this also preserves your hover event.
here is a great post on mobile touch events: How to recognize touch events using jQuery in Safari for iPad? Is it possible?
DEMO
To bind all of your events, use this:
$('.phone').on("mouseover click touchstart touchend",function(){
$('.phone').toggleClass('phone-two');
});
Reference: http://api.jquery.com/on/
Try this
$('.phone').on('click', function (e) {
$('.phone').toggleClass('phone-two');
});
I have been using "onclick" in my javascript, but now I want it to work on Iphone as well. Is there a simple way to make all "onclick" to work like ontouchstart for devices that support ontouchstart?
Or do I need to write all script twice (one that uses onclick and one that uses ontouchstart)? :S
Note: I dont want to use jquery or any other library.
<!DOCTYPE html>
<title>li:hover dropdown menu on mobile devices</title>
<script>
window.onload = function () {
if ('ontouchstart' in window) {
// all "onclick" should work like "ontouchstart" instead
}
document.getElementById('hbs').onclick = function () {
alert('element was clicked');
}
}
</script>
<a id=id1 href=#>button</a>
This post got more attention, so I'm going to add another commonly used, more up to date, trick:
// First we check if you support touch, otherwise it's click:
let touchEvent = 'ontouchstart' in window ? 'touchstart' : 'click';
// Then we bind via thát event. This way we only bind one event, instead of the two as below
document.getElementById('hbs').addEventListener(touchEvent, someFunction);
// or if you use jQuery:
$('#hbs').on(touchEvent, someFunction);
The let touchEvent should be declared out of function (also not in a document.ready) at the top of your javascript. This way you can use this in all your javascript. This also allows easy (jQuery) usage.
Old answer:
This fixes the need for copying your code (well at least to a minimum). Not sure if you can combine them
function someFunction() {
alert('element was clicked');
}
document.getElementById('hbs').onclick = someFunction;
document.getElementById('hbs').ontouchstart= someFunction;
document.getElementById('hbs')
.addEventListener('click', someFunction)
.addEventListener('touchstart', someFunction);
The reason javascript is not working on the iPhone in Safari is because iPhones have the option to turn off Javascript.
Go to "Settings"
Then scroll down to "Safari"
Then scroll all the way to the bottom "Advanced"
Then turn on Javascript!
Also, you can check if Javascript is enabled with this code:
<script type="text/javascript">
document.write("Javascript is working.")
</script>
<noscript>JavaScript is DISABLED!!!!!!</noscript>