document.getElementById working differently on iPad Safari? - javascript

I'm getting completely different behaviors in mobile Safari on the iPhone versus the iPad, both on actual hardware and in the iOS simulator, for document.getElementById.
This works on mobile and desktop but not on the iPad:
var foo = document.getElementById('foo');
foo.innerHTML = 'bar';
Actually, setting foo.[anything] isn't working on the iPad.
Website: https://davero.com/order2
Banging my head bloody. All help will be appreciated.

Are you using safari on the desktop to? Safari has had a problem before where it will return null or undefined back instead of the object.
Try using jQuery instead which would look like $('foo');
It would also be really helpful if you could post your code or atleast where you tagged foo and your script.

Related

JavaScripts not working in mac OS, iphone

I wrote js code for wordpress website, and unfortunetly it is not working in safari and every browser in mac system. I don't know why. My scripts should react for 'click' event and charge input value. In windows evrything is ok, but in safari, mac, iphone not.
I'm not sure where is a error, in safari console i can't see any mistake. My code is a little long, so if you want help me, i can send you link for my website.
<button id="checkBank" class="checkNumberButton" type="submit"><span>Sprawdź</span></button>
document.querySelector("#checkBank").addEventListener("click", function () {my code here}
Where i can find information about difference between apple system and windows?
You forgot to close addEventListener. This should work (works on my Mac)
document.querySelector("#checkBank").addEventListener("click", function () {alert("test")});
https://jsfiddle.net/hpeyr870/

Mouse click and mouse over effect for turn.js not working

I was working upon a website with a flipbook kind of jQuery effect provided by turn.js.
It was working very well on my development environment. Suddenly have found out that the mouseover effect and mouseclick has stopped working on browser Chrome V29.0.1547.66m.
It works perfectly with V26.0.1410.63 and on other browsers (Firefox).
Need to know the reason and some workaround solution for the same.
Here is the link to my webpage.
I had checked your link, I think there is some problem in turn.min.js script. Use turn.js script in place of turn.min.js it is working fine on your link.
As per issue no 399 posted on blasten/github https://github.com/blasten/turn.js/issues/399 change your turn.min.js to latest version of turn.js. This will surely solve your issue with chrome browsers' latest version on windows.
helloi was using the unminified version of turnjs and still had problems with some browsers, i read the code and discovered that mouse move events were not dispatched
i tested with 2 computers :
old Toshiba laptop with 1st-gen i7, Windows 7 Pro SP1, Opera 35.0.2066.68, Firefox 44.0.2 64Bits
brand new Intel NUC5i7RYH, Windows 8.1 Pro, same browser versions
mouse events
working properly on NUC + Firefox and Toshiba + Opera
NOT working on NUC + Opera and Toshiba + Firefox
uh ?
mouse || touch callbacks are set at line 28
touch capacity is detected at line 26
the isTouch test at line 26 returns true on some desktop browsers, which causes the mouse controls not to work
i noticed many tests provided on forum an blog posts didn't detect touch capacity properly, because they often check if touch APIs exist, which seems to be true in some Opera and Firefox browsers (i read some posts about people having the same problem with Chrome, mine works well)
i ended up using this test, which is far from perfect but does the job for now :
!(window.screenX != 0) && ('ontouchstart' in window || 'onmsgesturechange' in window);
i have no more problems, but this solution should be tested on many devices and the isTouch test must be improved
also, i got a bug in the zoom (line 90) while using latest version of jQuery, which i fixed by unchaining the two listeners as follows :
this.mousedown(zoomMethods._mousedown); // what ? chaining bug ?
this.click(zoomMethods._tap);

Safari mobile browser doesn't have selectedOptions for <select>

I am working on a web app and was testing it on my ipad when I realized that something was not working.
I decided to further look into it and discovered that this won't work on the ipad but will on desktop browser:
$(function() {
$('select').change(function(e) {
console.log(e.srcElement.selectedOptions);
});
});​
Ipad console shows undefined
Here is a jsfiddle to test it out with.
Is my approach wrong? Or is this a bug in mobile safari?
Do you mean to be using e.srcElement.selectedIndex or e.srcElement.value?
e.srcElement.options[e.srcElement.selectedIndex].getAttribute("data-sort");

I have set services.sync.prefs.sync.dom.disable_window_move_resize;false but resizeTo() still doesnt work

I am using Aurora 14.0a2 as my default browser (its the early release of firefox)
I have went into my about:config and have changed the value of services.sync.prefs.sync.dom.disable_window_move_resize; to false
Yet when I run my website the resizeTo(); function still doesn't work
here is my code:
jsfiddle_link
function onload(){
window.resizeTo(600,800);
}
I also tried it in other browsers:
Chrome (no surprise it didn't work since chrome never supports it)
opera
IE 8
Safari
None of which worked
I also tried making a link from a different website linking my website then clicking on it but it did not do the trick
any ideas?
I think the resize functionality of javascript would only work when you open it on popup windows and not when your openning it on a main browser window try checking on this link http://www.javascripter.net/faq/windowresizeto.htm it has the sample that I think would help you.

After window.open, can't print in Safari for Mac

I create a secondary browser window with Javascript code, using the window.open function, and fill it programmatically with some HTML content. It works well for all browsers that my application supports except for one: Safari on Mac. In fact, the window itself is OK but the print command is disabled. Does anybody have an idea why? I should mention that the main reason to show this window is to allow the users to print some data. I guess I could implement a "Print" button in the page but I would prefer not to (and it may not work either, but I haven't tried it).
Here is a simplified example of the code that I use to create the HTML content:
var pp = window.open("", "_blank");
pp.document.writeln("<html>");
pp.document.writeln("<head>");
pp.document.writeln("<title>");
pp.document.writeln("Hello");
pp.document.writeln("</title>");
pp.document.writeln("</head>");
pp.document.writeln("<body>");
pp.document.writeln("The body");
pp.document.writeln("</html>");
pp.document.close();
I tried variations around that code, without any success. My tests are done with Safari 5.1 on Mac OS X 10.6.8. Any help is welcome!
Have the window print itself:
Before your </html> add:
pp.document.writeln("<script type='text/javascript'>window.print()</script>");

Categories

Resources