JavaScript - Fade In

Hi all,

I have created the following page http://kylehouston.com/new/index_new.html

I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work.

I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen.

Anyone got any advice?

Thanks in advance!

Kyle

Hello everyone. I'm working on a fade in and fade out script. I got to the part where I am making the fade in part of the script but I got this error that says:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Fri, 29 Jan 2010 07:08:20 UTC


Message: Object expected
Line: 1
Char: 1
Code: 0

But I'm not to sure what is making my script error out. I do believe it is the timeout part in my script but I'm not totally sure. If that is it how do I go about fixing it?

Code:

	function fade(obj, duration, toggle) {
	this.steps = 100;
	this.elem = document.getElementById(obj);
	
	function setOpacity(level) {
	   (document.getElementById && !document.all) ? this.elem.style.opacity = level : 
	   this.elem.style.filter="alpha(opacity="+ level * 100 +")";
	}
	
	
	function fadeIn() {
		for(var i = 0; i<= 1; i+=(1/this.steps)) {
			setTimeout("setOpacity("+ i +")", i * duration);
		}
	}
	
	fadeIn();
	
	}
	
	window.onload = function() {
		fade('text', 20000, 1);
	}

Thanks for the help.

I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

Carson
www.carsonkahn.com

Hi,
I have problem with javascript for image effects...

Here is the LINK...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

Hi,
On my webpage I have an embedded link that jumps the users up to a text box for logging in. I'm trying to find a way so when they click that link, it will not only jump up to the text box but highlights it as well. I then want the highlight color to fade back to normal. I've been searching around but I can't find something that will work. Any ideas?

Hey, I have modified a script that used to fade in a image (and it worked fine) to fade in a table with that image inside it.
The table doesn't fade in

The HTML that is produced is exactly this, but the hashes are urls:
Code:

<table style="float:left; opacity:0; ">
<tr
<td>
<a href="#" rel="lightbox[group]">
<img src="#" width="97" height="97" />
</a>
</td>
</tr>
<tr>
<th>
</th>
</tr>
</table>

These are my two functions
Code:

function addImage(src) {
	var table = document.createElement("table");
	table.style.float = "left";
	
	var tr_1 = document.createElement("tr");
		
	var td_1 = document.createElement("td");
			
	var a_1 = document.createElement("a");
	a_1.src = src;
	a_1.rel = "lightbox[group]";
	
	var img_1 = document.createElement("img");
	img_1.src = src;
	img_1.width = 97;
	img_1.height = 97;
	
	a_1.appendChild(img_1);	
	td_1.appendChild(a_1);	
	tr_1.appendChild(td_1);
	
	var tr_2 = document.createElement("tr");
	var th_2 = document.createElement("th");
	
	tr_2.appendChild(th_2);	
	
	table.appendChild(tr_1);
	table.appendChild(tr_2);

	document.getElementById("thumbnails").appendChild(table);
	if (table.filters) {
		try {
			table.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			table.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
		}
	} else {
		table.style.opacity = 0;
	}

	table.onload = function () {
		fadeIn(table, 0);
	};
}

function fadeIn(element, opacity) {
	var reduceOpacityBy = 5;
	var rate = 30;	// 15 fps


	if (opacity < 100) {
		opacity += reduceOpacityBy;
		if (opacity > 100) {
			opacity = 100;
		}

		if (element.filters) {
			try {
				element.filters.item("DXImageTransform.Microsoft.Alpha").opacity = opacity;
			} catch (e) {
				// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
				element.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + opacity + ')';
			}
		} else {
			element.style.opacity = opacity / 100;
		}
	}

	if (opacity < 100) {
		setTimeout(function () {
			fadeIn(element, opacity);
		}, rate);
	}
}

this is the previous addImage function:
Code:

function addImage(src) {
	var newImg = document.createElement("img");
	newImg.style.margin = "5px";

	document.getElementById("thumbnails").appendChild(newImg);
	if (newImg.filters) {
		try {
			newImg.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 0;
		} catch (e) {
			// If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
			newImg.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + 0 + ')';
		}
	} else {
		newImg.style.opacity = 0;
	}

	newImg.onload = function () {
		fadeIn(newImg, 0);
	};
	newImg.src = src;
}

The opacity of the table stays at 0, and never appears (but I can still click on the link)

