Learn VBA & Macros in 1 Week!

JavaScript - Random Slideshow With Fade

Full Excel VBA Course - Beginner to Expert

Random Slideshow With Fade	View Content

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>

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Slideshow Fade/pause

Adding A Fade Effect To A Slideshow

Adding Fade Effect To Slideshow Script

Need Help Adding Fade Effect To My Javascript Slideshow

Crossbrowser Compatible Fade/transition Speed Adjustment In Slideshow?

Using Dynamically Populating A Javascript Image Slideshow- Fade Effect?

Random Image Slideshow

Jquery Picture Fade Script To Fade Background Image?

How To Make A Page Fade Out, Then Fade In, With Different Text

How To Prevent Repeating In A Random (math.random) Array?

Trying To Fade A Div Using An Array. Need Help

Background Img Fade In

Fade Effect Help?

Having Trouble With Fade In

Javascript Fade Hover

Need Background Fade Reversed

Fade In Page Onload

Learn VBA & Macros for Excel in 1 Week!

Slideshow Fade/pause

Similar Tutorials

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">

</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;
    }
}

Adding A Fade Effect To A Slideshow

Similar Tutorials

Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on!

Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much!

Code:

	
var step=1
function switchImg()
{
if (!document.images)
return						
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()

Adding Fade Effect To Slideshow Script

Similar Tutorials

Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below.

The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks!
<script type="text/javascript">

if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n')
document.write('</style>')
}

var curcontentindex=0
var messages=new Array()

function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i]
}
}

function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].style.display="none" //hide previous message
messages[curcontentindex].style.display="block" //show current message
}

window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 2000)
}
}

</script>

Need Help Adding Fade Effect To My Javascript Slideshow

Similar Tutorials

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">

</script>
</body>
</html>

Crossbrowser Compatible Fade/transition Speed Adjustment In Slideshow?

Similar Tutorials

Hello good coders!

Thanks to the wonderful script provided by coothead he
http://www.codingforums.com/showthread.php?t=87036
I was wondering how I could adjust the transition/fade speed between the images in the script?

I tried a couple of different ways, but I couldn't get it working.
Does anyone know how I can adjust this in a cross-browser compatible way?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multiple image maps</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

#mapImage_holder {
    text-align:center;
 }
#mapImage {
    border:1px solid #000;
 }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

  var maps=new Array();
       maps[0]='dots.gif,#dots';
       maps[1]='map.jpg,#blood';
       maps[2]='apple0.jpg,#apples';
  var c=0;
  var speed=1000*10; //set for 10 secs, change to suit needs.

function swapMap() {
   obj=document.getElementById('mapImage');

if(c==maps.length) {
   c=0;
 }
   obj.src=maps[c].split(',')[0];
   obj.useMap=maps[c].split(',')[1];
   c++;
setTimeout('swapMap()',speed);

 }

window.onload=swapMap;

//]]>
</script>

</head>
<body>

<div id="mapImage_holder">
<img id="mapImage" src="dots.gif" alt="" usemap="#dots"/>
</div>

<div>
<map id="dots" name="dots">
  <area coords="85,40,110,65" href="http://www.bbc.co.uk" alt="" />
  <area coords="225,100,250,125" href="http://www.itv.com/" alt=""/>
  <area coords="345,140,370,165" href="http://www.channel4.com/" alt=""/>
  <area coords="405,270,430,295" href="http://www.guardian.co.uk/" alt=""/>
  <area coords="35,290,60,315" href="http://www.independent.co.uk/" alt=""/>
  <area coords="605,460,630,485" href="http://www.thesun.co.uk/" alt=""/>
</map>

<map id="blood" name="blood">
  <area coords="40,144,80,171" href="http://www.codingforums.com/"  alt="" />
  <area coords="112,144,152,171" href="http://www.w3schools.com/" alt="" />
  <area coords="184,144,224,171" href="http://w3c.org/" alt="" />
  <area coords="256,144,296,171" href="http://www.alistapart.com/" alt=""/>
</map>

