HOW TO Display SharePoint List data in Bar Chart format

Embed the following code in a Content Editor Web Part. Also, add the List View Web Parts above the Content Editor Web Part and hide them.

 

The Bar Chart is rendered by the Google Chart API Site.

 

<table>

<tr>

<td>

<div id="RegionReport" class="content"></div>

</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

<td>&nbsp;&nbsp;&nbsp;</td>

 

<td>

<div id="TowerReport" class="content"></div>

</td>

</tr>

</table>

 

<script type="text/javascript" src="/sites/ProcurementPMOWave3/JavaScript/jquery-1.3.2.min.js"></script>

 

 

<script type="text/javascript">

 

$("document").ready(function ($) {

 

//Region Bar Chart variables

var RegionBarChartData;

var RegionBarChartLabels;

 

//Tower Bar Chart variables

var TowerBarChartData;

var TowerBarChartLabels;

 

//Current Estimate and counter variables

var CurrentEstimate;

var count;

 

//Initialize variables here

RegionBarChartData = null;

TowerBarChartData = null;

count = 0;

 

 

//Get all Column Totals here

var ArrayTotal=$('#aggr tr > td:not(.ms-vb)');   

var TotalTxt = new (Array);

 

//Loop through Column Totals here

$.each(ArrayTotal, function(i,e)

                {

                TotalTxt[i] = $(e).text().substr($(e).text().indexOf("= ")+2);        

          //Remove $ sign from Current Estimate value

          CurrentEstimate = TotalTxt[i].replace("$","");

 

               

        //alert("Column Total = " + TotalTxt[i]);

 

        if (count <= 4) //These are the Region Current Estimates

 

        //There are 5 Regions (NA, EU, CEEMA, LA, AP)

        //and List Views containing Current Estimates for each

        //REGION are hidden on this page.

        //NOTE: The List Views need to be placed in this sequential

        //order:

        //NA, EU, CEEMA, LA, AP      

    

        {    

       

          if (RegionBarChartData == null)

          {

            RegionBarChartData = "t:" + CurrentEstimate  + "|";

          }

          else

          {

            //Don't need pipe after the

            //5th REGION (AP) Savings Number 

 

            if (count < 4)

            {

              RegionBarChartData += CurrentEstimate + "|";

            }

            else //Last REGION (AP) Current Estimate value

            {

              RegionBarChartData += CurrentEstimate;

            }            

          }

       

         }

 

        else //count > 5. These are the Tower Current Estimates

 

        //There are 8 Towers (Logistics,Ingredients,Commodities

        //Packaging,Ext. Manufacturing,Marketing,Indirect,IS)

        //and List Views containing Current Estimates for each

        //TOWER are also hidden on this page.

        //NOTE: The List Views need to be placed in this sequential

        //order:

        //Logistics,Ingredients,Commodities,Packaging,

        //Ext. Manufacturing,Marketing,Indirect,IS

 

        {

          //alert("TOWER DATA");

 

          if (TowerBarChartData == null)

          {

            TowerBarChartData = "t:" + CurrentEstimate  + "|";

          }

          else

          {

            //Don't need pipe after the

            //8th TOWER (IS) Savings Number 

 

            if (count < 12)

            {

              TowerBarChartData += CurrentEstimate + "|";

            }

            else //Last TOWER (IS) Current Estimate value

            {

              TowerBarChartData += CurrentEstimate;

            }            

          }

 

 

        }

 

 

 

    //Increment counter here

    count = count + 1;

 

    //alert("Count = " + count); 

    //alert("Region Bar Chart Data = " + RegionBarChartData);

    //alert("Tower Bar Chart Data = " + TowerBarChartData);

 

 

//Build REGION and TOWER Bar Chart Labels here

switch(count)

{

//REGION Bar Chart Labels are built here - case 1 thru' 5

case 1: //NA

  RegionBarChartLabels = "t%24" + CurrentEstimate + ",000000,0,0,13|";

  break;

case 2: //EU

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,1,1,13,-1|";

  break;

 

case 3: //CEEMA

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,2,-1,13|";

  break;

 

case 4: //LA

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,3,-1,13|";

  break;

 

case 5: //AP

  RegionBarChartLabels += "t%24" + CurrentEstimate + ",000000,4,-1,13";

  break;

 

//chm=t%24603.3,000000,0,0,13|t%24321.0,000000,1,1,13,-1|t%2478.4,000000,2,-1,13|t%24131.8,000000,3,-1,13|t%2472.5,000000,4,-1,13|t%24322.4,000000,5,-1,13|t%24150.5,000000,6,-1,13|t%24600.9,000000,7,-1,13

 

//Tower Bar Chart Labels are built here - case 5 thru 13

case 6: //Logistics

  TowerBarChartLabels = "t%24" + CurrentEstimate + ",000000,0,0,13|";

  break;

 

case 7: //Ingredients

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,1,1,13,-1|";

  break;

 

case 8: //Commodities

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,2,-1,13|";

  break;

 

case 9: //Packaging

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,3,-1,13|";

  break;

 

case 10: //External Manufacturing

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,4,-1,13|";

  break;

 

case 11: //Marketing

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,5,-1,13|";

  break;

 

case 12: //Indirect

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,6,-1,13|";

  break;

 

case 13: //IS

  TowerBarChartLabels += "t%24" + CurrentEstimate + ",000000,7,-1,13";

  break;

 

default:

  break;

 

}  //end of switch statement

 

     

 

    }); //end of Column Totals looping construct

 

    //alert("Region Bar Chart Data = " + RegionBarChartData);

    //alert("Tower Bar Chart Data = " + TowerBarChartData);

    //alert("Region Bar Chart Labels = " + RegionBarChartLabels);

    //alert("Tower Bar Chart Labels = " + TowerBarChartLabels);

 

//Build the Region Report Image

//It will be rendered from the Google Chart API site

 

var regionReportImage = "<img src='http://chart.apis.google.com/chart?chxl=0:|NA|EU|CEEMA|LA|AP&chxp=0,10,30,50,70,90&chxs=0,676767,15,0,l,676767&chxt=x&chbh=a,5,0&chs=500x300&cht=bvg&chco=3D7930,49188F,FF6A00,1900FF,FFEA00&chds=0,1000,0,1000,0,1000,0,1000,0,1000&chd=" + RegionBarChartData + "&chm=" + RegionBarChartLabels + "&chtt=Region+Report&chts=676767,25' />";

 

//Build the Tower Report Image

//It will be rendered from the Google Chart API site

 

var towerReportImage = "<img src='http://chart.apis.google.com/chart?chxl=0:|Logistics|Ingredients|Commodities|Packaging|Ex+Man|Marketing|Indirect|IS&chxp=0,5,18,31,44,56,68,81,93&chxs=0,676767,15,0,l,676767&chxt=x&chbh=a,5,0&chs=700x300&cht=bvg&chco=C746AC,DE7D8F,00EECA,91D311,570DDE,7777CC,990066,76A4FB&chds=0,1000,0,1000,0,1000,0,1000,0,1000,0,1000,0,1000,0,1000&chd=" + TowerBarChartData + "&chm=" + TowerBarChartLabels + "&chtt=Tower+Report&chts=676767,25' />";

 

 

//Assign the Images to the respective DIV tags

$("#RegionReport").append("<p>"+ regionReportImage +"</p>")

$("#TowerReport").append("<p>"+ towerReportImage +"</p>")

 

 

});

 

 

 

 </script>

 

