Javascript Contnet Slider


Hello readers. This piece of code slides the content just like javascript. Keep in mind about the ID of UL and DIV you are using to slide the content because these ID's are used by the javascript.


Below is the code copy n paste and enjoy...

<html>

<head>

<title></title>
<script type="text/javascript" language="javascript">




var timerOn = 0;
var t = null;
v = 0;
l = 0;
divId = null;


    function getItems(idDiv)
    {
        if(!timerOn)
        {
            timerOn = 1;
            divId = document.getElementById('offers');
            divId.innerHTML = "";           
            setTimeout(function(){startList(v,l);}, 2000);                      
        }
           
    }


    function startList(val, len)
    {
       if(val == len)
       {
        val = 0;
       }
        
        v = val;
        l = len;
       
       var cntnt = ""; 
       var lst = document.getElementById('offersList').getElementsByTagName('li');
       t = setTimeout(function(){startList(val+1, lst.length);}, 2000);                  
       document.getElementById('holder').innerHTML = lst[val].innerHTML;
    }
    
    function stopList()
    {
        timerOn = 0;
        clearTimeout(t);
    }
    
  function startAgain()
  {
    startList(v, l);
  }
  
  function showHideBtn(sh)
  {  
      if(t != null)
      {
       
        if(parseInt(sh) == 0)
        {
            document.getElementById("ctrlbtns").style.display = 'none';
        }
        else
        {
            getA();
            document.getElementById("ctrlbtns").style.display = 'block';    
        }
      } 
  }
  
  function addContent()
  {
        var startStopDiv = document.createElement("div");
        var holderDiv = document.createElement("div");
        var parentDiv = document.getElementById("offers");
        
        startStopDiv.setAttribute("id", "ctrlbtns");
        startStopDiv.style.margin = '1px';
        startStopDiv.style.display = 'none';       
        startStopDiv.style.textAlign = 'center';
        startStopDiv.style.height = '20px';
        startStopDiv.style.borderRadius = '10px';
        startStopDiv.style.MozBorderRadius = '10px';
        
        startStopDiv.innerHTML = "<a href='javascript:stopList();'>Stop</a><a href ='javascript:startAgain();'>Start</a>"; 
              
        holderDiv.setAttribute("id", "holder");
        holderDiv.style.padding = '10px';
        
        if(navigator.appName == "Microsoft Internet Explorer")
        {
             holderDiv.style.height = (parseInt(divId.clientHeight) - 20) + 'px';
             startStopDiv.style.filter = 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#95000000,endColorstr=#95000000)';
        }
        else
        {
             holderDiv.style.height = (parseInt(divId.clientHeight) - 42) + 'px';
             startStopDiv.style.background = 'rgba(0,0,0,0.8)';
        }
       
        holderDiv.innerHTML = "";
        
        parentDiv.appendChild(holderDiv);
        parentDiv.appendChild(startStopDiv);
        
  }
  
  
  function getA()
  {
      var aElm = document.getElementById('ctrlbtns').getElementsByTagName('a');
      
      for(var i=0; i<aElm.length; i++)
      {
          aElm[i].setAttribute("id", "a"+i);
          aElm[i].style.color = '#fff';
          aElm[i].style.textDecoration = 'none';
          aElm[i].style.paddingRight = '5px';
          aElm[i].style.paddingLeft = '5px';
          aElm[i].style.letterSpacing = '1px';
          aElm[i].style.lineHeight = '1.5em';
          aElm[i].style.color = '#cccccc';
          aElm[i].style.fontWeight = '600';
          aElm[i].style.fontFamily = 'verdana';                      
          aElm[i].style.fontSize = '12px';          
      }
     
  }


 function createStyle()
 {
    var styl = document.createElement('style');
    var rule = 'a:hover{color:#ff0000 !important;}';
    var head = document.getElementsByTagName('head')[0];
    
    styl.setAttribute("type", "text/css");
    
    if(styl.styleSheet)
    {
        styl.styleSheet.cssText = rule;
    }
    else
    {
        var stylFF = document.createTextNode(rule);
        styl.appendChild(stylFF);
    }
    
    head.appendChild(styl);
 }

  
  window.onload = function()
                            {
                                createStyle();
                                addContent();
                                document.getElementById('offers').onmouseover = function(){showHideBtn(1);}
                                document.getElementById('offers').onmouseout = function(){showHideBtn(0);}
                                document.getElementById('offersList').style.display = 'none'; 
                                
                            }
  
  
</script>
</head>

<body>
<ul id="offersList">
    <li>
        <p>
            <b>Offer One: </b><br>
            Get home at the perfect location.
        </p>
    </li>
    <li>
        <p>
            <b>Offer Two:</b><br />
            Your home at nice and at non disturbance area.
        </p>
    </li>
    <li>
        <p><b>Offer Three:</b><br />
        More to come
        </p>
    </li>
 
    <li>
        <p><b>Offer Four:</b><br />
        More to come
        </p>
    </li>
    <li>
        <p><b>Offer Five:</b><br />
        More to come
        </p>
    </li>
</ul>
<br /><br />

<div>

<div id="offers" style="border:solid 1px Red; height:200px; width:200px;">

</div>
</div>
<script type="text/javascript" language="javascript">
    getItems();
</script>
</body>

</html>

Demo Here:-
http://www.navvtech.com/demo/listslider/

Comments

Post a Comment

Popular posts from this blog

Get Query String Values With Javascript

Image
JavaScript Code To  Retrieve Query String Values This topic shows you how you can retrieve the query string values from a URL using JavaScript. The code is simple and understandable. Below is the complete code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Query String using Javascript</title> <script type="text/javascript" language="javascript">     function getquerystring()     {         var qsarr = new Array();                  var qs = location.search.substring(1);         var singleqs = new Array();         var str ="";         qsarr = qs.split('&');         for( i=0; i<qsarr.length; i++)         {             singleqs = qsarr[i].split('=');             str += 'Query String Name
Read more

Change Css Class of li in ul onclick

Image
Below is the simple and a short code to change or set the background color of item in menu onclick or active tab of menu (i.e. li of ul) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>List Item</title> <style type="text/css"> ul {     list-style-type:none;     float:left;     border-bottom: solid 2px Red;     padding-right:40px; } ul li {     float:left;     width:auto;     padding:8px;     display:block;     cursor:pointer; } </style> <script type="text/javascript" language="javascript">     function checklist(ctrl)     {                 var list = document.getElementById("menu").getElementsByTagName('li&#
Read more

Change Text Color with Javascript

Below is the simple and sweet code of changing text color after fraction of second automatically. Copy n Paste and run... <html> <head> <title>Text Color Change</title> <script type="text/javascript" language="javascript"> elmColor = 0;     function changeColor(elmColor)     {                    switch(elmColor)         {             case 0:             document.getElementById('colorChange').style.color = '#000000';             elmColor++;              break;                          case 1:             document.getElementById('colorChange').style.color = '#ff0000';              elmColor++;             break;                          case 2:             document.getElementById('colorChange').style.color = '#00ff00';              elmColor++;             break;                          case 3:             document.getElementById('colorChange').style
Read more