I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
hope you can help me. I'm freaking out after spending several days trying to solve this problem.
My JavaScript mouse event functions don't work on iOS devices. I red this apple article and i added to my html tags this attribute: onclick="void(0)" but it just doesn't want to work. i can trigger an alert message on any mouse events like this:
document.getElementById("el").addEventListener("mousedown", function(){
alert("Bla-Bla");
)};
but stuff like this inside the same eventlistener is not being executed:
document.getElementById("el").classList.remove("bla-class");
does somebody maybe know if there is a solution for this problem?
You changed the order of the brackets in your code, especially in the last line!
It should be like this:
document.getElementById("el").addEventListener("mousedown", function(){
alert("Bla-Bla");
});
The problem is probably not your code. The other thing that could cause this is that JavaScript might not be enabled for browsers in IOS, so you can try to go to Settings > Safari > Advanced > JavaScript and then enable it.
I'm making a website where the user sees a text when hovering over an image. Problem is, it doesn't work on mobile devices(touchscreen etc). So I have been coding a script which will detect wether the client is desktop or mobile, if it's mobile, it will show the text over the image instantly.
But it's not really working. Can someone find my mistake?
Here's the link to the test webpage: Link.
Code can be found in the head. (sorry i dont know how to paste it in)
Thanks!
something like bootstrap would automatically turn your hover events into click events on mobile
Another option would be to use #media queries to make them visible on mobile
use #media(min-width:768px){
.textOnHover{
visibility:visible;
}
}
Rather than browser detection you should be using feature detection for this kind of task. Take a look at Modernizr for detecting touch functionality on the client's browser. You can then use their JavaScript API to solve your problem.
If you opt for CSS class names in your Moderniser build, it will add helper classes to your <html> element so you'll be able to use an entirely CSS solution, like so:
.touch .text {
visibility:visible;
}
I am trying to make a little note pad app for mobile safari for funzies but so far it doesn't seem to be working out. I want to prevent page scrolling so it doesn't have the rubberband and feel like a webapp but to do this I am using:
document.ontouchmove = function(e){
alert("calling prevent default");
e.preventDefault();
}
This works great except for in textarea where it looks like ontouchmove never gets fired so page scrolling still happens. Has anyone figured out how to change apple's default functionality in the text area or figured out an alternative to text area that doesn't have apple's default functionality?
There does not appear to be a good solution at this time. I found a project that is struggling with this problem as well and folks have gotten creative with hidden spans over text fields but that is still pretty buggy for me.
http://code.google.com/p/iscroll-js/issues/detail?id=24
I guess this is just a limitation to mobile safari as there doesn't appear to be a good solution that I can find at this time.
I read somewhere that putting your content in a <div> with "overflow:hidden" and setting the height of the div should prevent scrolling. Please tell us if it works.
Using jQuery, is there a way to disable the click sound in IE that happens when you post?
The IE click sound is a feature of the browser that you can't control from JavaScript. The only way to disable it is in System Sounds in the Control Panel.
It may very well be possible using this solution: http://www.julienlecomte.net/blog/2007/11/30/
But in short, John is right about it being a browser sound not controlled by javascrÃpt or anyting else than a registry change, wich a website will not manage to do.
I know the above "trick" has worked before, so if nothing has changed it will still work.