CODE: HOW TO Remove Domain portion from SharePoint User ID

Use the code to below to strip out the DOMAIN\ portion from a SharePoint Active Directory user account:

 

string domainUser = Regex.Replace("domain\\user",".*\\\\(.*)", "$1",RegexOptions.None);

OR

string shortName = System.IO.Path.GetFileNameWithoutExtension(ResourceLoginName);

 

 

 

 

CODE: Procurement site home page (jQuery/List Web Service/HTML/JavaScript)

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

    <title>Untitled Page</title>

</head>

<body>

 

<span id="spnGrid">&nbsp;</span>

<br>

<table>

<tr>

<td valign=bottom>Key:</td>

<td><IMG src='Procurement%20Pictures/red_key.png' width='21' height='19' border='none'>Significant Delay/No Progress</td>

<td><IMG src='Procurement%20Pictures/yellow_key.png' width='21' height='19' border='none'>Moderate Progress/Some Delay</td>

<td><IMG src='Procurement%20Pictures/green_key.png' width='21' height='19' border='none'>Good Team Traction/Progress</td>

<td><IMG src='Procurement%20Pictures/notapp_key.png' width='21' height='19' border='none'>Not Applicable</td>

</tr>

</table>

<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var soapEnv =

            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \

                <soapenv:Body> \

                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \

                        <listName>Tower and Region Status</listName> \

                        <viewFields> \

                            <ViewFields> \

                              <FieldRef Name='Form_x0020_Type' /> \

                              <FieldRef Name='Tower' /> \

                              <FieldRef Name='Region' /> \

                              <FieldRef Name='_Status' /> \

                              <FieldRef Name='NA_x0020_Status' /> \

                              <FieldRef Name='EU_x0020_Status' /> \

                              <FieldRef Name='LA_x0020_Status' /> \

                              <FieldRef Name='CEEMA_x0020_Status' /> \

                              <FieldRef Name='AP_x0020_Status' /> \

                           </ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>";

        $.ajax({

            url: "_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: soapEnv,

            complete: buildStatusChart,

            contentType: "text/xml; charset=\"utf-8\""

        });

    });