<map id="apples" name="apples">
  <area coords="0,0,116,146" href="http://www.axialis.com/" alt=""/>
  <area coords="124,0,236,146" href="http://www.photoshopsupport.com/" alt=""/>
  <area coords="244,0,360,146" href="http://www.photoshopuser.com/" alt=""/>
  <area coords="0,154,116,280" href="http://www.planetphotoshop.com/" alt=""/>
  <area coords="124,154,236,280" href="http://www.photoshopcafe.com/" alt=""/>
  <area coords="244,154,360,280" href="http://www.mozilla.com/" alt=""/>
</map>
</div>

</body>
</html>

Using Dynamically Populating A Javascript Image Slideshow- Fade Effect?

Similar Tutorials

http://www.javascriptkit.com/javatut...rnalphp2.shtml

Anyone have a decent way of adding a fade affect to this script?

Random Image Slideshow

Similar Tutorials

Forgive me if this is in the wrong forum as I am unsure as to whether this should be PHP or Java, or a WP plugin. Basically I need to have a slideshow that picks images from a folder without the need to use arrays as there will be a large amount of images and I need to literally be able to drop images in a folder and they appear in a random order within the slideshow. As you can appreciate with a large amount of images, the code needs to call them as and when needed rather than loading them in at the beginning.

I have been using Wordpress's nextgen gallery and have been hacking away at a few plugins etc, and the closest I have come is to make WP select a different post with gallery each time creating the illusion that the images are in a different order, however this isn't going to be ideal as its not truly random, and breeds duplicates. If I have to stay away from WP that's fine, uploading to an ftp would be ok.

Hope someone can point me in the right direction!

Thank You

A

Jquery Picture Fade Script To Fade Background Image?

Similar Tutorials

This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it.
However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover.

Here is the script with a little simple tutorial on how to set it up:
http://bavotasan.com/tutorials/creat...r-fade-effect/

My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help.

I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long.

This is the link to my site so far:
http://matt.mw/help-request

You can see the script working as it is on my little yellow MW logo on the right side of the navigation.

So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis).

Any ideas?

How To Make A Page Fade Out, Then Fade In, With Different Text

Similar Tutorials

Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff

Text:
1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded?

2.variables?

any help would be appreciated!

Thanks, Cookies, whatever this forum gives out, you may receive!

How To Prevent Repeating In A Random (math.random) Array?

Similar Tutorials

I've looked for a solution to this issue, but it seems like a little different scenario than other situations.

I made a system for generating friend requests on Facebook. I have a grid that is 6 x 3, for a total of 18 cells. Each cell has a picture in it, and the picture is linked to the Facebook friend request page. My problem is that since each cell is populated at random from the array, I'm getting lots of repeats. For example, some picutures are in 5 cells, and some are in none. I'm trying to figure out how to make it so that once a picture is used once in the grid, it does not get used again in the same grid. I still want every cell filled at random on each page load, I just want to prevent the repeating.

Here's my current code:
Code:

