here is the site I am working on:
https://cutt.ly/sxOSOTY
the problem is if you click on the image slider it doesn't detect the click event "On mobile devices only". On desktop its working. But seems like click on mobile device for that particular div is not working.
$(document).on("click", function(e) {
e.preventDefault();
alert('clicked');
});
Its working for full page, but not inside this div "slick-list draggable" I am unsure what is preventing click even. Any help is greatly Appriciated!
$('elemnt').unbind('touchend');
This resolved the issues. Now the div is clickable again.
Related
today I would like to simulate a click after a visitor click in mobile the menu covers the content and therefore you should close the menu automatically after clicking on the button. On PC it worked but on Safari it doesnt. Do you have solutions?
$(document).on('click', '.nav-side-sub-button', function(click) {
click.preventDefault();
$(".side-menu-control").click();
});
Thanks a lot!
We are facing an issue in our shopify website in mobile devices. On clicking a category, it opens and child menu items dropped down. But it doesn't get closed on clicking back. Only it gets closed, when we click on another category menu.
Could anyone help here.
Thanks in advance.
Its better to show code you are trying.
Main problem is OnClick Event does not register on mobile devices that
is because you don't click on anything you generally tap on menu. So
it will be better if you add mobile event along with it. like you can
use touchstart event as give in code below
$(document).ready(function() {
$('ul li').on('click touchstart', function() {
// Show Menu Item
});
});
Another Alternative Option
you can also detect touch devices and manipulate things -
$(document).ready(function() {
/* Detect Mobile Device As Below */
if(is_touch_device()) {
// Code Here to handle for Mobile
}
});
I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.
I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.
I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.
I tried using $("#image").css("display", "none");however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?
You could use $("#image").css("opacity", "0");
$(document).ready(function(){
$("#image").hide();
)};
when u return to show
$("#image").show();
or
$("#image").style("opacity", "0");
So I've got a simple site with a menu bar and a content area. When I click one of the buttons in the menu bar, it's supposed to do a quick fadeIn transition on a graphical element of the content area, and load external content into a div.
$("#button1").click(function(){
$(".contentdivs").fadeIn(1000);
$(".content").load("external.html");
});
This works exactly as intended in Chrome, Safari and Firefox, but not in Internet Explorer.
In Explorer, clicking #button1 will trigger the .Fadein and the .load (I can see the transition and the external data render very briefly) but then the entire page refreshes, and the external content gets unloaded.
Any ideas why this is happening, and how to fix it?
Is the button an anchor tag? You probably need to prevent the click event's default action and stop the event from bubbling in case there's an anchor parent to the button:
$("#button1").click(function(e){
e.preventDefault();
e.stopPropagation();
$(".contentdivs").fadeIn(1000);
$(".content").load("external.html");
});
I'm not very technical so excuse the following question if it is not phrased properly.
Here it goes:
My site is built with the iscroll javascript so you can click and drag the site to browse. On the portfolio page which currently is the only other slide on from the homepage, I have a thumbnail viewer which enlarges the thumbnail to show the full image, this can be seen at test.silent-g.co.uk
The problem I have, is that when you click and drag to browse back a page, it still activates the viewer, is there a way to code in to the javascript, to cancel the onclick when the mouse is dragged or would this cancel the scroll too?
Excuse the site, the links aren't working and is only a work in progress.
Any thoughts welcome and if answers could be put into laymens terms that'd be great as although I can use javascript I can't write it.
I would suggest you replace onclick with mouseup. This way, it only acts if the user releases the mouse button when the cursor is placed on the element.
The onClick should work propperly. What I tried on jsfiddle was the following.
Html:
<button id="button" onClick="alert(1)">
Your button
</button>
Then just click on the button drag your mouse away from the element and release the mouse. This doesn't trigger the onClick event.