function buildStatusChart(xData, status) {

        var imgPkgNASrc, imgPkgEUSrc, imgPkgLASrc, imgPkgCEEMASrc, imgPkgAPSrc;

        var imgComNASrc, imgComEUSrc, imgComLASrc, imgComCEEMASrc, imgComAPSrc;

        var imgIngNASrc, imgIngEUSrc, imgIngLASrc, imgIngCEEMASrc, imgIngAPSrc;

        var imgLogNASrc, imgLogEUSrc, imgLogLASrc, imgLogCEEMASrc, imgLogAPSrc;

        var imgManNASrc, imgManEUSrc, imgManLASrc, imgManCEEMASrc, imgManAPSrc;

        var imgIndNASrc, imgIndEUSrc, imgIndLASrc, imgIndCEEMASrc, imgIndAPSrc;

        var imgIfsNASrc, imgIfsEUSrc, imgIfsLASrc, imgIfsCEEMASrc, imgIfsAPSrc;

        var imgMktNASrc, imgMktEUSrc, imgMktLASrc, imgMktCEEMASrc, imgMktAPSrc;

       

        var imgCapNASrc, imgCapEUSrc, imgCapLASrc, imgCapCEEMASrc, imgCapAPSrc;

              

        var imgNASrc, imgEUSrc, imgLASrc, imgCEEMASrc, imgAPSrc, imgCapSrc;

        var imgSrcArray = new Array();

        $(xData.responseXML).find("z\\:row").each(function() {

     

//Get NA Region Status

    if ($(this).attr("ows_Region") == "NA")

        {

        imgNASrc = getImageSource($(this).attr("ows__Status"));          

        }

//Get EU Region Status

    if ($(this).attr("ows_Region") == "EU")

        {

        imgEUSrc = getImageSource($(this).attr("ows__Status"));          

        }

 

//Get LA Region Status

        if ($(this).attr("ows_Region") == "LA")

        {

          imgLASrc = getImageSource($(this).attr("ows__Status"));

        }

//Get CEEMA Region Status

        if ($(this).attr("ows_Region") == "CEEMA")

        {

            imgCEEMASrc = getImageSource($(this).attr("ows__Status"));

        }

//Get AP Region Status

if ($(this).attr("ows_Region") == "AP")

        {

            imgAPSrc = getImageSource($(this).attr("ows__Status"));

        }

//Get Packaging Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Packaging")

{

         //Get Packaging NA Status

        imgPkgNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Packaging EU Status       

        imgPkgEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Packaging LA Status

     imgPkgLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Packaging CEEMA Status

     imgPkgCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Packaging AP Status

        imgPkgAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Commodities Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Commodities")

{

        //Get Commodities NA Status

        imgComNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Commodities EU Status       

        imgComEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Commodities LA Status

     imgComLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Commodities CEEMA Status

     imgComCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Commodities AP Status

        imgComAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));        

}

//Get Ingredients Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Ingredients")

{

        //Get Ingredients NA Status

        imgIngNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Ingredients EU Status        

        imgIngEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Ingredients LA Status

     imgIngLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Ingredients CEEMA Status

     imgIngCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Ingredients AP Status

        imgIngAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Logistics Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Logistics")

{

        //Get Logistics NA Status

        imgLogNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Logistics EU Status       

        imgLogEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Logistics LA Status

     imgLogLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Logistics CEEMA Status

     imgLogCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Logistics AP Status

        imgLogAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Manufacturing Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "External Manufacturing")

{

        //Get Manufacturing NA Status

        imgManNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Manufacturing EU Status       

        imgManEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Manufacturing LA Status

     imgManLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Manufacturing CEEMA Status

     imgManCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Manufacturing AP Status

        imgManAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get Indirect Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Indirect")

{

        //Get Indirect NA Status

        imgIndNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Indirect EU Status       

        imgIndEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Indirect LA Status

     imgIndLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));        

        //Get Indirect CEEMA Status

     imgIndCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Indirect AP Status

        imgIndAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

//Get IS Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "IS")

{

        //Get IS NA Status

        imgIfsNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get IS EU Status       

        imgIfsEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get IS LA Status

        imgIfsLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get IS CEEMA Status

     imgIfsCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get IS AP Status

        imgIfsAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Marketing Tower Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Marketing")

{

        //Get Marketing NA Status

        imgMktNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Marketing EU Status       

        imgMktEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Marketing LA Status

        imgMktLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Marketing CEEMA Status

     imgMktCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Marketing AP Status

        imgMktAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

 

//Get Capex Status for all 5 Regions

if ($(this).attr("ows_Tower") == "Capex")

{

        //Get Marketing NA Status

        imgCapNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));

        //Get Marketing EU Status       

        imgCapEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));       

        //Get Marketing LA Status

        imgCapLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));       

        //Get Marketing CEEMA Status

     imgCapCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));

        //Get Marketing AP Status

        imgCapAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));       

}

    

//Store Packaging Tower Images

if(typeof(imgPkgNASrc) !== 'undefined' && imgPkgNASrc != null)

{

 imgSrcArray["PkgNA"] = imgPkgNASrc;

}

if(typeof(imgPkgEUSrc) !== 'undefined' && imgPkgEUSrc != null)

{

 imgSrcArray["PkgEU"] = imgPkgEUSrc;

}

if(typeof(imgPkgLASrc) !== 'undefined' && imgPkgLASrc != null)

