JavaScript - Issue With Fading

Hi,
I am having difficulty (tearing my hair out) with this problem. I have written a page as a learning experince for JavaScript. The page is here. The fade in works perfectly for ONLOAD and for ONMOUSEOVER but not for ONMOUSEOUT. The JavaScript code is as follows:
Code:

      var d_opacity ;
      var e_element ;
      var t_timeout ;

      function fadeInElement(s_element_to_fade_in)
      {
        d_opacity = 0.25 ;
        e_element = document.getElementById(s_element_to_fade_in) ;

        (e_element.style).display = "" ;
        (e_element.style).opacity = d_opacity ;

        t_timeout = setTimeout("fadeIn()", 125) ;
      }

      function fadeIn()
      {
        if (d_opacity == 1.0)
        {
          clearTimeout(t_timeout) ;
        }
        else
        {
          d_opacity += 0.075 ;

          (e_element.style).opacity = d_opacity ;

          t_timeout = setTimeout("fadeIn()", 125) ;
        }
      }

      function fadeOutElement(s_element_to_fade_out)
      {
        e_element = document.getElementById(s_element_to_fade_out) ;
        d_opacity = (e_element.style).opacity ;
        t_timeout = setTimeout("fadeOut()", 125) ;

        // (e_element.style).display = "none" ;
      }

      function fadeOut()
      {
        if (d_opacity == 0.25)
        {
          clearTimeout(t_timeout) ;

          (e_element.style).display = "none" ;
        }
        else
        {
          d_opacity -= 0.075 ;

          (e_element.style).opacity = d_opacity ;

          t_timeout = setTimeout("fadeOutn()", 125) ;
        }
      }

When I use the commented out line in fadeOutElement(), the menu disappears which says to me ONMOUSEOUT is being triggered correctly, but if I do the fading out code, it does nothing.

Any help greatly appreciated.

How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS.

You can view the HTML page in question he

http://aksdesigns.co.uk/temp/template.html

The DIV container is the one with the ID of #MainContent

Code:

#MainContent {
	width: 980px;
	height: 550px;
	margin: 0 auto;
	padding: 0px;
	background-image: url(images/Content-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-left: 2px solid #153365;
	border-right: 1px solid #FFF;
}

It probably couldn't be done using CSS be how could I achieve this with Javascript?

So far I have this written up which does work well. However, the problem is if one toggles the fadeOut function while the fadeIn function is still in action. That causes the functions to collide and have to element being faded start flashing or freezing.
Is there a simple way to prevent this? Thank you.
Code:

			function fadeIn(elementId) {
				var element = document.getElementById(elementId);
				
				if(element.style.display === 'none') {
					element.style.display = 'block';
					element.style.opacity = '0';
				}
								
				if(element.style.opacity < 1) {
					var opacityFloat = parseFloat(element.style.opacity);
					element.style.opacity = opacityFloat + 0.1;
				
					setTimeout("fadeIn('" + elementId + "')", 50);
				}
			}
			
			function fadeOut(elementId) {
				var element = document.getElementById(elementId);
				
				if(element.style.opacity > 0) {
					var opacityFloat = parseFloat(element.style.opacity);
					element.style.opacity = opacityFloat - 0.1;
					
					setTimeout("fadeOut('" + elementId + "')", 50);
				}
				
				if(element.style.opacity == 0) {
					element.style.display = 'none';
				}
			}

Hi guys.

I'm using a jquery plugin called innerfade, which I got from he http://medienfreunde.com/lab/innerfade/ . I've used it to fade few lines of text into each other:

Code:

<div class="fade">
<p>Line 1 asdfghjkl</p>
<p>Line 2 sdasdsafasdgedgr</p>
<p>Line 3 ddddddddddddddddddddd</p>
</div>

So only first line appears on page load, then after few seconds fades into Line 2 etc. Everything works perfect, but there is only one problem - the text is not centered even if it says so in CSS. Since the lines have different lenghts, the shorter the line the more it's aligned to the left.

