We Keep Coding

Why wont this script work in Firefox?

I'm having this script, and it works fine in every browser except firefox.
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
window.onscroll = function () {
"use strict";
if (document.body.scrollTop > 7) {
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
The script doesn't seem to load at all. It's supposed to change the color of my header on scroll, and bring forth a 'back to top' button, but in firefox it does nothing. Any ideas on why this doesn't work?
I've tried updating browser to latest version, start in safe-mode without any add-ons.
Edit: I no longer have any errors in console on my site. The script still won't load, it seems like there is something in the script that firefox doesn't understand?

This code works in IE, Chrome and FF:
var header = document.getElementById('header');
var arrow = document.getElementsByClassName('toTop-transparent')[0];
var supportPageOffset = window.pageXOffset !== undefined;
window.onscroll = function() {
"use strict";
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
if (y > 7) {
console.log('here 1')
header.className = 'header-colored';
arrow.className = 'toTop';
} else {
console.log('here 2')
header.className = 'header-transparent';
arrow.className = 'toTop-transparent';
}
};
Fiddle: https://jsfiddle.net/zevane/zf8d4u36/
Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY

iPhone slider in Javascript - issue in Safari

I am new to javascript an have used the following code from http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range/
I'm having difficulty getting it to work in Safari, (it works perfectly in Chrome).
The code is given below, my apologies if this is something really obvious but I'm willing to learn :
(function(){
var slider, sliderInput, sliderButton, sliderText, sliderTimeout, sliderOnchange, unlockCheck;
slider = document.querySelector('.iphone-slider');
sliderInput = slider.querySelector('input');
sliderButton = sliderInput.querySelector('input::-webkit-slider-thumb');
sliderText = slider.querySelector('span');
unlockCheck = function(){
if(sliderInput.value == 100) {
sliderText.innerHTML = 'unlocked';
sliderInput.value = 0;
sliderText.style.opacity = 1;
} else {
setTimeout(function(){
sliderInput.value = 0;
sliderText.style.opacity = 1;
}, 1000);
}
};
sliderOnchange = function() {
sliderText.style.opacity = ((100 - sliderInput.value) / 200);
clearTimeout(sliderTimeout);
sliderTimeout = setTimeout(unlockCheck, 300);
};
slider.onchange = sliderOnchange;
})();

It's both desktop Safari and mobile it's the unlock slider emulator in css3 and JavaScript... See link for details:
http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range/

how to attach click function to multiple divs without ID

I have a fade in function im trying to understand better. It works fine when I set up the
My question is if I have 8 links that already have the separate ID and class names how can I attach this function to each clickable link?
Is there a function to getElementbyClass or something and then just add the class to all my links?
here is my javascript:
var done = true,
fading_div = document.getElementById('fading_div'),
fade_in_button = document.getElementById('fade_in'),
fade_out_button = document.getElementById('fade_out');
function function_opacity(opacity_value) {
fading_div.style.opacity = opacity_value / 100;
fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}
function function_fade_out(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'none';
done = true;
}
}
function function_fade_in(opacity_value) {
function_opacity(opacity_value);
if (opacity_value == 1) {
fading_div.style.display = 'block';
}
if (opacity_value == 100) {
done = true;
}
}
// fade in button
fade_in_button.onclick = function () {
if (done && fading_div.style.opacity !== '1') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_in(x)
};
})(i), i * 10);
}
}
};
// fade out button
fade_out_button.onclick = function () {
if (done && fading_div.style.opacity !== '0') {
done = false;
for (var i = 1; i <= 100; i++) {
setTimeout((function (x) {
return function () {
function_fade_out(x)
};
})(100 - i), i * 10);
}
}
};

Correcting the answer from BLiu1:
var fadeDivs = document.getElementsByClassName('fade');
for (var i=0, i<fadeDivs.length, i++){
// do stuff to all fade-divs by accessing them with "fadeDivs[i].something"
}