{

 imgSrcArray["PkgLA"] = imgPkgLASrc;

}

if(typeof(imgPkgCEEMASrc) !== 'undefined' && imgPkgCEEMASrc != null)

{

 imgSrcArray["PkgCEEMA"] = imgPkgCEEMASrc;

}

if(typeof(imgPkgAPSrc) !== 'undefined' && imgPkgAPSrc != null)

{

 imgSrcArray["PkgAP"] = imgPkgAPSrc;

}

//Store Commodities Tower Images

if(typeof(imgComNASrc) !== 'undefined' && imgComNASrc != null)

{

 imgSrcArray["ComNA"] = imgComNASrc;

}

if(typeof(imgComEUSrc) !== 'undefined' && imgComEUSrc != null)

{

 imgSrcArray["ComEU"] = imgComEUSrc;

}

if(typeof(imgComLASrc) !== 'undefined' && imgComLASrc != null)

{

 imgSrcArray["ComLA"] = imgComLASrc;

}

if(typeof(imgComCEEMASrc) !== 'undefined' && imgComCEEMASrc != null)

{

 imgSrcArray["ComCEEMA"] = imgComCEEMASrc;

}

if(typeof(imgComAPSrc) !== 'undefined' && imgComAPSrc != null)

{

 imgSrcArray["ComAP"] = imgComAPSrc;

}

//Store Ingredients Tower Images

if(typeof(imgIngNASrc) !== 'undefined' && imgIngNASrc != null)

{

 imgSrcArray["IngNA"] = imgIngNASrc;

}

if(typeof(imgIngEUSrc) !== 'undefined' && imgIngEUSrc != null)

{

 imgSrcArray["IngEU"] = imgIngEUSrc;

}

if(typeof(imgIngLASrc) !== 'undefined' && imgIngLASrc != null)

{

 imgSrcArray["IngLA"] = imgIngLASrc;

}

if(typeof(imgIngCEEMASrc) !== 'undefined' && imgIngCEEMASrc != null)

{

 imgSrcArray["IngCEEMA"] = imgIngCEEMASrc;

}

if(typeof(imgIngAPSrc) !== 'undefined' && imgIngAPSrc != null)

{

 imgSrcArray["IngAP"] = imgIngAPSrc;

}

//Store Logistics Tower Images

if(typeof(imgLogNASrc) !== 'undefined' && imgLogNASrc != null)

{

 imgSrcArray["LogNA"] = imgLogNASrc;

}

if(typeof(imgLogEUSrc) !== 'undefined' && imgLogEUSrc != null)

{

 imgSrcArray["LogEU"] = imgLogEUSrc;

}

if(typeof(imgLogLASrc) !== 'undefined' && imgLogLASrc != null)

{

 imgSrcArray["LogLA"] = imgLogLASrc;

}

if(typeof(imgLogCEEMASrc) !== 'undefined' && imgLogCEEMASrc != null)

{

 imgSrcArray["LogCEEMA"] = imgLogCEEMASrc;

}

if(typeof(imgLogAPSrc) !== 'undefined' && imgLogAPSrc != null)

{

 imgSrcArray["LogAP"] = imgLogAPSrc;

}

//Store Manufacturing Tower Images

if(typeof(imgManNASrc) !== 'undefined' && imgManNASrc != null)

{

 imgSrcArray["ManNA"] = imgManNASrc;

}

if(typeof(imgManEUSrc) !== 'undefined' && imgManEUSrc != null)

{

 imgSrcArray["ManEU"] = imgManEUSrc;

}

if(typeof(imgManLASrc) !== 'undefined' && imgManLASrc != null)

{

 imgSrcArray["ManLA"] = imgManLASrc;

}

if(typeof(imgManCEEMASrc) !== 'undefined' && imgManCEEMASrc != null)

{

 imgSrcArray["ManCEEMA"] = imgManCEEMASrc;

}

if(typeof(imgManAPSrc) !== 'undefined' && imgManAPSrc != null)

{

 imgSrcArray["ManAP"] = imgManAPSrc;

}

//Store Indirect Tower Images

if(typeof(imgIndNASrc) !== 'undefined' && imgIndNASrc != null)

{

 imgSrcArray["IndNA"] = imgIndNASrc;

}

if(typeof(imgIndEUSrc) !== 'undefined' && imgIndEUSrc != null)

{

 imgSrcArray["IndEU"] = imgIndEUSrc;

}

if(typeof(imgIndLASrc) !== 'undefined' && imgIndLASrc != null)

{

 imgSrcArray["IndLA"] = imgIndLASrc;

}

if(typeof(imgIndCEEMASrc) !== 'undefined' && imgIndCEEMASrc != null)

{

 imgSrcArray["IndCEEMA"] = imgIndCEEMASrc;

}

if(typeof(imgIndAPSrc) !== 'undefined' && imgIndAPSrc != null)

{

 imgSrcArray["IndAP"] = imgIndAPSrc;

}

//Store IS Tower Images

