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

JavaScript code don't work in Safari

I have a code which works in Chrome and Firefox but does not in Safari.
Here is a code:
var menu = document.getElementById("navigation1");
var already_moved = 0;
menu.onmouseover = function moveNavigation(menu) {
if (already_moved == 0) {
document.getElementById("navigation1").style.marginLeft = "0px";
already_moved = 1;
}
};
menu.onmouseleave = function moveBackNavigation(menu) {
if (already_moved == 1) {
//document.getElementById("navigation1").style.marginLeft = "-341px";
closeMenu();
already_moved = 0;
}
};
function closeMenu(){
setTimeout(function f(){
document.getElementById("navigation1").style.marginLeft = "-341px";
already_moved = 0;
}, 2000);
};
This code moves menu to left and back.
Thanks for any ideas - how to make it works in Safari.

I would like to clarify that you did actually enable JavaScript within Safari, right? As shown here.

JS slideshow works one way

My slideshow is suffering from erratic behaviour. it's driven by pagers which the user clicks. when the corresponding pager is clicked, the next image is made visible (opacity/filter) and set as z-index 5 so that it should sit beneath the present image (z-index 10). The current image is then faded-out and finally, the next image is set to current and the image that has faded out is set to z-index 0. However, this only works when clicking back to a previous image (in Chrome, ie is behaving even more strangely.) in the order of images. That is to say,
chrome:
"list_slide1" to "list_slide3" instant jump with no fade
"list_slide3" to "list_slide1" fade behaves correctly
then...
"list_slide1" to "list_slide3" instant jump no fade "list_slide3" to
"list_slide2" fade behaves correctly
or...
"list_slide1" to "list_slide6" instant jump no fade
"list_slide6" to any preceding list-slide1-5 fade behaves correctly
IE:
"list_slide1" to "list_slide3" instant jump with no fade
"list_slide3" to "list_slide1" a second pause then jump
The pagers and the images are dynamically generated from a database (hence the little piece of PHP at the bottom of the code). it contains as many items as are listed for the page in the database.
a few notes:
1) the fade function is my own take on
http://javascript.info/tutorial/animation and has worked just fine in
another slideshow elsewhere on the site.
2) getElementsByClass is from http://www.robertnyman.com and returns
parent and child elements of the requested class in an array (hence
why I call current[0] etc.)
thanks.
<script type="text/javascript">
var pager = document.getElementById('pager1');
var list_pagers = document.getElementById('pagers')
var i = 0;
var next_slide = function(next) {
if (next.className !== 'slide_current') {
if (getElementsByClassName('slide_pending').length === 0) {
var current = getElementsByClassName('slide_current');
next.className = 'slide_pending';
next.style.zIndex = 5;
next.style.opacity = 1;
next.style.filter = 'alpha(opacity = 100)';
next.style.display = 'block';
fade(current[0], linear, 1000);
var fadeSlide = switcher(next, current);
}
}
}
var switcher = function(now, then) {
setTimeout(function() {
now.className = 'slide_current';
now.style.zIndex = 10;
now.style.opacity = 1;
now.style.filter = 'alpha(opacity = 100)';
then[0].className = 'slide_hide';
then[0].style.zIndex = 0;
then[0].style.opacity = 0;
then[0].style.filter = 'alpha(opacity = 0)';
then[0].style.display = 'none';
}, 1001);
}
<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
echo 'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>

Forgive me for not posting an answer to your exact problem, but I would steer away from writing Javascript plugins yourself for the following reasons:
Hundreds of them exist on the Web already, some of which are developed on GitHub as open source, preventing potential issues through collaborative development.
There is no need to reinvent the wheel; simply spend 20 minutes googling javascript sliders and find one that you can customise to your needs.
A couple I like using are 'caroufredsel', which is responsive and offers a few nice features (dynamically adding items, callbacks etc).
Another is 'flexslider'.

