Develop Reference

Javascript won't load on mobile. Works on desktop

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)

Solution for fixed & hidden div bug on Google Chrome

Problem: A div with visibility:visible inside a parent div with position:fixed and visibility:hidden causes rendering problems in Google Chrome. Images and examples can be found here.
A week ago you could just add the -webkit-transform:translateZ(0) to the parent div and bug solved. But it isn't working anymore:
Without -webkit-transform
With the hack.
Both are bugged.
So, is there any solution? When you resize the window, it repaints the divs, also when you open the developer tools the bug disappears.
So I've been trying to force a repaint with javascript (jQuery):
jQuery(window).scroll( function() {
jQuery("#parentDiv").addClass("nothing");
jQuery("#parentDiv").removeClass("nothing");
});
And it sometimes works (when a textfield is displayed inside the inner div). Really weird. Also tried hiding and displaying the div, adding css properties (fixed, bottom:0...)
But nothing works fine.
Any ideas?
EDIT2: Seems like it only happens to me: 2 friends, using windows and the latest version (17.0.963.79) don't see the bug in the second link. But I still see it. I've reinstalled chrome under windows, and the bug is still there.
I also have cleared the cache, but nothing changes. Am I the only one????

from my own experience when working with scroll(), all form-elements behave strangely, or do not function anymore.
You solution -webkit-transform:translateZ(0) will fix it for webkit browsers, but all others browsers will trow a translated layer above all form-elements, result is that form-element are not accessible anymore.
scroll() is a great solution for just plain info (text- images), not for forms.

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.

Colorbox in IE8 throwing a wobbly

This problem occurs in Firefox and Chrome, but Safari is fine. IE8, however, in compatability mode or not, doesn't load the overlay over the top (it just sits at the top, scrolling the content down - although I guess this is because the overlay is at the top of the markup).
It also doesn't show the image I'm attempting to show, but shrinks the overlay loading image to nothing in the top left of the screen. I am using the standard colorbox-min and the CSS that goes with that.
Inspecting the markup in the IE8 dev tools seems to hint that the content is not actually loaded into the cboxLoadedContent div.
$(document).ready(function() {
$('a[rel="preview"]').colorbox(
{
photo: true
, maxWidth: '95%'
, maxHeight: '95%'
, photoScaling: true
}
);
});
basically the page is a list of media images and when you click one it gives you the preview and allows you to scroll through ones on the page
well at least it does in FF took a little screenshot as it was shrinking the overlay thingy http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png
Anyone have any ideas?
I expect my explanation is not great, so maybe I could take a movie of it or something if needed.

Is your code wrapped in a ready function? I've seen instances where code that works in FF/Safari fails in IE because IE seems to load the DOM more slowly. In those cases it almost always turns out that I've failed to wrap the code in a ready function.
$(function() { // the important bit
$('.colorbox').load('...').colorbox();
});

Try an XHTML strict doctype...?

I've experienced the exact same symptoms - but in my case it extended to all browsers.
One cause was that I didn't include the CSS file that I use for pages that use colorbox.
Another cause was I updated to the newest version of jQuery, but didn't upgrade colorbox. (Also, if you update your jquery include, make sure that you also update your jquery vs doc - if you're even using it).
Hope that helps.

Search through your colorbox files for this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
There will be several instances of it, each pointing to a png. Make sure the path to that png is correct, then test it again.
I'm pretty sure I had this exact problem at one point, and fixing the paths was all I needed to do. However, it's been a while so my memory is a little fuzzy.

I had the same issue. I also had a problem with the image being only 10px wide due to IE not liking CSS max-width being set to 100%. To alleviate the problem I add the following to my CSS.
.cboxIE img
{
max-width:none;
_max-width:none;
}

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