i am looking for some help with this script i have been working on. here is my file fade.js the problem is with the changing, it is messed up. please help me find the problem and solution for this, thanks.
JS-file
//image fade script
var opacity = 0;
function changeimg(currentimage){
rnumb = Math.floor(Math.random()*2);
var newimage = "./images/" + rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fadeImg").src= newimage;
}
}
function fadein()
{
var fadeImg = document.getElementById('fadeImg');
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
browserOpacity = opacity / 10;
fadeImg.filters.alpha.opacity = browserOpacity;
}
else
{
browserOpacity = opacity / 1000;
fadeImg.style.opacity = browserOpacity;
}
if(opacity < 1000)
{
initiate();
}
else if(opacity == 1000)
{
changeimg(document.getElementById("fadeImg").src);
opacity = 0;
}
}
function initiate()
{
opacity++;
setInterval("fadein()", 500);
}
index.html
<script type="text/javascript" src="fade.js"></script>
<body onload="initiate()">
<img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>
JS-fiddle
Here is a Fiddle of the code as well: / (Notice that the code, as it is in the fiddle, may make your browser freeze after a while.
i am looking for some help with this script i have been working on. here is my file fade.js the problem is with the changing, it is messed up. please help me find the problem and solution for this, thanks.
JS-file
//image fade script
var opacity = 0;
function changeimg(currentimage){
rnumb = Math.floor(Math.random()*2);
var newimage = "./images/" + rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fadeImg").src= newimage;
}
}
function fadein()
{
var fadeImg = document.getElementById('fadeImg');
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
browserOpacity = opacity / 10;
fadeImg.filters.alpha.opacity = browserOpacity;
}
else
{
browserOpacity = opacity / 1000;
fadeImg.style.opacity = browserOpacity;
}
if(opacity < 1000)
{
initiate();
}
else if(opacity == 1000)
{
changeimg(document.getElementById("fadeImg").src);
opacity = 0;
}
}
function initiate()
{
opacity++;
setInterval("fadein()", 500);
}
index.html
<script type="text/javascript" src="fade.js"></script>
<body onload="initiate()">
<img id="fadeImg" src="images/1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>
JS-fiddle
Here is a Fiddle of the code as well: http://jsfiddle/epqKr/2/ (Notice that the code, as it is in the fiddle, may make your browser freeze after a while.
Share Improve this question edited Jun 24, 2012 at 18:50 Christofer Eliasson 33.9k7 gold badges77 silver badges103 bronze badges asked Jun 24, 2012 at 18:12 John JohnsonJohn Johnson 1413 silver badges10 bronze badges 6- 2 Please elaborate a bit on what you mean with "messed up". – Christofer Eliasson Commented Jun 24, 2012 at 18:15
- 1 It appens in IExplorer, isn't it? – A_nto2 Commented Jun 24, 2012 at 18:16
- 1 In the future, try to provide a JS-fiddle of your code as well, when possible. It makes it easier to play around with your code to see what might be the problem. I added it for you this time. – Christofer Eliasson Commented Jun 24, 2012 at 18:19
-
@ChristoferEliasson I wouldn't put a fiddle for that if I were you. 1.
functions inside the "onload" wrapper aren't accessible after the onload wrapper ends; 2. Changing the wrapper to "no wrap(body)" causes an infinite loop which freezes your browser. – Fabrício Matté Commented Jun 24, 2012 at 18:26 - oh yeah sorry, by messed up i mean it does not change well. either it continues to change every .5 seconds or it changes, then the fading stops working or reverses, then it just freezes my browser – John Johnson Commented Jun 24, 2012 at 18:36
3 Answers
Reset to default 1I think you should use a cross-browser library to acplish things like this.
Microsoft Internet Explorer, especially in versions < 9, is most likely to not behave
as you would expect it does, particularly when you try to use functions which makes use of opacity, alpha-filter and timing. You could try to use jQuery, or Prototype, or MooTools and such frameworks. They all make what you're looking for in simple, secure, better way.
Don't call
initiate()from within thefadeIn()function, instead just increment your opacity control variable (i.e,opacity += 1;).You will probably want to save your setInterval return value to kill the callbacks when you have finished your animation.
You also probably will want to increase the animation speed by lowering the interval.
animId = setInterval("fadeIn()", 5);
i am working on this still, heres what i have now: it doesnt work whatsoever but it looks better. html
<html>
<head>
<script type="text/javascript" src="fade1.js"></script>
</head>
<body onload="fadetimer()">
<img id="fadeImg" src="1.jpg" style="opacity:0.0; filter:alpha(opacity=0)"/>
</body>
</body>
</html>
script
//image fade script
var opacity = 0;
function changeimg(currentimage){
rnumb = Math.floor(Math.random()*2);
var newimage = rnumb + ".jpg";
if (newimage !== currentimage)
{
document.getElementById("fade").src= newimage;
}
}
function fadein()
{
var fade = document.getElementById('fade');
if(fade.filters.alpha.opacity >= 100 || fade.style.opacity >= 1.0)
{
changeimg(fade.src);
fade.filters.alpha.opacity = 0;
fade.style.opacity = 0;
}
else
{
fade.filters.alpha.opacity += 10;
fade.style.opacity += 0.1;
}
}
function fadetimer()
{
setInterval("fadein()", 500);
}