I've added properties for both div and p's - tried all combinations of text-align: center and margin left & right: auto. No joy. But when I remove the script all 3 lines appear centered perfectly.

So my question is how do I make them centered? I presume it has to be added in the JS part since it seems to be overriding the CSS. Here is the script's full code:

Code:

(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
        		'animationtype':    'fade',
            'speed':            'normal',
            'type':             'sequence',
            'timeout':          2000,
            'containerheight':  'auto',
            'runningclass':     'innerfade',
            'children':         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
            };
            if (settings.type == "sequence") {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == "random") {
            		var last = Math.floor ( Math.random () * ( elements.length ) );
                setTimeout(function() {
                    do { 
												current = Math.floor ( Math.random ( ) * ( elements.length ) );
										} while (last == current );             
										$.innerfade.next(elements, settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
						} else if ( settings.type == 'random_start' ) {
								settings.type = 'sequence';
								var current = Math.floor ( Math.random () * ( elements.length ) );
								setTimeout(function(){
									$.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
								}, settings.timeout);
								$(elements[current]).show();
						}	else {
							alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
						}
				}
    };

    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == 'slide') {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
							removeFilter($(this)[0]);
						});
        } else
            alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
        if (settings.type == "sequence") {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
        } else if (settings.type == "random") {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() * elements.length);
        } else
            alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}

And call:

Code:

$(document).ready(
				function(){
					$('.fade').innerfade({
						animationtype: 'fade',
						speed: 750,
						timeout: 5000,
						type: 'random',
						containerheight: '1em'
					});
			});

I'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows:
I define an array and fill it with the div objects I want to fade in and out.
I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object.
First I check if the object is opaque, and if so set it to fade along with a time;
Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration.
If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly.

Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately.
This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error).
So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message.

So I have several questions:
1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that?
2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so).
3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out.

I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here.

Thanks in advance.

Code:

function commencez(){                       //parent function to store var's
  var TimeToFade = 10000;
	theArray = new Array(2);
	var wrench = new Date().getTime();
	
	for (var a=0; a<3; a++){                           //fill the array with objects
	 theArray[a] = document.getElementById("grad" + a);
	 theArray[a].FadeState = -2;                     //start them transparent
	}

  function fader() {
     var check = new Date().getTime();  //stops the function after 30 seconds
     if( check <= wrench + 30000 )
     {
       return;
      }

	  for(var i=0; i<3; i++){
		 
          if (theArray[i].FadeState !=1 && theArray[i].FadeState != -1)
          {
           if( theArray[i].FadeState == 2)
           {
             theArray[i].FadeState = -1;
             theArray[i].FadeTimeLeft = TimeToFade;
             theArray[i].FadeBegan = new Date().getTime();
            }
           if( theArray[i].FadeState == -2)
           {
             var rndm=Math.floor(Math.random()*11);
             if( rndm == 1)
             {
               theArray[i].FadeState = 1;
               theArray[i].FadeTimeLeft = TimeToFade;
               theArray[i].FadeBegan = new Date().getTime();
              }
            }
           }

           if( theArray[i].FadeState == 1 || theArray[i].FadeState == -1)
           {
            var now = new Date().getTime();
            since = now - theArray[i].FadeBegan;

            if( theArray[i].FadeTimeLeft <= since )
            {
              theArray[i].style.opacity = theArray[i].FadeState == 1 ? '1' : '0.2';
              theArray[i].style.filter = 'alpha(opacity = ' +
                       (theArray[i].FadeState == 1 ? '100' : '20') + ')';
              theArray[i].FadeState = theArray[i].FadeState == 1 ? 2 : 2;
            }
            
            theArray[i].FadeTimeLeft -= since;
            var howMuch = theArray[i].FadeTimeLeft / TimeToFade;

            if( theArray[i].FadeState == 1)
            {
              howMuch = 1-howMuch;
              theArray[i].style.opacity = howMuch;
              theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
             }
             if( theArray[i].FadeState == -1)
             {
               theArray[i].style.opacity = howMuch;
               theArray[i].style.filter = 'alpha(opacity = ' + (howMuch*100) + ')';
              }
            }
          } //close the for loop
         setTimeout( fader() , 500); //last thing fader does is recall itself after half a second

       } //close the fader function
  fader();
}     //close parent function