if(typeof(imgIfsNASrc) !== 'undefined' && imgIfsNASrc != null)

{

 imgSrcArray["IfsNA"] = imgIfsNASrc;

}

if(typeof(imgIfsEUSrc) !== 'undefined' && imgIfsEUSrc != null)

{

 imgSrcArray["IfsEU"] = imgIfsEUSrc;

}

if(typeof(imgIfsLASrc) !== 'undefined' && imgIfsLASrc != null)

{

 imgSrcArray["IfsLA"] = imgIfsLASrc;

}

if(typeof(imgIfsCEEMASrc) !== 'undefined' && imgIfsCEEMASrc != null)

{

 imgSrcArray["IfsCEEMA"] = imgIfsCEEMASrc;

}

if(typeof(imgIfsAPSrc) !== 'undefined' && imgIfsAPSrc != null)

{

 imgSrcArray["IfsAP"] = imgIfsAPSrc;

}

//Store Marketing Tower Images

if(typeof(imgMktNASrc) !== 'undefined' && imgMktNASrc != null)

{

 imgSrcArray["MktNA"] = imgMktNASrc;

}

if(typeof(imgMktEUSrc) !== 'undefined' && imgMktEUSrc != null)

{

 imgSrcArray["MktEU"] = imgMktEUSrc;

}

if(typeof(imgMktLASrc) !== 'undefined' && imgMktLASrc != null)

{

 imgSrcArray["MktLA"] = imgMktLASrc;

}

if(typeof(imgMktCEEMASrc) !== 'undefined' && imgMktCEEMASrc != null)

{

 imgSrcArray["MktCEEMA"] = imgMktCEEMASrc;

}

if(typeof(imgMktAPSrc) !== 'undefined' && imgMktAPSrc != null)

{

 imgSrcArray["MktAP"] = imgMktAPSrc;

}

 

//Store Capex Tower Images

if(typeof(imgCapNASrc) !== 'undefined' && imgCapNASrc != null)

{

 imgSrcArray["CapNA"] = imgCapNASrc;

}

if(typeof(imgCapEUSrc) !== 'undefined' && imgCapEUSrc != null)

{

 imgSrcArray["CapEU"] = imgCapEUSrc;

}

if(typeof(imgCapLASrc) !== 'undefined' && imgCapLASrc != null)

{

 imgSrcArray["CapLA"] = imgCapLASrc;

}

if(typeof(imgCapCEEMASrc) !== 'undefined' && imgCapCEEMASrc != null)

{

 imgSrcArray["CapCEEMA"] = imgCapCEEMASrc;

}

if(typeof(imgCapAPSrc) !== 'undefined' && imgCapAPSrc != null)

{

 imgSrcArray["CapAP"] = imgCapAPSrc;

}

 

//Store NA Region Image

if(typeof(imgNASrc) !== 'undefined' && imgNASrc != null)

{

 imgSrcArray["NA"] = imgNASrc;

}

//Store EU Region Image

if(typeof(imgEUSrc) !== 'undefined' && imgEUSrc != null)

{

 imgSrcArray["EU"] = imgEUSrc;

}

//Store LA Region Image

if(typeof(imgLASrc) !== 'undefined' && imgLASrc != null)

{

 imgSrcArray["LA"] = imgLASrc;

}

//Store CEEMA Region Image

if(typeof(imgCEEMASrc) !== 'undefined' && imgCEEMASrc != null)

{

 imgSrcArray["CEEMA"] = imgCEEMASrc;

}

//Store AP Region Image

if(typeof(imgAPSrc) !== 'undefined' && imgAPSrc != null)

{

 imgSrcArray["AP"] = imgAPSrc;

}

});

var spnElement= document.getElementById("spnGrid");

//Construct table HTML here

var tableHtml = "";

tableHtml = "<TABLE border='1' cellspacing='0' cellpadding='1'";

tableHtml += "<TBODY>";

//Construct Top row here

tableHtml += "<TR>"

tableHtml += "<TD>&nbsp;</TD>";

tableHtml += "<TD valign=top><A HREF='Tower%20and%20Region%20Status/Forms/Region%20Status.aspx'>Region Status</A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Logistics.aspx'>Logistics</A><br><A HREF='Procurement%20Forms/Forms/Logistics.aspx'><IMG src='Procurement%20Pictures/cargocontainers_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'>Ingredients</A><br><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'><IMG src='Procurement%20Pictures/ingredient_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Commodities.aspx'>Commodities</A><br><A HREF='Procurement%20Forms/Forms/Commodities.aspx'><IMG src='Procurement%20Pictures/corn_thumb.jpg' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Packaging.aspx'>Packaging</A><br><A HREF='Procurement%20Forms/Forms/Packaging.aspx'><IMG src='Procurement%20Pictures/cardboardboxes_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'>Ex Man</A><br><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'><IMG src='Procurement%20Pictures/dairyfactory_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Marketing.aspx'>Marketing</A><br><A HREF='Procurement%20Forms/Forms/Marketing.aspx'><IMG src='Procurement%20Pictures/bullhorn_thumb.jpg' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Indirect.aspx'>Indirect</A><br><A HREF='Procurement%20Forms/Forms/Indirect.aspx'><IMG src='Procurement%20Pictures/paperclips_thumb.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/IS.aspx'>IS</A> <br><A HREF='Procurement%20Forms/Forms/IS.aspx'><IMG src='Procurement%20Pictures/is.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Capex%20Tower%20view.aspx'>Capex</A> <br><A HREF='Procurement%20Forms/Forms/Capex%20Tower%20view.aspx'><IMG src='Procurement%20Pictures/Capex.jpg' width='77' height='58' border='none'></A></TD>";

 

