radalin Posted April 11, 2007 Share Posted April 11, 2007 Hi, I'm trying to give a cinematic effect on my site. I have two different divs. After a period of time, I want that the div that is seen fades and the unseen div starts to show up at the same place of the currently fading div. I googled around a while, found some fade div codes but they confused me a little too. I'm starting to think what happens If I increase the number of divs. Can you point me somewhere or give some clues on how to do it. I have lost my way. The code I tried is below, I tried to edit this but I was unable. I had tried first to fade and show divs and then locate them on the same place, but I was unable to pass the first step I appreciate your help Thank you for your time. <html> <head> <title>X-Browser Fade In/Out</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> /* filter style is necessary to register object with ActiveX (only works with block elements that have height or position assigned) */ #out1{ border:4px dashed; width:200px; padding:0; } #div1{ font:1.2em Verdana,sans-serif; height:100px; background:#cdd; padding:1em; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #out2{ border:4px dashed; width:200px; padding:0; } #div2{ font:1.2em Verdana,sans-serif; height:100px; background:#cdd; padding:1em; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } #out3{ border:4px dashed; width:200px; padding:0; } #div3{ font:1.2em Verdana,sans-serif; height:100px; background:#cdd; padding:1em; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } </style> <script type="text/javascript"> // op_val sets initial opacity value; fad_var the fade value or amount, bigger is faster; // fad_rat sets the rate, smaller is faster; fad_dir is direction of fade // different numbers are used to get similar effects on different browsers var op_val,fad_var,fad_rat,fad_dir,top_val,bot_val; if(document.defaultView){ // for standards-compliant browsers op_val=1; // applied opacity setting top_val=1; // top opacity setting bot_val=0; // lowest opacity setting fad_var=.02; fad_rat=20; }else{ // for IE op_val=100; top_val=100; bot_val=0; fad_var=10; fad_rat=50; } function fader(){ op_val=op_val+(fad_var*fad_dir); // the following ternary conditional should appear on one line document.defaultView ? document.getElementById('div1').style.opacity=op_val : div1.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val; if((fad_dir==-1&&op_val<=bot_val)||(fad_dir==1&&op_val>=top_val))clearInterval(fadeIntr); } function setFade(){ fad_dir = (op_val >= top_val ? -1 : 1) ; //Will we fade or show... if(typeof fadeIntr!='undefined')clearInterval(fadeIntr); // in case someone makes multiple clicks fadeIntr=setInterval(fader,fad_rat); } //Current Div holder totalCount = 3 ; currentDiv = 1 ; function Next() { //Let's fade the current div and show the next one... setFade(); changeCurrent(1); setFade(); } function Prev() { //Let's fade the current div and show the previous one... setFade(); changeCurrent(-1); setFade(); } function Show(divNum) { div = document.getElementById('div'+divNum); op_val=op_val+(fad_var*1); document.defaultView ? div.style.opacity=op_val : div1.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val; if( fad_dir == 1 && op_val >= top_val ) clearInterval(fadeIntr); } function Fade(divNum) { div = document.getElementById('div'+divNum); op_val=op_val+(fad_var*1); document.defaultView ? div.style.opacity=op_val : div1.filters.item("DXImageTransform.Microsoft.Alpha").opacity=op_val; if( fad_dir==-1&&op_val<=bot_val ) clearInterval(fadeIntr); } function changeCurrent(num) { currentDiv += num ; if ( currentDiv == 0 ) currentDiv = totalCount; if ( currentDiv > totalCount ) currentDiv = 1 ; } </script> </head> <body> <table> <tr> <td> <div id="out1"> <div id="div1" onclick="setFade();"> <p> click on div to alter opacity property </p> </div> </div> </td> <td> <div id="out2"> <div id="div2" onclick="setFade();"> <p> click on div to alter opacity property </p> </div> </div> </td> </td> <td> <div id="out3"> <div id="div3" onclick="setFade();"> <p> click on div to alter opacity property </p> </div> </div> </td> </tr> </table> <input type="button" id="btn_prev" value="Previous" onclick="Prev();" /> <input type="button" id="btn_next" value="Next" onclick="Next();" /> </body> </html> Quote Link to comment Share on other sites More sharing options...
obsidian Posted April 11, 2007 Share Posted April 11, 2007 Here's some logic I would recommend for you: for your "cinematic" presentation, cycle between two divs only, but update the content of those divs with what you're wanting to display. So, you are only ever fading back and forth between two divs, but just before the hidden one fades in, you change the innerHTML attribute to contain what you want it to hold. In doing this, you could have a whole bunch of hidden divs that contain the content to be displayed, and you simply have to loop through those divs, grab the content and display it in the div that will be fading in. This approach to the logic may help clear up some of the clouds you have. If you need further explanation, just check back with questions about specific pieces of your approach, and we'll be glad to help you work through it. Good luck! Quote Link to comment Share on other sites More sharing options...
radalin Posted April 18, 2007 Author Share Posted April 18, 2007 Well I finally got the time to work on this thing. Your idea was great and I tried to implement it. I encountered some problems thought. I was unable to get the time when the fading finished (to change the content of the div) and also I was unable to put divs over each other. It was fine with position:absolute thing but I couldn't put them over each other when I deleted position:absolute. I know it's not a js problem but it's the followup of this problem. Thank you for your time Quote Link to comment Share on other sites More sharing options...
obsidian Posted April 18, 2007 Share Posted April 18, 2007 Hopefully this will be more helpful. I'm attaching two files that will actually demonstrate one way to switch up content for you. This has been tested and works in FF, IE and Opera as well. Check out the two attached files. Drop them into a folder and run the HTML file locally to see it in action. Hope this helps! [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
radalin Posted April 18, 2007 Author Share Posted April 18, 2007 It really helped a lot! I have even modified your code a bit. Now there is a chance to autofade. Div's are fading over time and showing next divs. Anyone who requires some help about this may want to check it. Thank you for everything [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
obsidian Posted April 18, 2007 Share Posted April 18, 2007 It really helped a lot! I have even modified your code a bit. Now there is a chance to autofade. Div's are fading over time and showing next divs. Anyone who requires some help about this may want to check it. Thank you for everything Great! Glad you were able to modify the code for your use, too. Are we clear to mark this as "solved" for now? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.