</script>

Sorry, I'm new in javascript and i can't understand what's wrong with my code.. I've spent some time searching for the solution, but i give up. For some of you may it be just a piece of cake, so maybe you can look at this:

Code:

<script language="javascript">
var n_pics = 3;
var current = 1;
var opacity = 1;
var opacity_IE = 100;



function fade(how)
{
	if(how==0)
	{
		if(opacity>0)
		{
			opacity = opacity - 0.1;
		}
		else return;
	}
	else
	{
		if(opacity<1)
		{
			opacity = opacity + 0.1;
			opacity_IE = opacity * 100;
		}
		else return;
	}
	document.getElementById('fade_show').style = 'opacity:'+opacity+'; filter:alpha(opacity='+opacity_IE+')'; //break_point 1
	var temp = 'fade('+how+')';
	setTimeout(temp, 1000);
}

function main_loop()
{
	fade(0); //break_point 2
	if(current == n_pics)
	{
		current = 1;
	}
	else
	{
		current = current + 1;	
	}
	document.getElementById('fade_show').innerHTML = '<img src="images/fade_show/'+current+'.jpg" />';
	fade(1);
	main_loop();
}

</script>
</head>

<body onload="main_loop();">

fade(0) means to fade out, and fade(1) - to fade in.

on IE i get 'Member Not found' on break_point 1
and
too much recursion at breake_point 2

can you help me?

I have a jQuery Slideshow script that i'm using and it's all done in 6 lines.

Code:

 $(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});
</script>

I'm having a problem centering it on my website and keeping the images behind each other every time a picture changes. The CSS uses absolute positioning to hide the images behind each other. The fadeIn part of the CSS uses relative positioning. The CSS for the fading image slideshow is at the end of the css.

Code:

.fadein { 
	  position:relative;
	  width:100%;
	  height:300px;
	  background-color:#000; 
	  overflow:hidden
}

.fadein img { 
	  position:relative;
	  left:300px;
	  width:auto;
	  text-align:center;
	  top:0px;
}

jonathaneiger.com

Alrighty so here's what I have.
Live example:
http://www.thestrikeforum.com/ex/

It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript).

There are 5 images in the folder rotateimage which also has the php script getimages.php in it.

Currently only the first image fades in however I want all the images to fade in as the first one does.

Codes:

Php script that gets all the images for the array:
PHP Code:
<?

//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");



//This function gets the file names of all images in the current directory

//and ouputs them as a JavaScript array

function returnimages($dirname=".") {

$pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions

$files = array();

$curimage=0;

if($handle = opendir($dirname)) {

while(false !== ($file = readdir($handle))){

if(eregi($pattern, $file)){ //if this file is a valid image

//Output it as a JavaScript array element

echo 'galleryarray['.$curimage.']="'.$file .'";';

$curimage++;

}

}



closedir($handle);

}

return($files);

}



echo 'var galleryarray=new Array();'; //Define array in JavaScript

returnimages() //Output the array elements containing the image file names

?>



Main html page with the javascript:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}



function initImage() {

  imageId = 'slideshow';

  image = document.getElementById(imageId);

  setOpacity(image, 0);

  image.style.visibility = 'visible';

  fadeIn(imageId,0);

}



function setOpacity(obj, opacity) {

  opacity = (opacity == 100)?99.999:opacity;

  

  // IE/Win

  obj.style.filter = "alpha(opacity:"+opacity+")";

  

  // Safari<1.2, Konqueror

  obj.style.KHTMLOpacity = opacity/100;

  

  // Older Mozilla and Firefox

  obj.style.MozOpacity = opacity/100;

  

  // Safari 1.2, newer Firefox and Mozilla, CSS3

  obj.style.opacity = opacity/100;

}