tableHtml += "</TR>";

//Construct NA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/NAOnly.aspx'>NA</A><br><A HREF='Procurement%20Forms/Forms/NAOnly.aspx'><IMG src='Procurement%20Pictures/na.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["NA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComNA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgNA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsNA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapNA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct EU row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/EUOnly.aspx'>EU</A><br><A HREF='Procurement%20Forms/Forms/EUOnly.aspx'><IMG src='Procurement%20Pictures/europe_western77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["EU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComEU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgEU"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsEU"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapEU"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct LA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/LAOnly.aspx'>LA</A><br><A HREF='Procurement%20Forms/Forms/LAOnly.aspx'><IMG src='Procurement%20Pictures/LA.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComLA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgLA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsLA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapLA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct CEEMA row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/CEEMAOnly.aspx'>CEEMA</A><br><A HREF='Procurement%20Forms/Forms/CEEMAOnly.aspx'><IMG src='Procurement%20Pictures/CEEMA77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComCEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgCEEMA"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapCEEMA"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct AP row here

tableHtml += "<TR>";

tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/APOnly.aspx'>AP</A><br><A HREF='Procurement%20Forms/Forms/APOnly.aspx'><IMG src='Procurement%20Pictures/asia-pac77x40.gif' width='77' height='40' border='none'></A></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["AP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComAP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgAP"] + "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsAP"]+ "' width='27' height='27'></TD>";

tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CapAP"]+ "' width='27' height='27'></TD>";

tableHtml += "</TR>";

//Construct closing table tags

tableHtml += "</TBODY>";

tableHtml += "</TABLE>";

//Assign the tableHTML code to the span tag INNER HTML property to display it

spnElement.innerHTML = tableHtml ;

}

function getImageSource(statusValue)

    {

        var imgSrc;

        if (statusValue == "Red")

            {

                imgSrc= "Procurement%20Pictures/red.png";

            }

            else if

            (statusValue == "Yellow")

            {

                imgSrc= "Procurement%20Pictures/yellow.png";

            }

            else if

            (statusValue == "Green")

            {

                imgSrc= "Procurement%20Pictures/green.png";

            }

            else

            {

                imgSrc= "Procurement%20Pictures/notapp.png";

            }

        return imgSrc;

    }

</script>

 

 

</body>

</html>

HOW TO Create a Redirect page in SharePoint using CEWP

Add the following code in a Content Editor Web Part. Change the content= value to adjust the duration before which the redirect will occur.

 

<SPAN class=ms-rteCustom-Kraft_Major_Headline>You will be redirected to the appropriate page in 10 seconds. </SPAN>

 

<meta http-equiv="refresh" content="10;url=http://intranet.na.kraft.com/sites/TC/Pages/Default.aspx">

 

HOW TO Hide/Display content in DIV tags in a Content Editor Web Part

<div id="div1">

    <label id="label1"><h2>United States</h2></label><br />

    <label id="label2">United States info on this page</label><br>

    <input id="button1" type="button" value="Go to Page 2" onclick="javascript:GoToPage2()" />

</div>

 

<div id="div2">

    <label id="label3"><h2>Canada</h2></label><br />

    <label id="label4">Canada Info on this page</label><br>

    <input id="button2" type="button" value="Go to Page 1" onclick="javascript:GoToPage1()" />

</div>

 

<script type="text/javascript">

 

_spBodyOnLoadFunctionNames.push("GoToPage1");

 

    function GoToPage2()

    {

        //alert("In Page 2 code");

       

        var divTag1 = document.getElementById("div1");

        divTag1.style.display = "none";

 

        var divTag2 = document.getElementById("div2");

        divTag2.style.display = "";

    }

 

    function GoToPage1()

    {

 

        //alert("In Page 1 code");

 

        var divTag2 = document.getElementById("div2");

        divTag2.style.display = "none";

 

        var divTag1 = document.getElementById("div1");

        divTag1.style.display = "";

 

       

 

       

 

       

       

    }

 

    </script>

HOW TO Create a Rotating Banner in SharePoint using HTML/CSS/JavaScript

 

This code shows how to create a rotating banner in SharePoint using HTML/CSS/JavaScript.

 

Embed the entire code in a Content Editor Web Part.

 

 

<script type="text/javascript">

                                //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.

