Contact Security Central
Let us know your questions, suggestions, comments, and concerns by filling out the form below. Thank you.
Name:
E-mail Address:
Phone Number:
Reason (choose one):
Your Message:
Friday, October 19, 2012
HOW TO Create a Contact Us form using client side code
Shown below is some client side code (jQuery and SPServices) that can be used to create a "Contact Us" form in SharePoint:
Let us know your questions, suggestions, comments, and concerns by filling out the form below. Thank you.
Name:
E-mail Address:
Phone Number:
Reason (choose one):
Your Message:
Let us know your questions, suggestions, comments, and concerns by filling out the form below. Thank you.
Name:
E-mail Address:
Phone Number:
Reason (choose one):
Your Message:
Wednesday, September 22, 2010
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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </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>
Monday, September 20, 2010
Tuesday, September 14, 2010
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"> </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> </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>
Thursday, August 26, 2010
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>
Wednesday, August 18, 2010
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#"><</A> <A class=next href="http://intranet.na.kraft.com/sites/TC/_layouts/RTE2PUEditor.aspx#">></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>
Subscribe to:
Posts (Atom)