asked on

Blending between divs with JS function

Hello,

I use the following function to fade between images.

I need a different function that works the same way to change THE ENTIRE CONTENTS of my div, like this:

function blendDiv(divid, millisec) {}

I am not looking for a third party script or link, as I need to integrate this with a larger project.

I simply need one function to blend between divs.

I can provide more peripheral code if needed,

Thanks!

function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;

//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

//make image transparent
changeOpac(0, imageid);

//make new image
document.getElementById(imageid).src = imagefile;

//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}

geordie007

can you include your changeOpac function?

hankknight

ASKER

Here is the whole thing:

<script>

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}

function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;

//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

//make image transparent
changeOpac(0, imageid);

//make new image
document.getElementById(imageid).src = imagefile;

//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}

function currentOpac(id, opacEnd, millisec) {
//standard opacity is 100
var currentOpac = 100;

//if the element has an opacity set, get it
if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
}

//call for the function that changes the opacity
opacity(id, currentOpac, opacEnd, millisec)
}

</script>

<div style="border:1px solid red;width: 35px; height: 35px;" id="blenddiv">
<img src="http://www.google.com/options/icons/labs.gif" style="width: 35px; height: 35px; border: 0 none; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" id="blendimage" alt="" />
</div>

<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/checkout.gif',1500)" >Image 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/directory.gif',1500)" >Image 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'http://www.google.com/options/icons/finance.gif',1510)" >Image 3</a>

geordie007

a bit like this?

<script>

function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
//if an element is invisible, make it visible, else make it ivisible
if(document.getElementById(id).style.opacity == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}

function blendimage(divid, imageid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;

//set the current image as background
//document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

//make image transparent
changeOpac(0, imageid);

//make new image
document.getElementById(imageid).innerHTML = imagefile;

//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}

function currentOpac(id, opacEnd, millisec) {
//standard opacity is 100
var currentOpac = 100;

//if the element has an opacity set, get it
if(document.getElementById(id).style.opacity < 100) {
currentOpac = document.getElementById(id).style.opacity * 100;
}

//call for the function that changes the opacity
opacity(id, currentOpac, opacEnd, millisec)
}

</script>

<div style="border:1px solid red;" id="blenddiv">

<div style="border: 0 none; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" id="blendimage">This is the first text.</div>

</div>

<a href="javascript:blendimage('blenddiv','blendimage', 'This is the first text.',1500)" >text 1</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'This is the second text.',1500)" >text 2</a>
<a href="javascript:blendimage('blenddiv','blendimage', 'This is the third text.',1510)" >text 3</a>

geordie007

in the above way, you could replace the third argument ('The is the first text', for example) or each of the function calls with a variable name. that variable can contain everything you want, such as text. images, html, etc. a bit like this:

<script>
var divOne = '';
divOne += "<h1>This Is The First Div</h1>";
divOne += "<img src='pic.jpg' />";
divOne += "<p>nice pic eh?</p>";
</script>

<a href="javascript:blendimage('blenddiv','blendimage', divOne,1500)" >Show the first div</a>

hankknight

ASKER

Thanks, geordie.

Your code changes between divs correctly, but it does not slowly fade at all in Internet Explorer. In FireFox it does not fade between the two divs, it always fades from a white background.

It should fade between the two divs on IE as well as firefox.

ASKER CERTIFIED SOLUTION

geordie007

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hankknight

ASKER

Thanks!