//** May 2nd, 08'- Script rewritten and updated to 2.0.

//** June 12th, 08'- Script updated to v 2.3, which adds the following features:

                                                //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.

                                                //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).

                                                //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

 

//** July 11th, 08'- Script updated to v 2.4:

                                                //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")

                                                //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

 

var featuredcontentslider={

 

//3 variables below you can customize if desired:

ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',

bustajaxcache: true, //bust caching of external ajax page after 1st request?

enablepersist: true, //persist to last content viewed when returning to page?

 

settingcaches: {}, //object to cache "setting" object of each script instance

 

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.

                this.turnpage(this.settingcaches[fcsid], pagenumber)

},

 

ajaxconnect:function(setting){

                var page_request = false

                if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)

                                try {

                                page_request = new ActiveXObject("Msxml2.XMLHTTP")

                                }

                                catch (e){

                                                try{

                                                page_request = new ActiveXObject("Microsoft.XMLHTTP")

                                                }

                                                catch (e){}

                                }

                }

                else if (window.XMLHttpRequest) // if Mozilla, Safari etc

                                page_request = new XMLHttpRequest()

                else

                                return false

                var pageurl=setting.contentsource[1]

                page_request.onreadystatechange=function(){

                                featuredcontentslider.ajaxpopulate(page_request, setting)

                }

                document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg

                var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

                page_request.open('GET', pageurl+bustcache, true)

                page_request.send(null)

},

 

ajaxpopulate:function(page_request, setting){

                if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

                                document.getElementById(setting.id).innerHTML=page_request.responseText

                                this.buildpaginate(setting)

                }

},

 

buildcontentdivs:function(setting){

                var alldivs=document.getElementById(setting.id).getElementsByTagName("div")

                for (var i=0; i<alldivs.length; i++){

                                if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"

                                                setting.contentdivs.push(alldivs[i])

                                                                alldivs[i].style.display="none" //collapse all content DIVs to begin with

                                }

                }

},

 

buildpaginate:function(setting){

                this.buildcontentdivs(setting)

                var sliderdiv=document.getElementById(setting.id)

                var pdiv=document.getElementById("paginate-"+setting.id)

                var phtml=""

                var toc=setting.toc

                var nextprev=setting.nextprev

                if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){

                                for (var i=1; i<=setting.contentdivs.length; i++){

                                                phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '

                                }

                                phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')

                                pdiv.innerHTML=phtml

                }

                var pdivlinks=pdiv.getElementsByTagName("a")

                var toclinkscount=0 //var to keep track of actual # of toc links

                for (var i=0; i<pdivlinks.length; i++){

                                if (this.css(pdivlinks[i], "toc", "check")){

                                                if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)

                                                                pdivlinks[i].style.display="none" //hide this toc link

                                                                continue

                                                }

                                                pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link

                                                pdivlinks[i][setting.revealtype]=function(){

                                                                featuredcontentslider.turnpage(setting, this.getAttribute("rel"))

                                                                return false

                                                }

                                                setting.toclinks.push(pdivlinks[i])

                                }

                                else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"

                                                pdivlinks[i].onclick=function(){

                                                                featuredcontentslider.turnpage(setting, this.className)

                                                                return false

                                                }

                                }

                }

                this.turnpage(setting, setting.currentpage, true)

                if (setting.autorotate[0]){ //if auto rotate enabled

                                pdiv[setting.revealtype]=function(){

                                                featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

                                }

                                sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on

                                                featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

                                }

                                setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation

                 this.autorotate(setting)

                }

},

 

urlparamselect:function(fcsid){

                var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL

                return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},

 

turnpage:function(setting, thepage, autocall){

                var currentpage=setting.currentpage //current page # before change

                var totalpages=setting.contentdivs.length

                var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)

                turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust

                if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly

                                return

                setting.currentpage=turntopage

                setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex

                this.cleartimer(setting, window["fcsfade"+setting.id])

                setting.cacheprevpage=setting.prevpage

                if (setting.enablefade[0]==true){

                                setting.curopacity=0

                                this.fadeup(setting)

                }

                if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)

                                setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

                                setting.onChange(setting.prevpage, setting.currentpage)

                }

                setting.contentdivs[turntopage-1].style.visibility="visible"

                setting.contentdivs[turntopage-1].style.display="block"

                if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

                                this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")

                if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

                                this.css(setting.toclinks[turntopage-1], "selected", "add")

                setting.prevpage=turntopage

                if (this.enablepersist)

                                this.setCookie("fcspersist"+setting.id, turntopage)

},

 

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)

                var targetobject=setting.contentdivs[setting.currentpage-1]

                if (targetobject.filters && targetobject.filters[0]){ //IE syntax

                                if (typeof targetobject.filters[0].opacity=="number") //IE6

                                                targetobject.filters[0].opacity=value*100

                                else //IE 5.5

                                                targetobject.style.filter="alpha(opacity="+value*100+")"

                }

                else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax

                                targetobject.style.MozOpacity=value

                else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax

                                targetobject.style.opacity=value

                setting.curopacity=value

},

 