<script type="text/javascript">
var vip_list=new Array(
	new Array('http://profile.ak.fbcdn.net/v225/1616/88/s1220771654_2158.jpg','http://www.facebook.com/addfriend.php?id=1220771654'),
	new Array('http://profile.ak.fbcdn.net/v223/1233/29/s904885342_9055.jpg','http://www.facebook.com/addfriend.php?id=904885342'),
	new Array('http://profile.ak.fbcdn.net/v229/1574/66/s1752031238_626.jpg','http://www.facebook.com/addfriend.php?id=1752031238'),
        new Array('http://profile.ak.fbcdn.net/v223/768/71/n661155042_7325.jpg','http://www.facebook.com/addfriend.php?id=661155042'),
	new Array('http://profile.ak.fbcdn.net/v226/732/26/n1827289885_2478.jpg','http://www.facebook.com/addfriend.php?id=1827289885'),
     new Array('http://profile.ak.fbcdn.net/v229/1631/70/s1425313768_1140.jpg','http://www.facebook.com/addfriend.php?id=1425313768'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1667023416'),
     new Array('http://profile.ak.fbcdn.net/v225/1146/29/s506485704_9532.jpg','http://www.facebook.com/addfriend.php?id=506485704'),
     new Array('http://profile.ak.fbcdn.net/profile6/270/32/s692160490_8745.jpg','http://www.facebook.com/addfriend.php?id=692160490'),
     new Array('http://profile.ak.fbcdn.net/v229/114/83/s1218176198_7375.jpg','http://www.facebook.com/addfriend.php?id=1218176198'),
     new Array('http://profile.ak.fbcdn.net/v226/946/4/s1470171885_4973.jpg','http://www.facebook.com/addfriend.php?id=1470171885'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1329505888'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1325496968'),
     new Array('http://profile.ak.fbcdn.net/v223/1546/92/s1536913202_2017.jpg','http://www.facebook.com/addfriend.php?id=1536913202'),
     new Array('http://static.ak.fbcdn.net/pics/s_silhouette.jpg','http://www.facebook.com/addfriend.php?id=1624715433'),
     new Array('http://profile.ak.fbcdn.net/v228/1282/58/s713998257_3682.jpg','http://www.facebook.com/addfriend.php?id=713998257')
);

var chosen_vip=Math.floor(vip_list.length*Math.random());
var chosen_vip1=Math.floor(vip_list.length*Math.random());
var chosen_vip2=Math.floor(vip_list.length*Math.random());
var chosen_vip3=Math.floor(vip_list.length*Math.random());
var chosen_vip4=Math.floor(vip_list.length*Math.random());
var chosen_vip5=Math.floor(vip_list.length*Math.random());
var chosen_vip6=Math.floor(vip_list.length*Math.random());
var chosen_vip7=Math.floor(vip_list.length*Math.random());
var chosen_vip8=Math.floor(vip_list.length*Math.random());
var chosen_vip9=Math.floor(vip_list.length*Math.random());
var chosen_vip10=Math.floor(vip_list.length*Math.random());
var chosen_vip11=Math.floor(vip_list.length*Math.random());
var chosen_vip12=Math.floor(vip_list.length*Math.random());
var chosen_vip13=Math.floor(vip_list.length*Math.random());
var chosen_vip14=Math.floor(vip_list.length*Math.random());
var chosen_vip15=Math.floor(vip_list.length*Math.random());
var chosen_vip16=Math.floor(vip_list.length*Math.random());
var chosen_vip17=Math.floor(vip_list.length*Math.random());

document.write('<center>');
document.write('<a href="',vip_list[chosen_vip][1],'" target="_blank"><img src="',vip_list[chosen_vip][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip1][1],'" target="_blank"><img src="',vip_list[chosen_vip1][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip2][1],'" target="_blank"><img src="',vip_list[chosen_vip2][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip3][1],'" target="_blank"><img src="',vip_list[chosen_vip3][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip4][1],'" target="_blank"><img src="',vip_list[chosen_vip4][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip5][1],'" target="_blank"><img src="',vip_list[chosen_vip5][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip6][1],'" target="_blank"><img src="',vip_list[chosen_vip6][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip7][1],'" target="_blank"><img src="',vip_list[chosen_vip7][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip8][1],'" target="_blank"><img src="',vip_list[chosen_vip8][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip9][1],'" target="_blank"><img src="',vip_list[chosen_vip9][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip10][1],'" target="_blank"><img src="',vip_list[chosen_vip10][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip11][1],'" target="_blank"><img src="',vip_list[chosen_vip11][0],'" height="60" width="60"></a>');
document.write('<br>');
document.write('<a href="',vip_list[chosen_vip12][1],'" target="_blank"><img src="',vip_list[chosen_vip12][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip13][1],'" target="_blank"><img src="',vip_list[chosen_vip13][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip14][1],'" target="_blank"><img src="',vip_list[chosen_vip14][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip15][1],'" target="_blank"><img src="',vip_list[chosen_vip15][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip16][1],'" target="_blank"><img src="',vip_list[chosen_vip16][0],'" height="60" width="60"></a>');
document.write('<a href="',vip_list[chosen_vip17][1],'" target="_blank"><img src="',vip_list[chosen_vip17][0],'" height="60" width="60"></a>');
document.write('<br>');

</script>

Any suggestions?
Thank you!

Fade In

Similar Tutorials

Hi

I have this code:

<script type="text/javascript">

function Ajax()
{
var
$http,
$self = arguments.callee;

if (window.XMLHttpRequest) {
$http = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
$http = new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
$http = new ActiveXObject('Microsoft.XMLHTTP');
}
}

if ($http) {
$http.onreadystatechange = function()
{
if (/4|^complete$/.test($http.readyState)) {
document.getElementById('ReloadThis').innerHTML = $http.responseText;
setTimeout(function(){$self();}, 20000);
}
};
$http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true);
$http.send(null);
}

}

