Javascript won't load on mobile. Works on desktop - javascript

I made a simple calculator, works flawlessly on desktop. Then I tried it out on mobile. I thought it was just a problem with my click events not registering on the touchscreen, but I noticed something. One of the first things my JS does is an addClass, and it wasn't being added. So I wrote a couple alerts at the top and bottom of the JS document, and sure enough, they don't fire.
What puzzles me is why this entire thing works perfectly on desktop browsers, but not at all on mobile. Like the JS wasn't loaded at all. I get no errors in the console, and I've made sure my JS is ordered properly in my HTML document.
The page can be viewed here.

aSum = newArray.reduce((a, b) => a + b, 0);//'newArray.reduce' is worry at Safari.if you delete this code,will show alert beginning and finished.sorry,i don't know the method array.reduce..so can't give you solution.but if you need sum function of array,plz try aSum=eval(newArray.join('+'));

Works on Android Chrome. (Note 4)

Related

debugging jQuery snippet

I was trying to take a working jQuery snippet (it's an example to another SO answer) and improve it.
The original snippet can show a good and a bad way of doing something, by having to comment/un-comment some code. I tried to modify the HTML and the JS so that both examples can be run independently, without modifying JS code (by basically cloning sample HTML into a copy with different IDs).
Original JSFiddle worked fine: http://jsfiddle.net/thangchung/LVAaV/
My "improved" version doesn't seem to work at all: http://jsfiddle.net/dvkdvk/C2YBE/19/
(doesn't work means that when you push any button, nothing happens).
I don't know how to debug it with jQuery (with regular JS I would just sprinkle alert() everywhere). I ran "JSHint" on JSFiddle and it was OK.
Your new fiddle did not select a library. Select it from the left side of the form and click Run.
I found this by using Firebug's script debugger in Firefox. Turn on script debugging with the developer tools in your browser of choice. Otherwise, Javascript fails silently. You can then set breakpoints, look at variables, etc. That is much more efficient than using Alerts and console logs (although they do have their place).
Your main problem is with your JSFIDDLE setup. On the left hand side of the page, make sure you include the jQuery library and select onDomReady from the frameworks and extensions panel.
I tried running this script in FireFox, Firebug. The scrips runs fine here with me. Kindly see the environment in which you are trying to run this script.

Code won't work properly in Firefox or IE

Here is what is supposed to happen:
The moment the user chooses an option a certain combination of input fields should show up along with two tables.
When the user fills in the input fields and clicks the button, the results should appear in the tables.
Those tables aren't showing up. The input fields don't even show up in js fiddle.
It only works in the newest versions of Firefox, Chrome, Safari and IE.
Not in firefox 6.0 or IE 9.08.
I made the mistake of coding exclusively in Chrome at home to discover that my code doesn't work when I tried to continue working at school.
I used jsfiddle.net to validate my code and did so successfully. Although it still won't work. It doesn't even show up properly inside jsFiddle.
Here is the fiddle to demo the code:
http://jsfiddle.net/Q2nz5/5/
The outputTable method contains line Caption.align = "middle", which cannot be executed in IE and apparently in FF as well. replace it with Caption.style.textAlign = "middle"; and it will fix the problem.
The same with MCaption.
But the best you can do here is to define all styles like that in css.
In your js fiddle you were getting this error: inputOutputCreator is not defined. It is because you are loading your js in the mootools onLoad function. Change it from onLoad to no wrap in the jsfiddle settings to the left. With that changed it worked just fine for me.

tinyMCE not working on firefox 5.0

I've just realized that tinyMCE is not working when you use firefox 5.0
First I thought that's my fault with some script , but then I went straight to TinyMCE demo page http://www.tinymce.com/tryit/full.php and there was the same result.
In normal way you open page, see editor, see text inside editor.
With firefox you see editor, but nothing is inside textarea. It is empy, blank. And what's more strange there is no mouse cursor inside of it. You cannot set it there, thus you cannot write there.
Later on I made one notice.
I've started to refresh the page fast, many times so the browser cannot work fast.
And I saw that it writes textarea, then converts it into tinyMCE editor with all text inside of textarera, and then on the final step it hides or removes all the data from textarea, leaving empty editor with all buttons visible.
Any idea what's going on?
Of course I've posted this on TinyMCE forum, and bugreported it also, but things there run very slow, and on StackOverflow I've got used to fast answers :)
So if anyone has any idea about how can I fix it please tell me.
UPDATE
I think something is wrong with my computer.
I've just tested cuteEditors demo and it acts the same way
http://cutesoft.net/example/general.aspx
So I think problem is inside my computer.
Is it Firefox or what?
SOLVED
Plugins were the problem. I disabled all the plugins and everything works fine!
SOLVED Plugins were the problem. I disabled all the plugins and everything works fine!

CheckBox Issue in IE6

I am dynamically generating checkboxes for a popup window (displayed using AJAX) using javascript and on a button click I also need to call a function that checks all the check boxes before the popup is rendered.
All pages in use are JSPs and the popup is also included using the tag so it is generated already when the parent page gets loaded.
The problem is that I'm able to check all the custom generated checkboxes using the same function in IE7 and IE8. But it does not work for IE6.
I'm using something like:
var i;
for(i=0; i<size; i++){
document.getElementById('chk'+i).checked = true;
}
That code ought to work fine, even in IE6 (which, lets be honest, is a really awful browser).
However, if you have inserted those checkboxes into the page dynamically, IE6 has a known issue with dynamically added checkboxes, where it doesn't respect the .checked property.
See this page for a few possible solutions: http://bytes.com/topic/javascript/insights/799167-browser-quirk-dynamically-appended-checked-checkbox-does-not-appear-checked-ie
Hope that helps. :-)
(But my solution is: Don't support IE6. Honestly, it's usage is down to a few percent now and getting lower, so unless it's more well used by your particular demographic, just cut your losses and drop it; the remaining users will upgrade soon enough. ;-))
Without wanting to sound like a 'use jQuery' pat answer, if you were to do this with a library like jQuery, any IE6 inconsistencies would probably be nicely abstracted away.

JQuery Slider Control - slider-handle not moving

I've got a text scrollbox made with JQuery. It works fine when on its own (nationalboston.com/temp) but when I hand it off to be wrapped into a Joomla page, the slider handle doesn't move (here). As far as I can tell, everything else works fine.
I've inspected the computed CSS in Chrome Inspector, and it seems that the handle is styled as it should be (position:absolute; top:auto;). What am I doing wrong?!
EDIT:This appears to be the case in Safari 3.x Mac and Chrome 3 Alpha Mac, Not in Firefox Mac. I haven't done further testing.
I followed your link in Firefox 3.0.11 on mac and the slider works perfectly. Did you find the solution to your problem? The first idea that came to me when I read your question was that you might have a javascript namespace conflict (using more than one JS framework?). A possible solution would then have been to run JQuery in no-conflict mode, as in:
jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';
More info there: http://docs.jquery.com/Core/jQuery.noConflict

Categories

Resources