ZCed.com's Forum » Forum: Discuss About Code

ZCed.com's Forum » Forum: Discuss About Code - Recent Posts http://forum.zced.com/forum/discuss-code-amp-css ZCed.com's Community Forum en-US Thu, 09 Feb 2012 07:35:50 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://forum.zced.com/search.php oneTarek on "Auto Slider :: Sliding Text or any Element Like Div :: with Javascript::" http://forum.zced.com/topic/auto-slider-sliding-text-or-any-element-like-div-with-javascript#post-159 Sat, 26 Dec 2009 17:48:31 +0000 oneTarek 159@http://forum.zced.com/ Auto Slider :: Sliding Text or any Element Like Div :: <a href="http://www.tshame.com/codes/Auto%20Slider/auto-slider.html">View and Download</a> oneTarek on "Image Fading Tips With Javascript" http://forum.zced.com/topic/image-fading-tips-with-javascript#post-92 Sat, 05 Dec 2009 07:57:17 +0000 oneTarek 92@http://forum.zced.com/ It is a simple and very small Image Fading Script. <a href="http://www.tshame.com/codes/image_fading/imageFading.html">View and Download</a> ---------------------------------------------------------------- <html><head> <script> window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init); var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; function so_init() { if(!d.getElementById || !d.createElement)return; // Developed By : oneTarek // <a href="http://www.tshame.com" rel="nofollow">http://www.tshame.com</a> imgs = d.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,1000); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = "block"; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,1000); } else { setTimeout(so_xfade,200); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } } </script> <style type="text/css">#imageContainer { position:relative; margin:auto; width:230px; border:1px solid #000; } /* styles unrelated to the application follow */ h1 { position:relative; font:1em verdana; } body{background:#444444} .copy { width:500px; margin:auto; position:relative; font:0.9em verdana; } #so_credits { position:relative; margin:25px auto 0px auto; width:350px; font:0.7em verdana; border-top:1px solid #000; border-bottom:1px solid #000; height:90px; padding-top:4px; } #so_credits img { float:left; margin:5px 10px 5px 0px; border:1px solid #000000; width:80px; height:79px; } #imageContainer { height:147px; width:222px; } #imageContainer img { display:none; position:absolute; top:0; left:0; border:10px solid #eeeeee; } </style> </head> <body> <h1 style="text-align:center; color:#FFFFFF">Image Cross Fader Redux</h1> <div id="imageContainer"> <img src="img1.jpg" width="200" height="124" alt="Image 1" /> <img src="img2.jpg" width="200" height="124" alt="Image 2" /> <img src="img3.jpg" width="200" height="124" alt="Image 3" /> <img src="onetarek.png" width="200" height="124" alt="oneTarek" /> </div> <div style=" text-align:center;"> <a href="../Download/image_fading.zip">Download The Zip File of This Code</a> </div>  <hr /> <div style="color:#FFFFFF; font-size:24px; width:550px;"> <div style="float:left"> <ul> <li>Author : <a href="http://www.tshame.com">oneTarek</a> </li> <li>Email : <a href="mailto:onetarek@gmail.com">onetarek@gmail.com</a></li> <li>Phone : +8801190881620</li> </ul> </div> <div style="float:right"> <a href="http://www.tshame.com"><img src="onetarek.png"/></a> </div> </div> </body></html>