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

LVL 16
hankknightAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

geordie007Commented:

can you include your changeOpac function?
hankknightAuthor Commented:
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>

geordie007Commented:

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>
Learn SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

geordie007Commented:

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>
hankknightAuthor Commented:
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.
geordie007Commented:

mmmmmm, tuff one this, how about 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);
     }
}

var isShown = "blendDiv1";

function blendimage(imageid, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;
    var timer2 = 0;
     
    //fade out
    for(i = 100; i > 0; i=i-1) {
        setTimeout("changeOpac(" + i + ",'" + isShown + "')",(timer * speed));
        timer++;
    }

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

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>

<style>
#blenddiv {
      position: relative;
      height: 50px;
}
#blenddiv div {
      position: absolute;
      height: 50px;
}

</style>

<div style="border:1px solid red;" id="blenddiv">
   
     <div style="border: 0 none; filter: alpha(opacity=100); -moz-opacity: 100; opacity: 100;" id="blendDiv1">This is the first text.</div>

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

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

     
</div>

<a href="javascript:blendimage('blendDiv1',1500)"  >text 1</a>
<a href="javascript:blendimage('blendDiv2',1500)" >text 2</a>
<a href="javascript:blendimage('blendDiv3',1510)"   >text 3</a>      

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hankknightAuthor Commented:
Thanks!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.