fadeup:function(setting){

                if (setting.curopacity<1){

                                this.setopacity(setting, setting.curopacity+setting.enablefade[1])

                                window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)

                }

                else{ //when fade is complete

                                if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)

                                                setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

                                setting.onChange(setting.cacheprevpage, setting.currentpage)

                }

},

 

cleartimer:function(setting, timervar){

                if (typeof timervar!="undefined"){

                                clearTimeout(timervar)

                                clearInterval(timervar)

                                if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div

                                                setting.contentdivs[setting.cacheprevpage-1].style.display="none"

                                }

                }

},

 

css:function(el, targetclass, action){

                var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")

                if (action=="check")

                                return needle.test(el.className)

                else if (action=="remove")

                                el.className=el.className.replace(needle, "")

                else if (action=="add")

                                el.className+=" "+targetclass

},

 

autorotate:function(setting){

 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])

},

 

getCookie:function(Name){

                var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

                if (document.cookie.match(re)) //if cookie found

                                return document.cookie.match(re)[0].split("=")[1] //return its value

                return null

},

 

setCookie:function(name, value){

                document.cookie = name+"="+value

 

},

 

 

init:function(setting){

                var persistedpage=this.getCookie("fcspersist"+setting.id) || 1

                var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index

                this.settingcaches[setting.id]=setting //cache "setting" object

                setting.contentdivs=[]

                setting.toclinks=[]

                setting.topzindex=0

                setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)

                setting.prevpage=setting.currentpage

                setting.revealtype="on"+(setting.revealtype || "click")

                setting.curopacity=0

                setting.onChange=setting.onChange || function(){}

                if (setting.contentsource[0]=="inline")

                                this.buildpaginate(setting)

                if (setting.contentsource[0]=="ajax")

                                this.ajaxconnect(setting)

}

 

}              </script>

 

<style>

.sliderwrapper{

position: relative; /*leave as is*/

overflow: hidden; /*leave as is*/

border: 0px ;

border-bottom-width: 0px;

width: 680px; /*width of featured content slider*/

height: 250px;

}

 

 

 

.sliderwrapper .contentdiv{

visibility: hidden; /*leave as is*/

position: absolute; /*leave as is*/

left: 0;  /*leave as is*/

top: 0;  /*leave as is*/

padding: 2px;

background: white;

width: 680px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */

height: 250px;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

}

 

.pagination{

width: 680px; /*Width of pagination DIV. Total width should equal slider's outer width (400+10+10=420)*/

text-align: right;

background-color: #FFFFFF;

padding: 5px 10px;

}

 

.pagination a{

padding: 0 5px;

text-decoration: none;

color: #00007D;

background: white;

}

 

.pagination a:hover, .pagination a.selected{

color: #000;

background-color: #FEE496;

}

.promotext{color: #000000;

width: 676px;

height:32px;

background: #FEFEFE;

padding:10px;

font-size:16px;

}

.promotext a:link, .promotext a:visited, .promotext a:hover {color: #0000FF;

text-decoration: underline;

}

</style>

 

 

<DIV class=sliderwrapper id=slider2>

<DIV class=contentdiv style="BACKGROUND-IMAGE: url(http://intranet.na.kraft.com/sites/TC/SiteCollectionImages/1081655_44418026-A)">

<DIV class=promotext><STRONG>Make the most of your next trip. <A href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">Click for the latest travel information from Kraft.</A></STRONG></DIV></DIV>

<DIV class=contentdiv style="BACKGROUND-IMAGE: url(http://intranet.na.kraft.com/sites/TC/SiteCollectionImages/alttravelpage.JPG)">

<DIV class=promotext><strong>Be a pioneer. <a href="#">Start using Kraft's collaboration tools today!</a>.</strong></DIV></DIV>

<DIV class=contentdiv style="BACKGROUND-IMAGE: url(http://intranet.na.kraft.com/sites/TC/SiteCollectionImages/lightcube.jpg)">

<DIV class=promotext><strong>Information about locations around the globe is available now. <a href="#">Use our top destinations map to begin exploring</a>.</strong></DIV></DIV></DIV>

<DIV class=pagination id=paginate-slider2><A class=toc href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">First Page</A> <A class=toc href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">Second Page</A> <A class=toc href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">Third Page</A> <A class=prev style="MARGIN-LEFT: 10px" href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">&lt;</A> <A class=next href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">&gt;</A> </DIV>

 

 

<script type="text/javascript">

 

featuredcontentslider.init({

                id: "slider2",  //id of main slider DIV

                contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

                toc: "#increment",  //Valid values: "#increment", "markup", ["label1", "label2", etc]

                nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.

                revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"

                enablefade: [true, 0.1],  //[true/false, fadedegree]

                autorotate: [true, 6000],  //[true/false, pausetime]

                onChange: function(previndex, curindex){  //event handler fired whenever script changes slide

                                //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

                                //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

                }

})

 

</script>