function fadeIn(objId,opacity) {

  if (document.getElementById) {

    obj = document.getElementById(objId);

    if (opacity <= 100) {

      setOpacity(obj, opacity);

      opacity += 10;

      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);

    }

  }

}



window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

If anyone could assist me in doing so or can help me find a better way to do the fading images for the slideshow feel free to share.. here's the main page code WITHOUT the fading code:




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>



<script src="rotateimage/getimages.php"></script>



<script type="text/javascript">



var curimg=0

var max=galleryarray.length

var random=Math.floor(Math.random()*max)





function rotateimages(){

document.getElementById("slideshow").setAttribute("src", "rotateimage/"+galleryarray[random])

//curimg=(curimg<galleryarray.length-1)? curimg+1 : 0

random=Math.floor(Math.random()*max)

}






window.onload=function(){

setInterval("rotateimages()", 2500)

initImage()

}



</script>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Test</title>



</head>



<body>
<img src="rotateimage/pic1.jpg" name="slideshow" width="350" height="350" id="slideshow"/>
</body>

</html>

Hi
I usually work in html, but I am trying to put up rotating images that fade. I found some Javascript coding but it isn't working correctly. I only see the first image and it fades but nothing happens after that. This is the code I have:
Code:

<script language="JavaScript">
 
<!-- Begin
 
var slideShowSpeed = 5000;
 
var crossFadeDuration = 3;
 
var Pic = new Array();
 
 
Pic[0] = 'image1.jpg'
Pic[1] = 'image2.jpg'
Pic[2] = 'image3.jpg'
Pic[3] = 'image1.jpg'
Pic[4] = 'image2.jpg'
 
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//  End -->
</script>
 
<body link="Red" vlink="Red" alink="Red" leftmargin=0 topmargin=0 bgcolor="Black"onLoad="runSlideShow()">
 
<img src="images/image1.jpg" alt="" name="SlideShow" id="SlideShow" width="300" height="200" border="0" align="left">

Can some assist me twith this?

Thanks, Lisa

ok ive been searching for a way to make it so when i click on a link it brings up an image or text box...and then when you click on another link on the same page that text box fades out and the new one fades in...

i know how to make images fade in and out and i can make them overlap each other and everything...but making it so i can click either as many times as i want and they keep overlapping is a bit outside my scope sorry...but through my scowering of this forum i found an old post on this thread he http://codingforums.com/showthread.php?t=171655

where a user "spudhead" posted what i think im looking for...but it didnt work for me when i tried it...

again, sorry if this isnt how you post idk im new here =/ i was going to post on the old thread but i wasnt sure if it would be answered...

thanks for the responses...

Hi all,

I have been using a border-fading script to give the impression of onmouseover fading underline, and I wish to tweak it a bit to give a slightly different effect

I have two scripts that do virtually the same thing, although the second has a display bug in FF both have their advantages and I don't have my heart set on using either one, although Vic's scripts are being used all over the page i'm creating so his has first dibs

here they are, and I will describe what I need to do below:
first script:
Code:

startColor = "FFFFFF"; // MouseOut link color 
endColor = "000000"; // MouseOver link color 

stepIn = 20; // delay when fading in 
stepOut = 30; // delay when fading out 

var fading=new Array();
fading['now']=startColor;

function initLinkFade() {
  var links = document.getElementById('pageHolder').getElementsByTagName('A');
  for(var i=0;i<links.length;i++){
    links[i].onmouseover = domouseover;
    links[i].onmouseout = domouseout;
    }
  }

if(document.getElementsByTagName){
  window.onload = initLinkFade;
  document.write("<style type='text/css'>#pageHolder a{text-decoration:none}</style>");
  }

function domouseover() { 
  var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
  if(target.nodeName!='A')return;
  for(var i=0;i<fading.length;i++) 
    clearTimeout(fading[i]);
  if(fading['el']!=target && fading['el']){
    fading['el'].style.borderBottom = "1px solid #"+startColor;
    linkFade(startColor,endColor,target,stepIn);
    }
  else
    linkFade(fading['now'],endColor,target,stepIn);
  } 