Can anyone help me make the table fade in like it was supposed to?

So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

My CSS for the images has this class for an invisible border:
Code:

border: solid 1px rgba(242, 112, 17, .0);

I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

Code:

$('.item li img').animate({'opacity' : 1}).hover(function() {
					$(this).animate({'borderOpacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 1});
				});

But I obviously am doing something wrong.

Any help would be greatly appreciated. Thanks!

Alright I give up! I'm not the type that easily asks for help but I just spent an ungodly amount of time trying to figure this out. This script fades a web pages background when you mouseover a graphic. The problem I'm having is it goes from white to black and I need it to go from black to white. I was able to reverse it like I wanted but the page still initially starts off white instead of black. Setting the pages background to black doesn't fix the problem either. I imagine its easy enough to do but JavaScript is not my forte. Any help would be very much appreciated.

Code:

<HTML>
<HEAD>

<script language="JavaScript">

<!--

        hexa = new Array(16);
        for(var i = 0; i < 10; i++)
                hexa[i] = i;
        hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
        hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

        function hex(i) 
        {
                if (i < 0)
                        return "00";
                else if (i > 255)
                        return "ff";
                else
                        return "" + hexa[Math.floor(i/16)] + hexa[i%16];
        }

        function setbgColor(r, g, b) 
        {
                document.bgColor = "#"+hex(r)+hex(g)+hex(b);
        }
        
        // 1 -- white --> black
        // -1 -- black --> white
        var inc = 1;
        var cur_i = 20;
        var max_step = 20;
        var in_progress = false;
        
        function msover()
        {
                inc = -1;
                if( !in_progress )
                        step();
        }

        function msout()
        {
                inc = 1;
                if( !in_progress )
                        step();
        }
        
        function step()
        {		
        	//	alert(document.bgColor);
                setbgColor( Math.floor(255 * cur_i / max_step),
                                Math.floor(255 * cur_i / max_step),
                                Math.floor(255 * cur_i /max_step) );
           //    alert("2:" + document.bgColor);
                cur_i += inc;
                if( (inc > 0 && cur_i > max_step) || (inc < 0 && cur_i < 0) )
                {
                        cur_i -= inc;
                        inc = -inc;
                        in_progress = false;
                }
                else
                {
                        in_progress = true;
                        setTimeout("step()", 3);
                }
        }
        
// -->

</script>




</HEAD>


<BODY TEXT="#888888" LINK="#1b1b1b" VLINK="#1b1b1b" ALINK="#1b1b1b" bgcolor="white"> 

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<CENTER><a href="example.com" onMouseOver="msover()" 
        onMouseOut="msout()"><IMG SRC="example.gif" border=0></A></CENTER>


</HTML>

hello, I am trying to get the page to fade in when it loads.. instead of using the microsoft enterpage metahead value..

here is the code I am trying, but no luck

<html>

<head>
<SCRIPT LANGUAGE="JavaScript">
function fadeInPage() {
if (document.getElementById("fadeDiv").filters.alpha.opacity < 100){
document.getElementById("fadeDiv").filters.alpha.opacity += 10;
eval('setTimeout("fadeInPage()",100)');
}
else{
document.getElementById('fadeDiv').style.visibility = "visable"
}
}
</script>
</head>

<body onLoad="fadeinpage()">

<DIV ID="fadeDiv" style="visibility:hidden">
your page code goes here
</DIV>
</body>

</html>

I wrote a simple javescript for a slideshow that cycles through images and displays where the image is but I am wondering how to pause the slideshow and then add in a fading effect. Any help would be appreciated.

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

<html>
    <head>
        <title>Page 1</title>
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script language="JavaScript" type="text/javascript" src="js.js"></script>
    </head>
    <body onLoad="LoadMenu(); PlaceArrow();">
        <table border="0" cellspacing="0" cellpadding="0" id="hmt" summary="layout" align="center">
            <tr><td colspan="4"><div id="htop"><img border="0" width="240" height="40" alt="" src="img/homet.png"></div></td></tr>
            <tr valign="top">
                <td id="hmtgut"><img border="0" width="50" height="250" alt="" src="img/homel.png"></td>
                <td id="hmtl"><img border="0" width="280" height="270" src="img/homelogo.png"></td>
                <td id="hmtr">
<script language="JavaScript" type="text/javascript">
<!--
//preload images
var image1=new Image()
image1.src="photos/slides/photo01.jpg"
var image2=new Image()
image2.src="photos/slides/photo02.jpg"
var image3=new Image()
image3.src="photos/slides/photo03.jpg"
var image4=new Image()
image4.src="photos/slides/photo04.jpg"
var image5=new Image()
image5.src="photos/slides/photo05.jpg"
var image6=new Image()
image6.src="photos/slides/photo06.jpg"
var image7=new Image()
image7.src="img/thumbarrow.png"
var image8=new Image()
image8.src="img/spacer.gif"

var cphoto = Math.ceil(6*Math.random());
document.write('<div id="homephoto"><a href="javascript:slidelink()"><img border="0" name="photo" width="230" height="230" src="photos/slides/photo0'+cphoto+'.jpg"></a></div>');

var step=cphoto
var whichimage=step

function slideit()
{
if (!document.images)
return
document.images.photo.src=eval("image"+step+".src")
whichimage=step
if (step<6)
{
step=parseInt(Math.ceil(6*Math.random()))
}
else
{
step=1
}
setTimeout("slideit()",3000)
var i = "a" + whichimage
document.images.a1.src=eval("image8.src")
document.images.a2.src=eval("image8.src")
document.images.a3.src=eval("image8.src")
document.images.a4.src=eval("image8.src")
document.images.a5.src=eval("image8.src")
document.images.a6.src=eval("image8.src")
document.images[i].src=eval("image7.src")
}

slideit()

function slidelink()
{
if (whichimage==1)
window.open('img.php?img=1','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==2)
window.open('img.php?img=2','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==3)
window.open('img.php?img=3','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==4)
window.open('img.php?img=4','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==5)
window.open('img.php?img=5','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
else if (whichimage==6)
window.open('img.php?img=6','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=400,height=400')
}

//-->
</script>
<noscript>
<div id="homephoto">
<img border="0" name="photo" width="230" height="230" src="photos/slides/photo01.jpg">
</div>
</noscript>
</td>
                <td id="mtmenu" valign="middle">Links Here</td>
            </tr>
            <tr>
                <td colspan="4">
                    <div id="hfoot">
                        <div id="hbot"><img border="0" width="240" height="20" alt="" src="img/homeb.png"></div>
                        <div id="thumb1">
                            <div><img border="0" vspace="9" hspace="2" name="a1" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(1); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo01thumb.jpg"></a></div>
                      </div>
                        <div id="thumb2">
                            <div><img border="0" vspace="9" hspace="2" name="a2" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(2); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo02thumb.jpg"></a></div>
                      </div>
                        <div id="thumb3">
                            <div><img border="0" vspace="9" hspace="2" name="a3" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(3); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo03thumb.jpg"></a></div>
                      </div>
                        <div id="thumb4">
                            <div><img border="0" vspace="9" hspace="2" name="a4" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(4); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo04thumb.jpg"></a></div>
                      </div>
                        <div id="thumb5">
                            <div><img border="0" vspace="9" hspace="2" name="a5" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(5); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo05thumb.jpg"></a></div>
                      </div>
                        <div id="thumb6">
                            <div><img border="0" vspace="9" hspace="2" name="a6" width="30" height="6" alt="" src="img/spacer.gif"></div>
                            <div><a onClick="LoadPhoto(6); return false;"><img border="0" width="30" height="30" src="photos/thumbs/photo06thumb.jpg"></a></div>
                      </div>
                    </div>
                </td>
            </tr>
        </table>
</table>
</body>
</html> 


js.js
PHP Code:
function PlaceArrow() {
    if ( cphoto ) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/thumbarrow.png";
    }
}

function LoadPhoto (i) {
    if (document.images) {
        carrow = "a" + cphoto;
        document.images[carrow].src = "img/spacer.gif";
        
        narrow = "a" + i;
        nphoto = "photo0" + i;
        document.images[narrow].src = "img/thumbarrow.png";
        document.images['photo'].src = "photos/slides/" + nphoto + ".jpg";
        
        cphoto = i;
    }
} 

I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/.

I have found some javascript which looks like it will do the trick.

But being a graphic designer and not a web developer or anything it just doesn't work. lol

Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve.

This is my very first attempt at Javascript

here is the html:

Code:

<link href="style.css" rel="stylesheet" type="text/css" />

<script src="javascript.js" type="text/javascript"></script>

</head>
<body>
<div style="margin:20px;" class="modules">
  <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
  <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div>
</div>
</body>

And the CSS:

Code:

.modules {
	margin:0px -20px 20px;
	background-color:#9999CC;
	min-height:100%;
	width:100%;
}
.single_module {
	border:solid 1px #000000;
	background-color:#000000;
	height:160px;
	padding:0;
	margin:-1px 0px 0px -1px;
	width:240px;
	float:left;
}
.toggleopacity img {
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity:1;
}

And the Javascript:

Code:

$("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});

I've managed to get a slideshow to randomly display pictures, but each time I try to add a fade into it, it never seems to work. Can anyone give me some advice?



<script language="javascript">


var delay=2500 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

randomimages[0]="image1.jpg"
randomimages[1]="image2.jpg"
randomimages[2]="image3.jpg"




var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

Hi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links.

I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks!

Here's the structure for my main index:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="templates/styles.css">

<title>Test</title>

</head>

<body class="main">

<center>
<table border="0" cellspacing="0" cellpadding="0" width="800" class="header">
	<tr>
		<td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td>
		<td align="right" valign="bottom" width="146" height="45"> <a href="link1/index.html" class="nav">Link1</a> </td>
		<td align="right" valign="bottom" width="103" height="45"> <a href="link2/index.html" class="nav">Link2</a> </td>
		<td align="right" valign="bottom" width="96" height="45"> <a href="link3/index.html" class="nav">Link3</a> </td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td width="800" height="10"></td>
	</tr>
	<tr>
		<td align="center" valign="top" width="800" height="440">
		CONTENT WILL GO HERE
		</td>
	</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="800">
	<tr>
		<td align="center" valign="bottom" height="45" class="footer">
		<hr noshade>
		</td>
	</tr>
</table>

</center>
</body>
</html>

I found the effect I would like to achieve here, but the code doesn't allow me to make turn the text into links, and I would like to leave the links where they are in the html and maybe the JavaScript could call each link by id?
http://www.codingforums.com/showthre...072#post923072
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
    width:600px;
    margin:auto;
 }
#container p{
    height:100%;
 }
#p4 {
    font-family:'times new roman',serif;
    font-size:18px;
    color:#006;
    text-align:justify;
 }
</style>

<script type="text/javascript">
  var lines=new Array();
      lines[0]='text1';
      lines[1]='text2';
      lines[2]='text3';
      lines[3]='text4';
      lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+ 
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+ 
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+ 
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+ 
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+  
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+ 
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+ 
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
  var c=0;
  var value=0;
  var speed=20;

function addLines() {
if(c>=lines.length) {
   return;
}
   par=document.createElement('p');
   par.setAttribute('id','p'+c);
   par.appendChild(document.createTextNode(lines[c]));
   document.getElementById('container').appendChild(par); 
   setOpacity();
}

function setOpacity() {
   obj=document.getElementById('p'+c);
if(value>100) {
   value=0;
   c++;
   return addLines();
 }
if(obj.filters) {
   obj.style.filter='alpha(opacity='+value+')';
 }
else {
   obj.style.opacity=value/100;
 }
   value++;
setTimeout('setOpacity()',speed);
 }

window.onload=function() {
   addLines();
 }
</script>

</head>
<body>

<div id="container"></div>

</body>
</html>

Hi,

Please see URL http://backstageweb.net/Salon/indexslides2.htm.

(code is below, original source: http://javascript.internet.com/misce...lide-show.html

The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here?

Thanks,

John

Code:

<head>
<script type="text/JavaScript">
<!-- Original:  CodeLifter.com (support@codelifter.com) -->
<!-- Web Site:  http://www.codelifter.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.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>
</head>

Code:

<body onLoad="runSlideShow()">

Code:

<div id="slides">
    <img src="images/01.jpg" name='SlideShow' width="380" height="541"> 
  </div>

Hi,

I have a problem with a fade script using jquery,
in firefox etc.. all is ok.

But IE the fade does not fade it just comes in & out.

If any one would be kind enough to have a quick look
I would appreciate it.

You can see the js in the main page, not an external file.

The url is www.thecityspa.co.uk