</script>

<script type="text/javascript">
setTimeout(function() {Ajax();}, 1000);
</script>

Can you help me make this make a fade in effect??

Div Fade

Similar Tutorials

is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ?
thank you

Trying To Fade A Div Using An Array. Need Help

Similar Tutorials

Hi everyone I'm new to javascript and I'm trying to fade in and out a div using an array. It worked when I had two arrays and two variables. One array that decends through the opacity values and another array that acends the opacity values. here is the the external JS, HTML and external CSS. It works once but I want it to work every time we click on the link. At the bottom of the post I've posted the JS again but modified in a way I thought would work by using one array, going fowards through the array with i++ and then going backwards through the array using i--. Anyway, it doesn't work and I can't find a simple solution. Hope you all understand what I'm trying to say.

**********************THE JAVASCRIPT***********************

var fadesFoward = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"];

var fadesBackward = ["0.05","0.10","0.15","0.20","0.25", "0.30","0.35","0.40","0.45","0.50", "0.55","0.60","0.65","0.70","0.75", "0.80","0.85","0.90","0.95","1.00"];

var i = 0;
var j = 0;

function fadeDiv()
{
if(i == fadesFoward.length);
else (i++);
document.getElementById("redbox").style.opacity = fadesFoward[i];
}

function hide()
{
setInterval("fadeDiv()", 30);
}

function showDiv()
{
if(j == fadesBackward.length);
else (j++);
document.getElementById("redbox").style.opacity = fadesBackward[j];
}

function show()
{
setInterval("showDiv()", 30);
}

function delayShow()
{
setTimeout("show()", 1000);
}

********************THE HTML************************

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http//www.w3c.org/TR/html4/strict.dtd">

<html>

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

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

<body>

<div id="redbox"></div>
<a href="#" onclick="hide(); delayShow(); return false;" id="go_red">RED</a>

</body
</html>

*********************THE CSS**********************

div#redbox{z-index:2; width:200px; height:200px; background-color:red; opacity:1.0; position:absolute; left:0px; top:0px;}

a#go_red{position:absolute; left:250px; top:100px;}

*********************THE JAVASCRIPT AGAIN******************

var fades = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"];

var i = 0;

function fadeDiv()
{
if(i == fades.length);
else (i++);
document.getElementById("redbox").style.opacity = fades[i];
}

function hide()
{
setInterval("fadeDiv()", 30);
}

function showDiv()
{
if(i == fades.length);
else (i--);
document.getElementById("redbox").style.opacity = fades[i];
}

function show()
{
setInterval("showDiv()", 30);
}

function delayShow()
{
setTimeout("show()", 1000);
}

What would be really easy but which I can't find out how to do or even know if it is possible, is to have the variable "i" reset to 0 everytime the function is called. maybe it would work then?

Background Img Fade In

Similar Tutorials

A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded?

window.onload = function()
{var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)";
bodyTag.style.backgroundAttachment = "fixed";
bodyTag.style.backgroundPosition = "100% 100%";
bodyTag.style.backgroundRepeat = "no-repeat";}

Grateful for clues

Fade Effect Help?

Similar Tutorials

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

Fade Script

Similar Tutorials

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.

Having Trouble With Fade In

Similar Tutorials

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

Javascript Fade Hover

Similar Tutorials

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();
});

Need Background Fade Reversed

Similar Tutorials

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>

Fade In Page Onload

Similar Tutorials

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>