Have you considered using a javascript library like jQuery to manage this. They have some extensive, very easy to use "selectors" that allow you to easily get access to elements in the DOM and animate them with things like "fade ins" and "slides", etc. If you need more animations there are tons of plugins available for this. It also helps to deal with browser compatibility challenges too.
If you want to rely on pure JavaScript, you can use the document.getElementsByClassName() function defined here, but that function is only defined in IE9 and above as well as Safari, Chrome, FF, and Opera.

As said in the comments, there is a getElementsByClassName() method. Here is how you would use it.
for(var i=0; i<document.getElementsByClassName("fade").length; i++ ){
/*apply fade in function*/
}
I'm not sure whether getElementsByClassName() can detect one class name at a time. You might need regex for that.

Show/Hide & Mouseover Javascript

I been researching on Show/Hide javascript and pushed it further with a mouseover effect to achieve what I want. I've set up a Fiddle for better accessibility. However, I now want to push it by having up to 4 different text areas ("Click here for more information"), and each text area would have more hover text as I tried to show in the HTML code itself. The javascript that I used and edited now has "ID"s corresponding to "0" and "1" which wouldnt work for my current HTML code as it has funky names like "uu3308-10" (made with Adobe Muse). Now, I'm wonder what variables would I have to change within the Javascript to make it function properly and is there a way to compile this code so it works with at least 11 other "Click here for more information" points?
Note: The current javascript makes showMoreText2 appear under both showMoreText areas (would like to make only one hover text appear at a time).
CLICK HERE FOR THE FIDDLE -- > http://jsfiddle.net/TPLOR/vy6nS/
Thanks, I hope this was helpful enough. =)

kinda hackish: (see http://jsfiddle.net/vy6nS/30/ )
window.onload = function() {
var elems1 = document.getElementsByClassName("expander");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showChilds("block", this);
};
elems2[x].onmouseout = function() {
showChilds("none", this);
};
}
}
}
};
function get_nextsibling(n) {
x = n.nextSibling;
while (x.nodeType != 1) {
x = x.nextSibling;
}
return x;
}
function showChilds(disp, elem) {
get_nextsibling(elem).style.display = disp;
}
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (disp == 0 && children[i].className == "showMoreText") {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}​

Flash Player scripting + IE8

I've developed a small control bar for a Flash viewer generated by a third-party software. It has a First, Prev, Next & Last button, and a Zoom command.
While Zoom works fine in all browsers, the navigation buttons seem to fail at Internet Explorer 8.
I use at least two functions. This one locates the Flash object I want to manipulate:
function getFlashMovieObject(movieName)
{
if (window.document[movieName])
{
return window.document[movieName];
}
if (navigator.appName.indexOf("Microsoft Internet")==-1)
{
if (document.embeds && document.embeds[movieName])
return document.embeds[movieName];
}
else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
{
return document.getElementById(movieName);
}
}
...and any of these ones handles the frame navigation:
var currentFrame = 0;
function gotoFirst(id)
{
getFlashMovieObject(id + "Blueprints").Rewind();
currentFrame = 0;
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoPrev(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
if (currentFrame > 0)
{
currentFrame--;
}
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoNext(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
if (currentFrame < movie.TotalFrames() - 1)
{
currentFrame++;
}
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
function gotoLast(id)
{
var movie = getFlashMovieObject(id + "Blueprints");
currentFrame = movie.TotalFrames() - 1;
movie.GotoFrame(currentFrame);
$("currentFrame").innerHTML = currentFrame + 1;
$("frameTitle").innerHTML = frameTitles[id][currentFrame];
}
Btw, that $ is MooTools, not jQuery.
Anyway, IE dies on the movie.TotalFrames() call. What can I do to solve this? Keep in mind I need this to be done via JavaScript, as I cannot edit the SWF.

You can try replacing this code:
if (currentFrame < movie.TotalFrames() - 1)
with this
if (currentFrame < movie.TGetProperty('/', 5) - 1)
It's not as nice, but is another option. TotalFrames() should work.