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#">&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>

Tuesday, August 17, 2010

jQuery and CSS files for SharePoint Content Editor Web Part based solutions

The jQuery and CSS files that I referenced in the Content Editor Web Part-based solutions in my blog can be downloaded from the following link on Google Docs:


HOW TO Display a dropdown list based on data in a SharePoint List using jQuery/HTML

This code shows how to render a drop down list in SharePoint using jQuery/HTML.  The values displayed in the drop down list are stored in a backend SharePoint List.

 

Embed the entire code in a Content Editor Web Part.

 

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/SharePointListHelper.js"></script>

 

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/DropDownLoader.js"></script>

 

 

<script type="text/javascript">

 

 

function ddlLocation_onChange() {

 

 //Get Kraft Location selected

 var ddlKraftLoc = document.getElementById("ddlLocation");

 

  //alert("You selected " + ddlKraftLoc.options[ddlKraftLoc.selectedIndex].value);

 

 //open the Wiki page corresponding to the Location selected

 window.open(ddlKraftLoc.options[ddlKraftLoc.selectedIndex].value);

 

}

 

 

function LoadDropDown()  

{  

 

var insertZeroOption = new Option("-Select a Location-", "");

var updatedDDL = document.getElementById("ddlLocation");

updatedDDL.options[0] = insertZeroOption;

 

 

 //Create DropDownList object

 var ddl = new DropDownLoader("http://intranet.na.kraft.com/sites/TC");  

 

 //Populate Kraft Location DDL based on Items in SharePoint List

 ddl.LoadDropDown("Kraft Locations", "ddlLocation", "ows_Title", "ows_URL", "");

 

 

 

 

}  

 

 //Inject JavaScript function to populate Location DDL on Load event

_spBodyOnLoadFunctionNames.push("LoadDropDown");

 

</script>

 

<table id=Destination>

<tr>

<td width=3px>&nbsp;</td>

<td>

<SPAN class=ms-rteCustom-Kraft_Major_Headline>Destination Information</SPAN>

</td>

</tr>

<tr>

<td width=3px>&nbsp;</td>

<td>

<SPAN class=ms-rteCustom-Kraft_Minor_Headline>Select a Kraft top destination</SPAN>

</td>

</tr>

<tr>

<td width=3px>&nbsp;</td>

<td><select id="ddlLocation" onchange="ddlLocation_onChange();">

<option></option>

</select></td>

</tr>

</table>

HOW TO Display table with images/rollovers based on a backend SharePoint List data using HTML/jQuery

The code below shows how to display a table (containing images/rollovers). The data that is displayed in the table, is retrieved from a backend SharePoint List. It uses jQuery and HTML to render the table.

 

Embed the entire code in a Content Editor Web Part.

 

 

<link href="http://intranet.na.kraft.com/sites/TC/jQuery/AltToTravel.css" rel="stylesheet"

type="text/css"/>

 

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-1.3.2.min.js"></script>

 

 

 

<script type="text/javascript">

    

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

  $(window).load(function() {

 

        var costSoapEnv =

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

                <soapenv:Body> \

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

                        <listName>Travel and Collaboration Tools Cost</listName> \

                  <viewFields> \

                            <ViewFields> \

                              <FieldRef Name='Typical_x0020_domestic_x0020_tra' /> \

                              <FieldRef Name='Typical_x0020_international_x002' /> \

                              <FieldRef Name='Most_x0020_Collaboration_x0020_T' /> \

                              <FieldRef Name='B2B_x0020_TelePresence_x0020_too' /> \

                            </ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>";

 

 

//alert("Soap = " + costSoapEnv);

        $.ajax({

            url: "http://intranet.na.kraft.com/sites/TC/plantrip/_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: costSoapEnv,

            complete: buildTravelCostsChart,

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

        });

    });

 