function domouseout() { 
  var rel="nofollow" target=arguments[0]?arguments[0].target:event.srcElement;
  if(target.nodeName!='A')return;
  for(var i=0;i<fading.length;i++) 
    clearTimeout(fading[i]);
  if(fading['el']!=target && fading['el']){
    fading['el'].style.borderBottom = "1px solid #"+startColor;
    linkFade(endColor,startColor,target,stepOut);
    }
  else
    linkFade(fading['now'],startColor,target,stepOut);
  } 

function hex(i) { 
  var s=Math.floor(i).toString(16);
  return s.length==2?s:"0"+s;
  } 

function linkFade(s,e,element,step){
  fading['el']=element;
  var sr=parseInt(s.substr(0,2),16);
  var sg=parseInt(s.substr(2,2),16);
  var sb=parseInt(s.substr(4,2),16);
  var er=parseInt(e.substr(0,2),16);
  var eg=parseInt(e.substr(2,2),16);
  var eb=parseInt(e.substr(4,2),16);
  for(var i = 0; i <= step; i++) {
    var r=hex((sr*(step-i)+er*i)/step);
    var g=hex((sg*(step-i)+eg*i)/step);
    var b=hex((sb*(step-i)+eb*i)/step);
    fading[i]=setTimeout("fading['now']='"+r+g+b+"';fading['el'].style.borderBottom = '1px solid #'+fading['now']",i*step); 
    } 
  }

What I like about this one is that you can specify both the fade in and fade out speeds, allowing you a bunch of flexibility in how it looks also, I like how it allows you to set it to 'apply to all links in a given div... however that can have certain downfalls you can seethis script in action he www.enviromark.ca/head/YPP.htm
the second script
Code:

<!--
// by Vic Phillips (04-September-2006) http://www.vicsjavascripts.org.uk

function zxcMseOver(zxcobj,zxcd){
 var zxcp=zxcobj;
 if (!zxcp.oop){ return; }
 clearTimeout(zxcp.oop.to);
 zxcp.oop.d=zxcd||0;
 zxcp.oop.cng();
}

function zxcInit(zxccls,zxccol1,zxccol2,zxcstps){
 var zxclks=document.getElementsByTagName('BODY')[0].getElementsByTagName('A');
 for (var zxc0=0;zxc0<zxclks.length;zxc0++){
  if (zxclks[zxc0].className==zxccls){
  zxcStyle(zxclks[zxc0],{borderBottom:'solid '+zxccol1+' 0px;'});
  zxclks[zxc0].oop=new zxcOOP(zxclks[zxc0],zxccol1,zxccol2,zxcstps);
  }
 }
}

var zxcCnt=0;

function zxcOOP(zxcd,zxccol1,zxccol2,zxcstps){
 this.obj=zxcd;
 this.ary=zxcSTxtColors([zxccol1,zxccol2],zxcstps||10);
 this.cnt=0;
 this.d=1
 this.to=null;
 this.ref='zxcoop'+zxcCnt;
 window[this.ref]=this;
 zxcCnt++;
}

zxcOOP.prototype.cng=function(){
 if ((this.d>0&&this.cnt<this.ary.length-1)||(this.d<0&&this.cnt>0)){
  this.obj.style.borderBottom='solid #'+this.ary[this.cnt+=this.d]+' 1px';
  this.setTimeOut("cng();",100);
 }
 else if (this.d<0) {
  this.obj.style.borderBottom='0px';

 }
}

zxcOOP.prototype.setTimeOut=function(zxcf,zxcd){
 this.obj.to=setTimeout("window."+this.ref+"."+zxcf,zxcd);
}



function zxcStyle(zxcele,zxcstyle){
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 return zxcele;
}


