no Jquery only Javascrip fadein function with cleartype fot text
- by Chetan
Sorry guys.. I am not familiar with JavaScrip anymore but I need to add clear type of some thing which can make text anti-aliased in IE7 browser. My script as follow
// JavaScript Document
var CurrentDivIndex=0;
var TimeOutValue;
var btn;
var TimeToFade = 1000.0;
function ShowDivSlideShow()
{
try
{
if(CurrentDivIndex == 5)
CurrentDivIndex=0;
CurrentDivIndex++;
//alert("Banner" + CurrentDivIndex);
//alert(CurrentDivIndex);
var Indexer=1;
while(Indexer<6)
{
var DivToShow=document.getElementById("Banner" + Indexer);
DivToShow.style.display = "none";
btn=document.getElementById("btnb" + Indexer);
btn.setAttribute("class","none");
Indexer++;
}
var DivToShow=document.getElementById("Banner" + CurrentDivIndex);
DivToShow.style.display = "block";
btn=document.getElementById("btnb" + CurrentDivIndex);
btn.setAttribute("class","activeSlide");
// btn.className="activeSlide";
fadeIn();
TimeOutValue=setTimeout("ShowDivSlideShow()",6000);
}
catch(err)
{
alert(err)
}
}
function ShowCustomDiv(CurrentDivIndexRec)
{
clearTimeout(TimeOutValue)
CurrentDivIndex=CurrentDivIndexRec
var Indexer=1;
while(Indexer<6)
{
if(CurrentDivIndex==Indexer)
{
Indexer++;
continue;
}
var DivToShow=document.getElementById("Banner" + Indexer);
DivToShow.style.display = "none";
btn=document.getElementById("btnb" + Indexer);
btn.setAttribute("class","none");
Indexer++;
}
var DivToShow=document.getElementById("Banner" + CurrentDivIndex);
DivToShow.style.display = "block";
btn=document.getElementById("btnb" + CurrentDivIndex);
btn.setAttribute("class","activeSlide");
btn.className="activeSlide"
fadeIn();
}
function ShowDivSlideShowWithTimeOut(CurrentDivIndexRec)
{
clearTimeout(TimeOutValue)
CurrentDivIndex=CurrentDivIndexRec;
var Indexer=1;
while(Indexer<6)
{
if(CurrentDivIndex==Indexer)
{
Indexer++;
continue;
}
var DivToShow=document.getElementById("Banner" + Indexer);
DivToShow.style.display = "none";
btn=document.getElementById("btnb" + Indexer);
btn.setAttribute("class","none");
Indexer++;
}
var DivToShow=document.getElementById("Banner" + CurrentDivIndexRec);
DivToShow.style.display = "block";
btn=document.getElementById("btnb" + CurrentDivIndexRec);
btn.setAttribute("class","activeSlide");
TimeOutValue=setTimeout("ShowDivSlideShow()",6000);
}
function ShowCustomDivOnClick(CurrentDivIndexRec)
{
clearTimeout(TimeOutValue)
CurrentDivIndex=CurrentDivIndexRec;
var Indexer=1;
while(Indexer<6)
{
if(CurrentDivIndex==Indexer)
{
Indexer++;
continue;
}
var DivToShow=document.getElementById("Banner" + Indexer);
DivToShow.style.display = "none";
btn=document.getElementById("btnb" + Indexer);
btn.setAttribute("class","none");
Indexer++;
}
var DivToShow=document.getElementById("Banner" + CurrentDivIndexRec);
DivToShow.style.display = "block";
btn=document.getElementById("btnb" + CurrentDivIndexRec);
btn.setAttribute("class","activeSlide");
fadeIn();
TimeOutValue=setTimeout("ShowDivSlideShow()",6000);
}
function setOpacity(level) {
element=document.getElementById("Banner" + CurrentDivIndex);
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 300; /* 1000 millisecond fade = 1 sec */
var steps = 10; /* number of opacity intervals */
var delay = 6000; /* 5 sec delay before fading out */
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + i + ")", i * duration);
}
// setTimeout("fadeOut()", delay);
}
function fadeOut() {
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + (1 - i) + ")", i * duration);
}
setTimeout("fadeIn()", duration);
}
//end of script
Now I am very confused where to add :
$('#slideshow').cycle({
cleartype: 1 // enable cleartype corrections
});
or
$('#fadingElement').fadeIn(2000, function(){
$(this).css('filter','');
});
so it will work... Please Help me...