function buildTravelCostsChart(xData, status) {

var costsColTag;

var itemCount;

 

//Construct the Column tag classes here

costsColTag = "sizedata chart_td";

 

//Get a handle to the SPAN tag

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

 

 

//alert("here");

//alert(xData.responseXML.xml);

 

 

//Check if a SoapServerException has occurred

//This could occur if the List is missing/deleted

//The Response XML will contain the SoapServerException

//If SoapServerException is found, IndexOf returns an integer

//IndexOf returns -1 if SoapServerException is not found.

 

//var strErrorCheck = xData.responseXML.xml;

//alert ("strErrorCheck = " + strErrorCheck);

//var posErrStr = strErrorCheck.indexOf("SoapServerException");

 

//if (posErrStr >= 0)

//{

       //alert ("A Soap Exception has occurred"); 

 

 

      //Display a table with a message indicating that

      //Travel and B2B Costs SharePoint List NOT found in the Site

      //Display an appropriate error message

      //Start constructing No List Table HTML here

  //var noListTableHtml = "";

  //noListTableHtml += "<TABLE WIDTH=100% border=0>";

  //noListTableHtml += "<TBODY>";

  //noListTableHtml += "<TR>";

  //noListTableHtml += "<TD><SPAN class=ms-rteCustom-Kraft_Major_Headline><FONT

size=2>&nbsp;<FONT color=#ff0000>Travel and B2B Costs SharePoint List not found! Please contact

the Site Administrator.</FONT></FONT></SPAN></TD>"

  //noListTableHtml += "</TR></TBODY></TABLE>";

 

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

     //spnElement.innerHTML = noListTableHtml ; 

 

//}

 

//else //returning -1; No Soap Exception

//{

 

 

 

//Get the Item Count here

$(xData.responseXML).find("[nodeName=rs:data]").each(function() {

  itemCount = $(this).attr("ItemCount");

  //alert("Total Number of Items = " + itemCount); 

});

 

 

 

//If Item Count is 0 display an error message to user

//Travel and B2 Tools cost info not found

//Have user fill it out by providing a link to SharePoint List

if (itemCount == "0")

 

{

 

   //alert ("Travel and B2B Tools cost info not defined in SharePoint List");

  //Display a table with a message indicating that

  //Travel Cost info has NOT been defined in the SharePoint List

  //Provide a link to the SharePoint List here

  //Start constructing table HTML here

  var noCostsTableHtml = "";

  noCostsTableHtml += "<TABLE WIDTH=100% border=0>";

  noCostsTableHtml += "<TBODY>";

  noCostsTableHtml += "<TR>";

  noCostsTableHtml += "<TD><SPAN class=ms-rteCustom-Kraft_Major_Headline><FONT size=2>&nbsp;<FONT

color=#ff0000>Travel and B2B tools cost info not found!</FONT></FONT></SPAN></TD>"

  noCostsTableHtml += "</TR>";

  noCostsTableHtml += "<TR>";

  noCostsTableHtml += "<TD>&nbsp;Please click on the link below to define the Travel and B2B

tools cost info in the SharePoint List.</TD>";

  noCostsTableHtml += "</TR>";

  noCostsTableHtml += "<TR>";

  noCostsTableHtml += "<TD><A

href='http://intranet.na.kraft.com/sites/TC/plantrip/Lists/Alternatives%20to%20Travel/AllItems.as

px'>&nbsp;<STRONG><U><FONT color=#0000ff>Define Travel and B2B tools cost info

tools</FONT></U></STRONG></A></TD>";

   noCostsTableHtml += "</TR></TBODY></TABLE>";

 

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

     spnElement.innerHTML = noCostsTableHtml; 

 

}

 

else //Item Count is greater than 0; render the Travel and B2B tools cost info chart

 

{

 

 

//Loop through the result set returned in the SOAP

//envelope courtesy of the SharePoint Lists Web Service

$(xData.responseXML).find("[nodeName=z:row]").each(function() {

   

    //alert("here");

   

    //Get domestic travel cost

    domCost = $(this).attr("ows_Typical_x0020_domestic_x0020_tra");

   

    //Check if domCost is blank

    if (typeof(domCost) == 'undefined') 

    {

      domCost = "Domestic travel cost not defined in SharePoint List.";

 

    }

 

    //alert(domCost);

 

     //Get international travel cost

     intlCost = $(this).attr("ows_Typical_x0020_international_x002");

   

    //Check if intlCost is blank

    if (typeof(intlCost) == 'undefined') 

    {

      intlCost = "International travel cost not defined in SharePoint List.";

 

    }

 

  

    //alert(intlCost);

 

    //Get Most Collab tools cost

    collabCost = $(this).attr("ows_Most_x0020_Collaboration_x0020_T");

   

    //Check if collabCost is blank

    if (typeof(collabCost) == 'undefined') 

    {

      collabCost = "Collaboration tools cost not defined in SharePoint List.";

 

    }

 

    //alert(collabCost);

 

   //Get B2B TelePresence tools cost

    b2bCost = $(this).attr("ows_B2B_x0020_TelePresence_x0020_too");

 

   //Check if b2bCost is blank

    if (typeof(b2bCost) == 'undefined') 

    {

      b2bCost = "B2B tools cost not defined in SharePoint List.";

 

    }

 

    //alert(b2bCost);

 

}); //closing for jQuery for loop

 

    //Start constructing chart table HTML here

    var tableHtml = "";

 

   //Render Page Heading here

    tableHtml += "<P><B><FONT size=4><SPAN class=ms-rteCustom-Kraft_Major_Headline>Alternatives

to Travel</SPAN></B></P>";

 

  //Render Travel and B2B Tool Costs table here

    tableHtml += "<P><TABLE id='costsgrid' cellSpacing='0' cellPadding='0' border='0'>";

 

    tableHtml += "<TBODY><TR><TH width='450px' class=cost_th>Typical US domestic travel

cost</TH><TH width='450px' class=cost_th>Typical international travel (US to int'l)

cost</TH></TR>";

 

    tableHtml += "<TR><TD width='450px' class='";

    tableHtml += costsColTag + "'><P align=center><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=2>1 person - 2 night stay</FONT></SPAN></P></TD>";

 

    tableHtml += "<TD width='450px' class='";

 

    tableHtml += costsColTag + "'><P align=center><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=2>1 person - 2 night stay</FONT></SPAN></P></TD></TR>";

 

 

    tableHtml += "<TR><TD width='450px' class='";

 

    tableHtml += costsColTag + "'><P align=center><B><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=3>" + domCost + "</FONT></SPAN></B></P></TD>";

 

  tableHtml += "<TD width='450px' class='";

 

  //End Cost table rendering here

  tableHtml += costsColTag + "'><P align=center><B><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=3>" + intlCost + "</FONT></SPAN></B></P></TD></TR><TR></TR></TBODY></TABLE></P>";

 

  //Render TelePresence Costs table here

tableHtml += "<P><TABLE id='telepresencecostsgrid' cellSpacing='0' cellPadding='0' border='0'>";

 

    tableHtml += "<TBODY><TR><TH width='450px' class=cost_th>Most Collaboration Tools

cost</TH><TH width='450px' class=cost_th>Cost of using external TelePresence</TH></TR>";

 

    tableHtml += "<TR><TD width='450px' class='";

 

    tableHtml += costsColTag + "'><P align=center><B><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=3>" + collabCost + "</FONT></SPAN></B></P></TD>";

 

  tableHtml += "<TD width='450px' class='";

 

  //End TelePresence Cost table rendering here

  tableHtml += costsColTag + "'><P align=center><B><SPAN class=ms-rteCustom-Kraft_Body><FONT

size=3>" + b2bCost + "</FONT></SPAN></B></P></TD></TR><TR></TR></TBODY></TABLE></P>";

 

 

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

     spnElement.innerHTML = tableHtml ;

 

   

} //closing brace for (itemCount == 0) if statement   

 

//} //closing brace for SoapException if statement

 

} //closing brace for function

 

 

</script>

 

<span id="spnCostsChart"></span>

 

 

 

 

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-1.3.2.min.js"></script>

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/wz_tooltip.js"></script>

 

<style type="text/css">

 

th.chart_th {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                font-weight: bold;

                color: #FFF;

                background-color: #039;

                border-top-width: 1px;

                border-right-width: 1px;

                border-bottom-width: 1px;

                border-left-width: 1px;

                border-top-style: none;

                border-right-style: solid;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #FFF;

                border-right-color: #FFF;

                border-bottom-color: #FFF;

                border-left-color: #FFF;

                padding-top: 4px;

                padding-bottom: 4px;

}

 

th.cost_th {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                font-weight: bold;

                color: #FFF;

                background-color: #339966;

                border-top-width: 1px;

                border-right-width: 1px;

                border-bottom-width: 1px;

                border-left-width: 1px;

                border-top-style: none;

                border-right-style: solid;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #FFF;

                border-right-color: #FFF;

                border-bottom-color: #FFF;

                border-left-color: #FFF;

                padding-top: 4px;

                padding-bottom: 4px;

}

 

 

td.names {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                font-weight: bold;

                color: #036;

                border-right-width: 2px;

                border-right-style: solid;

                border-right-color: #FFF;

                margin: 0px;

                padding-top: 0px;

                padding-right: 2px;

                padding-bottom: 0px;

                padding-left: 8px;

                width: 150px;

 

}

td.sizedata, td.locationdata, td.techdata {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                color: #000;

                border-right-width: 2px;

                border-left-width: 2px;

                border-right-style: solid;

                border-left-style: none;

                border-right-color: #FFF;

                border-left-color: #FFF;

                text-align: center;

}

td.featuresdata {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                color: #000;

                border-right-width: 2px;

                border-left-width: 2px;

                border-right-style: solid;

                border-left-style: none;

                border-right-color: #FFF;

                border-left-color: #FFF;

                text-align: left;

}

 

.features {

                margin: 0px;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 14px;

                font-size: 12px;

}

td.chart_td {

                padding-top: 4px;

                padding-right: 2px;

                padding-bottom: 4px;

                padding-left: 2px;

                border-bottom-width: 4px;

                border-bottom-style: solid;

                border-bottom-color: #FFF;

                border-top-width: 2px;

                border-top-style: solid;

                border-top-color: #CCC;

}

#alternativesgrid a {

                color: #036;

                text-decoration: none;

                font-weight: bold;

}