function zxcSTxtColors(zxcc,zxcnu){
 var zxcary=[];
 zxcc1=zxcc[0].replace('#',''); zxcc2=zxcc[1].replace('#','');
 var zxcr=zxcHexToInt(zxcc1.substring(0,2));
 var zxcg=zxcHexToInt(zxcc1.substring(2,4));
 var zxcb=zxcHexToInt(zxcc1.substring(4,6));
 var zxcr2=zxcHexToInt(zxcc2.substring(0,2));
 var zxcg2=zxcHexToInt(zxcc2.substring(2,4));
 var zxcb2=zxcHexToInt(zxcc2.substring(4,6));
 var zxcrstep=Math.round((zxcr2-zxcr)/zxcnu);
 var zxcgstep=Math.round((zxcg2-zxcg)/zxcnu);
 var zxcbstep=Math.round((zxcb2-zxcb)/zxcnu);
 for (zxc0=0;zxc0<zxcnu;zxc0++){
  zxcary[zxc0]=zxcIntToHex(zxcr)+zxcIntToHex(zxcg)+zxcIntToHex(zxcb);
  zxcr+=zxcrstep; zxcg+=zxcgstep; zxcb+=zxcbstep;
 }
 zxcary[zxcnu-1]=zxcc[1].substring(1);
 return zxcary;
}

function zxcIntToHex(zxcn){
 zxcn=(zxcn>255)?255:(zxcn<0)?0:zxcn;
 var zxcresult=zxcn.toString(16);
 if (zxcresult.length==1){ zxcresult="0"+zxcresult; }
 return zxcresult;
}

function zxcHexToInt(zxchex){
 return parseInt(zxchex,16);
}


//-->

activated by:
<body onload="zxcInit('mainLinks','#FFFFFF','#000000',15);">
...
<a class="mainLinks" href="#advantagesRisks" onmouseover="zxcMseOver(this,1);"  onmouseout="zxcMseOver(this,-1);"><img src="images/EN_advantages_risks.gif" name="imageLinkNoTouchy"></a>

I like this script because it allows you to set the fade on a per-link basis, not on a per-div basis... more control
alrighty, here are the minor modifications I am hoping to get help with The fade-out effects stop when a second link is onmouseover'd. I would like to be able to set both the fade-in and fade-out delays (like in the first script), but have the fade-out continue for "Link A" even if "Link B" is onmouse'd over. Basically getting the smooth-fade effect seen he www.enviromark.ca/head/ --> the gray icons. When a link is clicked, I would like the top border of the link to fade in and stay solid until another link is clicked. When another link is clicked, I would like it's top border to fade in (like the first link) a have the first link's top border fade out. Again you can see the effect I'm going for at the link above by clicking on a few of the vertical links and seeing it's effect on the horizontal images
I know this might be a lot to ask, so I suppose I could live with the script I have... but I figured there was no harm in asking

I have 5 divs fading in a slideshow with the crossfade js. This basically fades the opacity of each div and loops the 5 divs so that it continues to fade from the 5th to the first and so on...

Is there a way for me to end the fade at the 5th div so that it does not loop?

Here is the code for the JS:

// JavaScript Document
// CrossFader

var x;
if (x) {
if (typeof(cf) == "undefined")
var cf;
}
else {
var cf = this;
}
cf.fader = function (obj, fadetime, delay) {
this.el2 = -1;
this.id = obj;
for (i=0; i<obj.length; i++) {
var s = document.getElementById(obj[i]).style;
s.position = "absolute"; s.visibility = "hidden"; s.opacity = 0; s.filter = "alpha(opacity=0)";
}
this.dur = fadetime;
this.delay = delay;
this.fade2();
}
cf.fader.prototype.fade1 = function() {
this.time += this.interval;
var ieop = Math.round(this.fade(this.time, 0, 1, this.dur) * 100);
var op = ieop / 100;
var s = document.getElementById(this.id[this.el2]).style;
s.opacity = op; s.filter = "alpha(opacity="+ieop+")";
if (this.el1 > -1) {
var s = document.getElementById(this.id[this.el1]).style;
s.opacity = 1 - op; s.filter = "alpha(opacity="+(100 - ieop)+")";
}
if (this.time == this.dur) {
clearInterval(this.id1);
if (this.el1 > -1)
document.getElementById(this.id[this.el1]).style.visibility = "hidden";
var t=this;
this.id2 = setInterval(function() {t.fade2()}, this.delay);
}
}
cf.fader.prototype.fade2 = function() {
if (this.id2)
clearInterval(this.id2);
this.el1 = this.el2;
this.el2++;
if (!this.id[this.el2]) this.el2 = 0;
if (this.el2 == this.el1)
return false;
document.getElementById(this.id[this.el2]).style.visibility = "visible";
this.interval = 50;
this.time = 0;
var t=this;
this.id1 = setInterval(function() {t.fade1()}, this.interval);
}
cf.fader.prototype.fade = function(t,b,c,d) {
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}




