no Jquery only Javascrip fadein function with cleartype fot text

Posted by Chetan on Stack Overflow See other posts from Stack Overflow or by Chetan
Published on 2011-01-06T06:43:56Z Indexed on 2011/01/06 6:53 UTC
Read the original article Hit count: 308

Filed under:

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...

© Stack Overflow or respective owner

Related posts about JavaScript