jQuery Forum

var jq164 = jQuery.noConflict(true);

/*

 * FeatureList - simple and easy creation of an interactive "Featured Items" widget

 * Examples and documentation at: http://jqueryglobe.com/article/feature_list/

 * Version: 1.0.0 (01/09/2009)

 *          2.0.0 (18/09/2011)  Expanded for UL GlobalfeatureSpot

 *

 * Copyright (c) 2009 jQueryGlobe

 * Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License

 * Requires: jQuery v1.3+

*/

;(function($) {

$.fn.globalfeaturespot = function(options) {

var $this = $(this);

var options = options || {};

$.buildMarkup(options, $this);

};

$.initGAnalytics = function(container) {

container.find(".feature_list a").live("click", function() {

  _gaq.push(['_trackEvent','Global Feature Spot','click', $(this).attr('title')]);

});

}

$.ie6Fix = function(options, container) {

if (navigator.userAgent.indexOf("MSIE 6") != -1 ||

navigator.userAgent.indexOf("MSIE 7") != -1 ||

navigator.userAgent.indexOf("MSIE 8") != -1) {

container.find("ul.output li span").hover(

function() {

if (options.style) { $(this).css("cssText", "background:" + options.style.tab_bg_colour_hover + " !important;color:" + options.style.tab_text_colour_hover + " !important;cursor:pointer"); } 

else { $(this).css("cssText", "background:#EFEFEF !important;color:#000000 !important;cursor:pointer"); }

},

function() {

if (options.style) { $(this).css("cssText", "background:" + options.style.tab_bg_colour + " !important;color:" + options.style.tab_text_colour + " !important;"); } 

else { $(this).css("cssText", "background:#871BCC !important;color:#FFFFFF !important;cursor:pointer"); }

}

);

};

}

$.isMobile = function() {

//show light version to mobile devices

return (

(navigator.platform.indexOf("iPhone") != -1) ||

(navigator.platform.indexOf("iPod") != -1) ||

(navigator.platform.indexOf("iPad") != -1) ||

(navigator.platform.indexOf("blackberry") != -1) ||

(navigator.platform.indexOf("BlackBerry") != -1) ||

(navigator.platform.indexOf("RIM") != -1) ||

(navigator.platform.indexOf("Tablet") != -1) ||

(navigator.platform.indexOf("mobile") != -1) ||

(navigator.platform.indexOf("windows ce") != -1) ||

(navigator.platform.indexOf("opera mini") != -1) ||

(navigator.platform.indexOf("palm") != -1)

);

}

$.animate = function(options, container) {

var tabs = container.find(".tabs li a");

var output = container.find(".output li");

output.parent().addClass('animated-version');

new $.globalfeaturespot(container, tabs, output, options);

}

$.fn.cssImportant = function(prop, val) {

var $this = $(this);

var temp = $this.css("cssText") + ";" + prop + ":" + val + " !important";

$this.css("cssText", temp);

}

$.applyCss = function(options, container) {

if (options.style) { 

if (options.apply_current) {

container.find("ul.tabs li a").cssImportant("background", options.style.tab_bg_colour); 

container.find("ul.tabs li a h3").cssImportant("color", options.style.tab_text_colour);

container.find("ul.output li span").css("cssText", "background:" + options.style.tab_bg_colour + " !important;color:" + options.style.tab_text_colour + " !important;"); 

container.find("ul.tabs li.current a").cssImportant("background", options.style.tab_bg_colour_hover); 

container.find("ul.tabs li.current a h3").cssImportant("color", options.style.tab_text_colour_hover); 

if (options.style.tab_arrow_imgs) {

container.find("ul.tabs li a h3").cssImportant("background-image", "none");

container.find(".left ul.tabs li.current a h3").cssImportant("background-image", options.style.tab_arrow_imgs.tab_arrow_right);

container.find(".right ul.tabs li.current a h3").cssImportant("background-image", options.style.tab_arrow_imgs.tab_arrow_left);

container.find(".top ul.tabs li.current a h3").cssImportant("background-image", options.style.tab_arrow_imgs.tab_arrow_down);

container.find(".bottom ul.tabs li.current a h3").cssImportant("background-image", options.style.tab_arrow_imgs.tab_arrow_up);

}

if (options.style.tab_border) { container.find("ul.tabs li a").css("border-bottom", "1px solid #FFFFFF"); }

} else {

container.find("ul.tabs li a").hover(

function() { 

$(this).cssImportant("background", options.style.tab_bg_colour_hover); 

$(this).find("h3").cssImportant("color", options.style.tab_text_colour_hover);

if (options.style.tab_border) { container.find("ul.tabs li a").css("border-bottom", "1px solid #FFFFFF"); }

}, 

function() { 

if (!$(this).parent().hasClass("current")) {

$(this).cssImportant("background", options.style.tab_bg_colour); 

$(this).find("h3").cssImportant("color", options.style.tab_text_colour);

if (options.style.tab_border) { container.find("ul.tabs li a").css("border-bottom", "1px solid #FFFFFF"); }

}

}

);

container.find("ul.output li span").hover(

function() { 

$(this).css("cssText", "background:" + options.style.tab_bg_colour_hover + " !important;color:" + options.style.tab_text_colour_hover + " !important;"); 

if (options.style.tab_border) { container.find("ul.tabs li a").css("border-bottom", "1px solid #FFFFFF"); }

}, 

function() { 

if (!$(this).parent().hasClass("current")) {

$(this).css("cssText", "background:" + options.style.tab_bg_colour + " !important;color:" + options.style.tab_text_colour + " !important;"); 

if (options.style.tab_border) { container.find("ul.tabs li a").css("border-bottom", "1px solid #FFFFFF"); }

}

}

);

}

}

}

$.buildMarkup = function(options, container) {

$featureList = container.find("div.feature_list")

$featureList.addClass(options.orientation || "left");

$featureList.find(".tabs").addClass("item-count-" + (options.num_tabs || "4"));

$featureList.find(".tabs, .output").hide();

$.ajax({

type: "GET",

url: options.baseListUrl,

dataType: "xml",

data: {

List: options.listId || "",

View: options.listViewId || ""

 },

success: function(xml) {

var $xml = $(xml);

var sortedArr = [];

sortedArr = $xml.find("[nodeName=z\\:row]");

if (sortedArr.length > 0) {

sortedArr.sort(function(a,b){

var aOrder = $(a).attr("ows_Tab_x0020_Order");

var bOrder = $(b).attr("ows_Tab_x0020_Order");

var diff = aOrder - bOrder

// sort items with same tab order on title

if (diff == 0) {

var aTitleOrder = $(a).attr("ows_LinkTitle");

var bTitleOrder = $(b).attr("ows_LinkTitle");

diff = aTitleOrder <= bTitleOrder ? -1 : 1;

}

return diff

});

var count = 1;

sortedArr.each(function(){

if (count <= (options.num_tabs || 4)) {

var isActive = $(this).attr("ows_Active");

if (isActive == 1) {

var tabOrder = $(this).attr("ows_Tab_x0020_Order");

if (tabOrder == count) {

var linkStr = $(this).attr("ows_Link");

var imageStr = $(this).attr("ows_Image");

var newWin = $(this).attr("ows_NewWindow");

var linkTitle = $(this).attr("ows_LinkTitle");

var linkArr = linkStr.split(', ');

var imageArr = imageStr.split(', ');

var newWinStr = "";

if (newWin == 1) { newWinStr = "target='_blank'"; }

var classStr = "";

if (tabOrder == 1) { classStr = "first" }

$.addTab(container, linkArr[1], linkArr[0], newWinStr, classStr);

$.addImage(container, linkTitle, imageArr[0], linkArr[0], newWinStr);

count = count + 1;

}

}

}

});

}

// delay till append'ed elements are loaded, no callback available so...

setTimeout(

 function() 

 {

$.applyCss(options, container);

if ($.isMobile()){

container.find(".output li").first().show();

var $switcher = container.find(".switcher").show();

$switcher.find(".full").click(function() { 

$(this).addClass("active");

$switcher.find(".light").removeClass("active");

$.animate(options, container); 

});

$switcher.find(".light").click(function() { 

container.find(".tabs, .output").html("").removeClass("animated-version");

$(this).addClass("active");

$switcher.find(".full").removeClass("active");

container.globalfeaturespot(options);

});

}

else{

$.animate(options, container);

}

container.find(".tabs, .output").show();

$.ie6Fix(options, container);

$.initGAnalytics(container);

return this;

}, $.isMobile() ? 3000 : 1000);

}

});

}

$.addTab = function(container, title, link, newWinStr, classStr) {

container.find("ul.tabs").append("<li class='" + classStr + "'><a href='" + link + "' title='" + title + "'" + newWinStr + "><h3>" + title + "</h3></a></li>");

}

$.addImage = function(container, text, imgPath, link, newWinStr) {

container.find("ul.output").append("<li><a href='" + link + "' title='" + text + "'" + newWinStr + "><img src='" + imgPath + "'/><span>" + text + "</span></a></li>");

}

$.globalfeaturespot = function(container, tabs, output, options) {

var opts = $.extend({}, options, {apply_current : true});

function slide(nr) {

if (typeof nr == "undefined") {

nr = visible_item + 1;

nr = nr >= total_items ? 0 : nr;

}

tabs.parent().removeClass('current').filter(":eq(" + nr + ")").addClass('current');

$.applyCss(opts, container);

output.stop(true, true).filter(":visible").fadeOut();

output.filter(":eq(" + nr + ")").fadeIn(function() {

visible_item = nr;

});

}

var total_items = tabs.length;

var visible_item = options.start_tab || 0;

if (visible_item > 0) { visible_item = visible_item - 1; }

options.pause_on_hover = options.pause_on_hover || true;

options.transition_interval = options.transition_interval || 1000;

output.hide().eq( visible_item ).show();

tabs.parent().eq( visible_item ).addClass('current');

$.applyCss(opts, container);

tabs.hover(function() {

if (!$(this).parent().hasClass('current')) {

slide( tabs.index( this) );

}

}, function(){});

tabs.click(function() {

if ($(this).parent().hasClass('current')) {

return true;

}

slide( tabs.index( this) );

return false;

});

if (options.transition_interval > 0) {

var timer = setInterval(function () {

slide();

}, options.transition_interval);

if (options.pause_on_hover) {

tabs.mouseenter(function() {

clearInterval( timer );

}).mouseleave(function() {

clearInterval( timer );

timer = setInterval(function () {

slide();

}, options.transition_interval);

});

}

}

};

})(jq164);