#alternativesgrid {

}

.costs {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 14px;

                width: 100%;

                padding: 4px;

                margin-bottom: 8px;

}

.costs h2 {

                font-size: 18px;

                line-height: 18px;

                margin: 0px;

                padding: 0px;

}

.names a img {

}

.key {

                font-size: 11px;

                margin-bottom: 0px;

                padding-bottom: 0px;

}

.key p {

                margin-bottom: 4px;

                line-height: 12px;

                padding: 4px;

                margin-top: 0px;

}

chart_span {

                background-color: #FFF;

}

#Span1 {

}

#alternativesgrid {

                background-color: #D9E6FF;

}

 

#costsgrid {

                background-color: #D7E4BC;

}

 

#telepresencecostsgrid {

                background-color: #D7E4BC;

}

</style>

 

 

 

 

 

<script type="text/javascript">

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

    $(window).load(function() {

        var soapEnv =

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

                <soapenv:Body> \

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

                        <listName>Alternatives to Travel</listName> \

                        <viewFields> \

                            <ViewFields> \

                              <FieldRef Name='Title' /> \

                              <FieldRef Name='In_x0020_all_x0020_Kraft_x0020_L' /> \

                              <FieldRef Name='Audience_x0020_Size' /> \

                              <FieldRef Name='Best_x0020_for' /> \

                              <FieldRef Name='Features_x0020_and_x0020_Benefit' /> \

                              <FieldRef Name='Main_x0020_Image' /> \

                              <FieldRef Name='Rollover_x0020_Image' /> \

                              <FieldRef Name='Rollover_x0020_Text' /> \

                              <FieldRef Name='Target_x0020_Page' /> \

 <FieldRef Name='Rollover_x0020_text_x0020_for_x0' /> \

<FieldRef Name='Rollover_x0020_text_x0020_for_x00' /> \

<FieldRef Name='Target_x0020_Page_x0020_for_x002' /> \

<FieldRef Name='Target_x0020_Page_x0020_for_x0020' /> \

</ViewFields> \

                        </viewFields> \

                    </GetListItems> \

                </soapenv:Body> \

            </soapenv:Envelope>";

 

 

//alert("Soap = " + soapEnv);

        $.ajax({

            url: "http://intranet.na.kraft.com/sites/TC/plantrip/_vti_bin/lists.asmx",

            type: "POST",

            dataType: "xml",

            data: soapEnv,

            complete: buildAltToTravelChart,

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

        });

    });

 

