The blue tabbed navigation that fills the page. Is that a jquery plugin or..?
Announcement
Collapse
No announcement yet.
Can someone tell me what plugin is being used on this website?
Collapse
X
-
It looks to be jquery using a custom plugin they are calling "quicktour":
Learn how KeyBank can help you become financially fit with articles, tips, and tools. Begin your journey today.
Code:/** * Quick Tour functions and controls * Copyright (c) 2011 KILO - admin(at)kilohq(dot)com | http:kilohq.com * v1.0 - 01/2011 * @project HelloWallet * @author Martin Olson/John Peacock * */ $(document).ready(function(){var sections=$('#quicktour .panel');var panels=$('.panel-info');var tabnav=$('#tour-tabs .tabinfo');var selectedTab;var selectedPanel;var colorOpts=[];tabnav.css({'marginTop':'10px'});panels.hide();sections.hide().filter(':first').show().children('.panel-info').fadeIn();if(!$('#quicktour').hasClass('nodefault')){}else{var obj=tabnav.filter(':first');togglePanels(obj,0);} tabnav.mouseenter(function(){$(this).css({'cursor':'pointer'});var index=$(this).index();togglePanels($(this),index);}) var icons=$('#panelview-grid .col');icons.children('.col-icon').children('.iconimg').css({'marginTop':'10px'}) icons.hover(function(){$(this).css({'cursor':'pointer'});$(this).children('.col-icon').children('.iconshadow').stop(true,true);$(this).children('.col-icon').children('.iconimg').stop(true,true);$(this).children('.col-icon').children('.iconshadow').fadeTo(250,0.4);$(this).children('.col-icon').children('.iconimg').animate({marginTop:'0'},250);},function(){$(this).children('.col-icon').children('.iconshadow').fadeTo(250,1.0);$(this).children('.col-icon').children('.iconimg').animate({marginTop:'10px'},250);}) icons.click(function(e){e.preventDefault();if($(this).hasClass('iframe')){var url=$(this).find('h3').children('a').attr('href');$.fancybox({'href':url,'width':500,'height':400,'autoScale':false,'padding':15,'type':'iframe'});}else{var images=[];var links=$(this).find('a').map(function(){return $(this).attr('href');}).get();var captions=$(this).find('a').map(function(){return $(this).attr('title');}).get();for(var i=0;i<links.length;i++){images.push({href:links[i],title:captions[i]});} $.fancybox(images,{'padding':0,'transitionIn':'none','transitionOut':'none','type':'image','showNavArrows':true,'changeFade':0,'titlePosition':'over'});}});function formatTitle(title,currentArray,currentIndex,currentOpts){return'<div>'+(title&&title.length?'<b>'+title+'</b>':'')+'Image '+(currentIndex+1)+' of '+currentArray.length+'</div>';} function resetTabs(n){if(!$('#quicktour').hasClass('nodefault')){var colorOpts=['#1EB0DB','#0065AB','#87D0E4','#00AFF2']}else{var colorOpts=['#94e1fe','#1EB0DB','#0065AB','#00AFF2']} tabnav.each(function(){if(!$(this).hasClass('active')){$(this).stop(true,true);$(this).css({'background-color':colorOpts[n]});$(this).animate({marginTop:'10px',opacity:.5,filter:'alpha(opacity=50)'},250);}else{$(this).css({'background-color':colorOpts[n]});$(this).animate({marginTop:'0',opacity:1,filter:'alpha(opacity=100)'},250);}});} function togglePanels(obj,num){selectedTab=obj.attr('id');selectedPanel=selectedTab.replace('tab-','panel-');selectedTab=$('#'+selectedTab);selectedPanel=$('#'+selectedPanel);if(!selectedTab.hasClass('active')){sections.hide();panels.hide();tabnav.removeClass('active');selectedTab.addClass('active');resetTabs(num);selectedPanel.show();showPanelContent(selectedPanel);}} function showPanelContent(obj){obj.children('.panel-info').fadeIn('slow').css('filter','');;}});
You might contact them about the script if you have an interest...The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
See Mediocrity in its Infancy
It's usually a good idea to start out with this at the VERY TOP of your CSS:* {border:0;margin:0;padding:0;}
Seek and you shall find... basically: validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting
-
👍 1
-
Comment