and here is the html markup:


<div id="fader">
<div id="fade1">
<h1>1</h1>
</div>
<div id="fade2">
<h1>2</h1>
</div>
<div id="fade3">
<h1>3</h1>
</div>
<div id="fade4">
<h1>4</h1>
</div>
<div id="fade5">
<h1>5</h1>
</div>

</div>
<script type="text/javascript"> // ids, fade length, display time
var fadeIt = new fader(new Array("fade1", "fade2", "fade3", "fade4", "fade5"), 2000, 4000);
</script>


Any help on how to end the loop would be greatly appreciated!!!

Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array.

Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help.

ORIGINSlide.js
Code:

/*******************************************
 *                                         *
 *  ORIGIN Background Image SlideShow      *
 *  Build 1.090.350.09                     *
 *                                         *
 *  @Author: CMBSystems (Chris Bearcroft)  *
 *  @Copyright: CMBSystems                 *
 *  @Created: 11/6/2010,1:24 AM (GMT)      *
 *                                         *
 *******************************************/

(function($){
  $.ORIGIN = { // Starting The ORIGIN Class
    Background: { // Starting The Background Sub-Class
      Default: 0, // Default Array Key ID
      Element: [], // Creating The Object For The Background Element
      Slide: function() { // Starting The Slide Function
        // Setting-Up The Element For Use In Update
        $.ORIGIN.Background.Element = arguments[0];
        // Updating The Document Body Background Image
        setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
      },
      Preload: function(img) { // Starting The Preload Function
        // Preload The Given Image Ready For Displaying
        var loadIMG=new Image();
        // Setting The Source For The Given Image
        loadIMG.src=img;
      },
      Update: function() { // Starting The Update Function
        if($.ORIGIN.Background.Element.Images !== undefined) {
          if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
            // Set Default Value As 0
            $.ORIGIN.Background.Default = 0;
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          } else {
            // Set Default Value As Current Array Key ID
            $.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          }
          // Set Document Body Background As The New Image
          document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
        }
      }
    }
  };
})(window);

Hoe to use:-
Code:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
  background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
  "Timer":5000,
  "Images": [
    "images/1.jpg", // !IMPORTANT - Same image as the default background image.
    "images/2.jpg",
    "images/3.jpg"
  ]
});
</script>
</head>
<body>

</body>
</html>

If anyone can help me please do, Thank You
DJCMBear ♫♫

I need to make a table fadeout with JavaScript when I click a button. The table is simple.
Code:

<table id="users_table" style="border:1px solid #000;border-collapse: collapse;" border='1'>
	<tr class="dataRow">
		<td>11</td>
		<td>12</td>
		<td>13</td>
	</tr>
	<tr class="dataRow">
		<td>21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr id="row3" class="dataRow">
		<td>31</td>
		<td>32</td>
		<td>33</td>
	</tr>
	<tr class="dataRow">
		<td>41</td>
		<td>42</td>
		<td>43</td>
	</tr>
</table>

There is a button that calls a function called fadeout(). I cannot find a way to make the table fade out with just that one function. Is that even possible? If not, what other functions are necessary to make this happen?