SOLUTION:
the problem was that the <div> tags i was trying to fade each contained an <img> and another <div>... the CSS being applied was either working inconsistently/erratically or - as is IE's wont - not-at-all.... The solution was - rather than animating the fade of the parent <div> - animating the respective child components separately. At first, it looked like the IE solution was completely unto itself; in fact, it was insightful to creating a neat, lightweight non-JQuery slideshow for all the browsers. One trade-off was that I had to incorporate all the styling into the element tags rather than a separate CSS. This seemed like the only viable option in this instance by virtue of the nature of the DOM requests being made...
Questions/feedback gratefully received:
<script type="text/javascript">
var list_pagers = document.getElementById('pagers')
var i = 0;
<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
echo 'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>
var next_slide = function(next) {
if (next.className !== 'slide_current') {
if (navigator.appName === 'Microsoft Internet Explorer') {
//IE 7 & 8
if ((navigator.appVersion.search('MSIE 8.0') >= 1) || (navigator.appVersion.search('MSIE 7.0') >= 1)) {
var current = getElementsByClassName('slide_current')[0].childNodes[0];
var currentBar = getElementsByClassName('slide_current')[0].childNodes[1];
var nextBar = next.childNodes[1];
var nextSlide = next.childNodes[0];
} else {
//IE 9
var current = getElementsByClassName('slide_current')[0].childNodes[1];
var currentBar = getElementsByClassName('slide_current')[0].childNodes[2];
var nextBar = next.childNodes[2];
var nextSlide = next.childNodes[1];
}
// give the next slide and its header (nextBar) a temporary status of zIndex 5/6
nextSlide.style.zIndex = 5;
nextBar.style.zIndex = 6;
nextSlide.style.filter = "alpha(opacity=100)";
nextBar.style.filter = "alpha(opacity=85)";
fade(currentBar, linear, 500); // fade currentBar out
fade(current, linear, 500); // fade current out
//once we've faded out current slides, it's time to replace them with th
setTimeout(function() {
getElementsByClassName('slide_current')[0].className = 'slide_hide';
next.className = 'slide_current';
nextSlide.style.opacity = 1; // IE 9 includes opacity...
nextBar.style.opacity = 1; // IE 9 includes opacity...
nextSlide.style.filter = "alpha(opacity=100)";
nextBar.style.filter = "alpha(opacity=85)";
nextSlide.style.zIndex = 10;
nextBar.style.zIndex = 11;
}, 500);
} else {
// NON IE TAGS
var current = getElementsByClassName('slide_current')[0];
current.childNodes[1].style.zIndex = 10; // [1] the child <img> tag
current.childNodes[2].style.zIndex = 11; // [2] the child <div> tag
current.childNodes[1].style.opacity = 1;
current.childNodes[2].style.opacity = 0.85;
next.childNodes[1].style.zIndex = 5;
next.childNodes[2].style.zIndex = 6;
next.childNodes[1].style.opacity = 1;
next.childNodes[2].style.opacity = 0.85;
fade(current.childNodes[1], linear, 600); // fade current out
fade(current.childNodes[2], linear, 600); // fade current out
var fadeSlide = setTimeout(function() {switcher(next, current)}, 500);
var switcher = function(now, then, nowBar, thenBar) {
then.className = 'slide_hide';
then.childNodes[1].style.opacity = 0;
then.childNodes[2].style.opacity = 0;
now.className = 'slide_current';
now.childNodes[1].style.opacity = 1;
now.childNodes[2].style.opacity = 0.85;
now.style.opacity = 1;
}
}
}
}
</script>

ProcessMessages() in Javascript

I want to drop a div down to a certain height to display some additional content. For that I wrote following dropbox() function:
<script type="text/javascript">
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
function dropbox(element){
var obj = document.getElementById(element);
if(obj) {
var element = document.getElementById(element),
style = window.getComputedStyle(element),
height = style.getPropertyValue('height');
height = height.substring(0,2);
var i = 0;
for (i = height; i<200; i++)
{
sleep(100);
var tst = i+"px";
//alert(tst);
obj.style.height = tst;
}
//alert(i);
} else {
}
}
</script>
Now the problem I'm experiencing is, the box actually isn't visible during the roll down process but only after the loop has completed but I want it to look like the "Check Availability"-box on http://www.thedana.com/. How do I get this accomplished?
Thank you!

Here is a sample code. It may help you
<div class="right_content">
We deliver quick and easy registration.
Mysites.com is our hosting server and we've buit our website under observation of Mysite.com
</div>
<p class="flip">Know About us</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").mouseover(function(){
$(".right_content").slideToggle("slow");
});
});
</script>

You cannot use looping delays in browser javascript as it will make the browser unresponsive to both input and screen updating and waste the battery on a mobile device.
Instead, you should use setTimeout() which lets you schedule an activity for some time in the future. Good animation uses a tweening algorithm that schedules the next tick of the animation, then compares the elapsed time and calculates where the next animation step should be drawn and is continually self correcting in this way.
Also, if you do a Google search for javascript animation, you will find many helpful pieces of prewritten code for doing animation with plain javascript. In addition, all the major javascript libraries (such as jQuery or YUI) have significant animation capabilities built in and already written for you.
Here's a simple example:
function dropbox(elem, finalHt, duration) {
var start = new Date().getTime();
var tick = 20;
var startHt = parseInt(elem.style.height, 10);
var growHt = finalHt - startHt;
function next() {
var now = new Date().getTime();
var percent = (now - start) / duration;
var target = Math.round(startHt + (growHt * percent));
elem.style.height = Math.min(target, finalHt) + "px";
if (target < finalHt) {
setTimeout(next, tick);
}
}
setTimeout(next, tick);
}
function run() {
var item = document.getElementById("box");
item.style.height = "10px";
dropbox(item, 300, 2000);
}
Working example and more generalized code: http://jsfiddle.net/jfriend00/QxXMK/

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.