function buildAltToTravelChart(xData, status) {

var altTravelTitle, allKraftLoc;

var targetPageValue, targetPage;

var mainImageURLValue, mainImageURL;

var rolloverText, rolloverImageURLValue, rolloverImageURL;

var toolsColTag;

var audSizeColTag, krftLocColTag, bestForColTag, ftrBnftColTag;

var spnID;

var audSizeRolloverText, locRolloverText;

var audSizeTargetPageValue, audSizeTargetPage;

var locTargetPageValue, locTargetPage;

var itemCount;

 

 

//Construct the Column tag classes here

toolsColTag = "names chart_td";

audSizeColTag = "sizedata chart_td";

krftLocColTag = "locationdata chart_td";

bestForColTag = "techdata chart_td";

ftrBnftColTag = "featuresdata chart_td";

 

     //Get a handle to the SPAN tag

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

 

 

//alert("here");

//alert(xData.responseXML.xml);

 

//Check if a SoapServerException has occurred

//This could occur if the List is missing/deleted

//The Response XML will contain the SoapServerException

//If SoapServerException is found, IndexOf returns an integer

//IndexOf returns -1 if SoapServerException is not found.

 

//var strErrorCheck = xData.responseXML.xml;

//alert ("strErrorCheck = " + strErrorCheck);

//var posErrStr = strErrorCheck.indexOf("SoapServerException");

 

//if (posErrStr >= 0)

//{

       //alert ("A Soap Exception has occurred"); 

 

 

      //Display a table with a message indicating that

      //Alternatives to Travel SharePoint List NOT found in the Site

      //Display an appropriate error message

      //Start constructing No List Table HTML here

  //var noListTableHtml = "";

  //noListTableHtml += "<TABLE WIDTH=100% border=0>";

  //noListTableHtml += "<TBODY>";

  //noListTableHtml += "<TR>";

  //noListTableHtml += "<TD><SPAN class=ms-rteCustom-Kraft_Major_Headline><FONT

size=2>&nbsp;<FONT color=#ff0000>Alternatives to Travel SharePoint List not found! Please contact

the Site Administrator.</FONT></FONT></SPAN></TD>"

  //noListTableHtml += "</TR></TBODY></TABLE>";

 

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

     //spnElement.innerHTML = noListTableHtml ; 

 

//}

 

//else //returning -1; No Soap Exception

//{

  //alert("No Soap Exception");

  

  //Get the Item Count here

  $(xData.responseXML).find("[nodeName=rs:data]").each(function() {

     itemCount = $(this).attr("ItemCount");

     //alert("Total Number of Items = " + itemCount); 

   });

 

    

   

    //If Item Count is 0 display an error message to user

    //Alt To Travels not found

    //Have user fill it out by providing a link to SharePoint List

     if (itemCount == "0")

 

     {

 

      //alert ("No Tools defined in SharePoint List");

      //Display a table with a message indicating that

      //Alt To Travel tools have NOT been defined in the SharePoint List

  //Provide a link to the SharePoint List here

  //Start constructing table HTML here

  var noToolsTableHtml = "";

  noToolsTableHtml += "<TABLE WIDTH=100% border=0>";

  noToolsTableHtml += "<TBODY>";

  noToolsTableHtml += "<TR>";

  noToolsTableHtml += "<TD><SPAN class=ms-rteCustom-Kraft_Major_Headline><FONT size=2>&nbsp;<FONT

color=#ff0000>Alternatives to Travel tools not found!</FONT></FONT></SPAN></TD>"

  noToolsTableHtml += "</TR>";

  noToolsTableHtml += "<TR>";

  noToolsTableHtml += "<TD>&nbsp;Please click on the link below to define the Alternatives to

Travel tools in the SharePoint List.</TD>";

  noToolsTableHtml += "</TR>";

  noToolsTableHtml += "<TR>";

  noToolsTableHtml += "<TD><A

href='http://intranet.na.kraft.com/sites/TC/plantrip/Lists/Alternatives%20to%20Travel/AllItems.as

px'>&nbsp;<STRONG><U><FONT color=#0000ff>Define Alternatives to Travel

tools</FONT></U></STRONG></A></TD>";

   noToolsTableHtml += "</TR></TBODY></TABLE>";

 

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

     spnElement.innerHTML = noToolsTableHtml; 

 

} //ending brace for (if itemCount == 0)

 

else //Item Count is greater than 0; render the Alt To Travel chart

 

{

 

     //Start constructing the rollover text HTML here

     //This HTML will contain the text that will be used for mouseover events  

      //Get a handle to the SPAN tag

      var spnRollover= document.getElementById("spnRollover");

     //alert("Current Rollover text = " + spnRollover.innerHTML);

     var spnHtml = spnRollover.innerHTML;

 

    //Append style to not display the rollover text at bottom of page

    spnHtml += "<DIV style=display:none>";

   

 

   //Start constructing chart table HTML here

    var tableHtml = "";

 

   //Render Alternatives to Travel table here

    tableHtml += "<TABLE id='alternativesgrid' border='1' cellspacing='0' cellpadding='1'>";

      

   

    //Construct Top column header here

    tableHtml += "<TBODY><TR><TH class=chart_th>Collaboration Tools </TH><TH

class=chart_th><P>Audience Size</P></TH><TH class=chart_th>Locations</TH><TH class=chart_th

width='20%'>Best for...</TH><TH class=chart_th width='40%'>Features and

Benefits</TH></TR><TBODY><TR>";

 

 

//Loop through the result set returned in the SOAP

//envelope courtesy of the SharePoint Lists Web Service

$(xData.responseXML).find("[nodeName=z:row]").each(function() {

   

    //alert("here");

   

    //Get the title of the Collab Tool

    altTravelTitle = $(this).attr("ows_Title"); 

 

     //Get Audience Size supported by this Tool

     audSize = $(this).attr("ows_Audience_x0020_Size");

 

     //Check if Audience Size column is blank in SharePoint List

     //If true, display a message in the column

     if (typeof audSize == 'undefined')

     {

        audSize = "Audience Size for this tool must be defined in the SharePoint List.";  

      }

   

    //Get Is Tool available in all Kraft locations

    allKraftLoc = $(this).attr("ows_In_x0020_all_x0020_Kraft_x0020_L"); 

 

      //Check if Tool availability column is blank in SharePoint List

     //If true, display a message in the column

     if (typeof allKraftLoc == 'undefined')

     {

        allKraftLoc = "Availability info for this tool must be defined in the SharePoint List."; 

 

      }

 

   //Get Best for...

   bestFor = $(this).attr("ows_Best_x0020_for");  

 

   //Check if Best For... column is blank in SharePoint List

   //If true, display a message in the column

   if (typeof(bestFor) == 'undefined')

   {

       bestFor = "Best For... text for this tool must be defined in the SharePoint List.";  

   }

          

  //Get Features and Benefits

  ftrBnft = $(this).attr("ows_Features_x0020_and_x0020_Benefit");

 

   //Check if Features and Benefits column is blank in SharePoint List

   //If true, display a message in the column

 

   if (typeof ftrBnft == 'undefined')

   {

       ftrBnft = "<ul>";

       ftrBnft += "<li>Features and Benefits text for this tool must be defined in the SharePoint

List.</li>";

       ftrBnft += "</ul>";

  

   }

 

   //Get Main Image URL Value. This is a comma separated value

   mainImageURLValue = $(this).attr("ows_Main_x0020_Image"); 

 

   //Check if Main Image URL is missing

   //If true, display a generic Image Not Found image

    if (typeof(mainImageURLValue) == 'undefined')

 

    {

        //alert("No Main Image");

        mainImageURLValue =

"http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/noimage.jpg,http://intranet.na.k

raft.com/sites/TC/Travel%20Central%20Images/noimage.jpg";

    }

 

   //Split the Main Image URL Value at the comma separator

   mainImageURL= mainImageURLValue.split(",");

 

    //Get Rollover Image URL Value. This is a comma separated value

   rolloverImageURLValue = $(this).attr("ows_Rollover_x0020_Image"); 

 

 

      //Check if Rollover Image URL is missing

   //If true, display a generic Image Not Found image

    if (typeof(rolloverImageURLValue) == 'undefined')

 

    {

        //alert("No Rollover Image");

        rolloverImageURLValue =

"http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/noimage.jpg,http://intranet.na.k

raft.com/sites/TC/Travel%20Central%20Images/noimage.jpg";

    }

 

 

   //Split the Rollover Image URL Value at the comma separator

   rolloverImageURL = rolloverImageURLValue.split(",");

 

 

    //Get the Rollover text for the Tool

    rolloverText = $(this).attr("ows_Rollover_x0020_Text"); 

 

   //Check if Rollover text column is blank in SharePoint List

   //If true, display a message in the rollover

 

   if (typeof rolloverText == 'undefined')

   {

       rolloverText = "<B>Rollover Text not found</B><BR>";

       rolloverText += "Rollover text for this tool must be defined in the SharePoint List.";  

   }

 

    //Get the Target page to link to when user clicks on the Tool

    targetPageValue = $(this).attr("ows_Target_x0020_Page");

 

    //Check if Target page value is blank

    //If true, then set the Target page to the current page

     if (typeof(targetPageValue) == 'undefined')

 

    {

         targetPageValue = "#,#"; 

    }  

 

   //Split the Target Page URL Value at the comma separator

   targetPage = targetPageValue.split(",");

 

 

    //Get the Target page to link to when user clicks on the Audience Size link

    audSizeTargetPageValue = $(this).attr("ows_Target_x0020_Page_x0020_for_x0020"); 

 

 

    //Check if Audience Size Target page value is blank

    //If true, then set the Target page to the current page

     if (typeof(audSizeTargetPageValue) == 'undefined')

    {

         audSizeTargetPageValue = "#,#"; 

    }  

 

   //Split the Target Page URL Value at the comma separator

   audSizeTargetPage = audSizeTargetPageValue.split(",");

 

    //Get the Rollover text for the Audience Size column

    audSizeRolloverText = $(this).attr("ows_Rollover_x0020_text_x0020_for_x00"); 

 

 

   //Check if Rollover text column for Audience Size

   //is blank in SharePoint List

   //If true, display a message in the rollover

 

   //if (typeof audSizeRolloverText == 'undefined')

   //{

     //  audSizeRolloverText = "<B>Rollover Text not found</B><BR>";

     //  audSizeRolloverText += "Rollover text for Audience size for this tool must be defined in

the SharePoint List.";  

   //}

 

 

   //Get the Target page to link to when user clicks on the Locations link

    locTargetPageValue= $(this).attr("ows_Target_x0020_Page_x0020_for_x002"); 

 

    //Check if Kraft Locations Target page value is blank

    //If true, then set the Target page to the current page

     if (typeof(locTargetPageValue) == 'undefined')

 

    {

         locTargetPageValue = "#,#"; 

    }  

 

   //Split the Target Page URL Value at the comma separator

   locTargetPage= locTargetPageValue.split(",");

 

   if (allKraftLoc == "All")

   {

     locTargetPage[0] = "#";

   }

 

 

    //Get the Rollover text for the Locations column

    locRolloverText = $(this).attr("ows_Rollover_x0020_text_x0020_for_x0"); 

 

 

   //Check if Rollover text column for Locations

   //is blank in SharePoint List

   //If true, display a message in the rollover

 

   if (typeof locRolloverText == 'undefined')

   {

       locRolloverText = "<B>Rollover Text not found</B><BR>";

       locRolloverText += "Rollover text for Kraft locations availability for this tool must be

defined in the SharePoint List.";  

   }

 

        

     //alert("Title = " + altTravelTitle);

     //alert("In All Kraft locations = " + allKraftLoc);

     //alert("Main Image URL = " + mainImageURL[0]);

     //alert("Rollover text = " + rolloverText);

     //alert("Target Page = " + targetPage);

    

    //Render Begin Row tag

     tableHtml += "<TR>";

 

         

     //Create SPAN id tag based on Tool title

     //Remove spaces if any in the title

     //This is the ID of the SPAN tag for the rollover text/image

     spnID = altTravelTitle.split(' ').join('');

 

     //alert("Span ID = " + spnID);

    

     //Render Collab Tools column

     //If Target Page is blank in the List, then display an alert

     //when user clicks on the link

     if(targetPage[0] == "#")

 

     {

     tableHtml += "<TD class='" + toolsColTag + "'>";

     tableHtml += "<A onmouseover=TagToTip('" ;

     tableHtml += spnID + "') onmouseout='UnTip()' onclick='NoTargetPage()' ";

     tableHtml += "href='" + targetPage[0] + "'>";

     tableHtml += "<IMG align=middle width=116 height=65 border=0 src='";

 

     }

 

     else

 

     {

 

 

     tableHtml += "<TD class='" + toolsColTag + "'>";

     tableHtml += "<A onmouseover=TagToTip('" ;

     tableHtml += spnID + "') onmouseout='UnTip()'";

     tableHtml += "href='" + targetPage[0] + "' target=_blank>";

     tableHtml += "<IMG align=middle width=116 height=65 border=0 src='";

 

      }

 

     //Render Tool main image here

     tableHtml += mainImageURL[0] + "'><BR>";

//     tableHtml += altTravelTitle + "</A></TD>";

tableHtml += "<U><FONT color=#0000ff>" + altTravelTitle + "</FONT></U></A></TD>";

 

 

 

   //Check if Rollover text column for Audience Size

   //is blank in SharePoint List

   //If true, don't display rollover, just display the Audience Size value

 

  //alert("Aud Size Rollover text = " + audSizeRolloverText);

   if ((typeof audSizeRolloverText == 'undefined') || (audSizeRolloverText == '<p>&nbsp;</p>') ||

(audSizeRolloverText == '<div>&nbsp;</div>'))

   {

 

    //tableHtml += "<TD>" + audSize + "</TD>";

    tableHtml += "<TD class='" + audSizeColTag + "'>";

    tableHtml += "<STRONG>" + audSize + "</STRONG></TD>";

 

   }

 

   else  //Render Audience Size column with rollover text

 

  {

    tableHtml += "<TD class='" + audSizeColTag + "'>";

    tableHtml += "<A onmouseover=TagToTip('" ;

    tableHtml += spnID + "Size" + "') onmouseout='UnTip()'";

    tableHtml += "href='#'>"

    //tableHtml += audSize + "</TD>";

    tableHtml += "<FONT color=#0000ff>" + audSize + "</FONT></TD>";

 

  }

 

 

//Render Location column

//If Location is All, then don't render hyperlink

    

   if (allKraftLoc == "All")

 

   {

     tableHtml += "<TD class='" + krftLocColTag + "'>";

     tableHtml += "<A onmouseover=TagToTip('" ;

     tableHtml += spnID + "Loc" + "') onmouseout='UnTip()'";

     tableHtml += "href='#'>"

     tableHtml += allKraftLoc + "</TD>";

   }

 

else

 

   {

 

     if(locTargetPage[0] == "#")

 

 

    {

 

      //If Target Page is blank in the List, then display an alert

      //when user clicks on the link

     tableHtml += "<TD class='" + krftLocColTag + "'>";

     tableHtml += "<A onmouseover=TagToTip('" ;

     tableHtml += spnID + "Loc" + "') onmouseout='UnTip()' onclick='NoTargetPage()' ";

     tableHtml += "href='" + locTargetPage[0] + "'>";

     tableHtml += "<U><FONT color=#0000ff>" + allKraftLoc + "</FONT></U></TD>";

   }

 

   else //locTargetPage[0] is NOT #

 

   {

      tableHtml += "<TD class='" + krftLocColTag + "'>";

     tableHtml += "<A onmouseover=TagToTip('" ;

     tableHtml += spnID + "Loc" + "') onmouseout='UnTip()'";

     tableHtml += "href='" + locTargetPage[0] + "' target=_blank>";

     tableHtml += "<U><FONT color=#0000ff>" + allKraftLoc + "</FONT></U></TD>";

 

 

 

   }

 

}

     //Render Best for... column

     tableHtml += "<TD class='" + bestForColTag + "'>";

     tableHtml += bestFor + "</TD>";

 

     //Render Features and Benefits column

     tableHtml += "<TD class='" + ftrBnftColTag + "'>";

     tableHtml += ftrBnft + "</TD>";

 

     //Render Closing Row tag

     tableHtml += "</TR>";

 

    //Populate Tool column rollover text and image in SPAN tag and

    //append to existing SPAN tag

    spnHtml += "<SPAN id=" + spnID + ">";

    spnHtml += "<IMG height=128 width=225 hspace=8 vspace=4 align=right src='";

    spnHtml += rolloverImageURL[0] + "'>";

    spnHtml += "<P><STRONG>" + altTravelTitle + "</STRONG></P>";

    spnHtml += "<P>" + rolloverText + "</P>";

    spnHtml += "<P>Click your mouse for more " + altTravelTitle + " information. </P></SPAN>";

    //alert("Span HTML = " + spnHtml);

 

 

 

    //Populate Audience Size column rollover text in SPAN tag

    //append to existing SPAN tag

    //Create SPAN tag only if Audience Size rollover text is not blank

 

   if ((typeof audSizeRolloverText != 'undefined') || (audSizeRolloverText != '<p>&nbsp;</p>') ||

(audSizeRolloverText != '<div>&nbsp;</div>'))

 

  {

 

    spnHtml += "<SPAN id=" + spnID + "Size" + ">";

    spnHtml += "<P>" + audSizeRolloverText + "</P>";

    spnHtml += "</SPAN>";

  }   

 

    //Populate Locations column rollover text in SPAN tag

    //append to existing SPAN tag

    //If Location is All, don't show "click your mouse" text in rollover

   if (allKraftLoc == "All")

   {

     spnHtml += "<SPAN id=" + spnID + "Loc" + ">";

     spnHtml += "<P>" + locRolloverText + "</P>";

     spnHtml += "</SPAN>";    

   }

  else //Show "click your mouse" text in rollover

   {

    spnHtml += "<SPAN id=" + spnID + "Loc" + ">";

    spnHtml += "<P>" + locRolloverText + "</P>";

    spnHtml += "<P>Click your mouse for more information. </P></SPAN>";

   }   

 

 

}); //closing for jQuery for loop

 

     //Render closing Table Body and Table tags

     tableHtml += "</TBODY></TABLE>";

 

    //Close the <DIV> tag

    //Append the SPAN HTML to the existing span tag

    //This will contain the rollover text/images

    spnHtml += "</DIV>";

 

 

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

     spnElement.innerHTML = tableHtml ;

 

    //Construct the static HTML related to Audience size

    spnHtml += "<DIV class=key><P><STRONG>Location Availability:</STRONG><STRONG><i>

Limited</i></STRONG> - few to several locations; <STRONG><i>Moderate</i></STRONG> - many

locations; <STRONG><i>All </i></STRONG> - available to everyone at Kraft locations</P></DIV>";

 

    //Assign the Rollover text/image to the span tag

    spnRollover.innerHTML = spnHtml;

 

} //closing brace for (itemCount == 0) if statement   

 

//} //closing brace for SoapException if statement

 

} //closing brace for function

 

function NoTargetPage()

 

{

   alert("Target Page not defined. Please define a target Page in the Alternatives to Travel

SharePoint List.");

}

 

 

</script>

 

<span id="spnChart"></span>

<span id="spnRollover"></span>