some javascript functions don't work on iOS devices (iPhone, iPad) - javascript

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.

Related

Fix specific links in website not working on iphone only

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

Why the click does not work in touch mode

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/

Unable to scroll IE7 scrollbar

I have a page with lots of scrollable containers in it. All these containers contain some list or so. Everything works perfect in all the browsers except IE7 (Having tested in IE6 and below). In IE7 when I try to scroll by clicking on the scrollbar, its not happening. But if I double click on the scrollbar, then I will get the focus on the scrollbar and I will be able to scroll. The mousewheel scroll works perfectly though.
There are a lot of jquery plugins in my page such as datatable, jquery UI, autosuggest etc.
When I disable script in my browser, the scroll works fine.
Any idea on what is happening? (as an ie7 issue)
An uncaught javascript error may be the cause of your problem. Try using try...catch, e.g.
try {
//any questionable JS code
} catch(err){
alert(err.message);
}
If there is any error, that should let you know.
Without seeing your code I'm only able to guess that your page is throwing a javascript error in ie7. There are a few javascript functions that don't work in ie7 (such as getElementsByClassName which has caught me out before). I'd suggest debugging the javascript in ie developer tools or another debugging tool to find the problem.
It seems like theres an extra click event or something blocking the scrollbar, try using $(...).unbind('click') on those elements.
Some version of IE are temperamental to non-strict syntax, e.g. if you have a missing ; somewhere. An option is to run your code through jslint but this may prove tricky if your code is not well organised.
If you have IE9 you should be able to check for errors by hitting F12, roll back the version to IE7 and monitor the console output.
Trial and error is probably the answer, if all your code is just 1 big block then I'd suggest re-factoring into manageable chunks (classes methods) first.
Good luck.
If we can use a plugin :
http://jscrollpane.kelvinluck.com/
we can easily fix this issue of cross browser scroll pane.

JavaScript parent page redirection from iframe

I need to implement parent page redirection from iframe. I know that it is impossible to do in different domains due to browsers security.
However I found that links have target attribute and tried to use it in the following way:
someLink
It works fine if I click this link manually, but I couldn't find cross-browser solution to simulate it using JavaScript.
document.getElementById('testParentRedirect').click();
This works fine in IE, however Firefox and Safari don't know click function :).
I tried to work with jQuery, but for some reason they don't simulate click event for links.
(see following post)
I couldn't find any appropriate solution on Stack Overflow.
Maybe someone could help me in it. I will appreciate it. :)
You can do this in javascript to exit a frame:
window.top.location = "http://google.com";
You can try
top.location.replace( "http://google.com" );
in javascript to "escape" from the frame.
Edit: Using replace is slightly nicer, changed my answer to use that.

IE click sound and jQuery

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.

Categories