Skip to content

Instantly share code, notes, and snippets.

@Grawl
Created October 3, 2014 05:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Grawl/2ee642d4a7bee55a865a to your computer and use it in GitHub Desktop.
Save Grawl/2ee642d4a7bee55a865a to your computer and use it in GitHub Desktop.
Zurb Foundation Tabs addon to change tab pairs with hover
# Function to preview tabs content on navigation element hover and return to selected (clicked or predefined) tab on mouseout from navigation container
# Attach it to tabs navigation container and content container elements
tabs_hover_change=(navigation, content)->
# Get string from Foundation settings
tabs_class_active=Foundation.libs.tab.settings.active_class
# Assign tabs objects
tabs_navigation=navigation
tabs_content=content
tab_title_class='.tab-title'
# Function to get tab ID based on anchor href as interaction element
tab_get_id=(el)->
return el.find('a')
.attr 'href'
.substring 1
# Set initially selected tab to return
tab_selected=tabs_navigation.find '.'+tabs_class_active
tab_selected_id=tab_get_id tab_selected
# Do not run this on touch device
if not Modernizr.touch
# Function to select one tab based on chosen ID
tab_select=(id)->
$ '[href=#'+id+']'
.closest tab_title_class
.addClass tabs_class_active
.siblings().removeClass tabs_class_active
tabs_content
.find '#'+id
.addClass tabs_class_active
.siblings().removeClass tabs_class_active
# Set triggers
tab_title=tabs_navigation.find tab_title_class
tab_title
.mouseover ->
# Select tab on hover
tab_select tab_get_id $(this)
return
.click ->
# Set the point of return to clicked tab
tab_selected_id=tab_get_id $(this)
tab_select tab_selected_id
return
# Return to chosen tab when user is going to do something else
tabs_navigation
.mouseout ->
tab_select tab_selected_id
return
# Apply hover to '~floors-navigation`+`~floors-content` tabs pair
floor_class_prefix='.building-wireframe-floors'
floor_navigation=$ floor_class_prefix+'-navigation'
floor_content=$ floor_class_prefix+'-content'
tabs_hover_change floor_navigation, floor_content
# Apply hover to '.apartments-navigation`+`.apartments-content` tabs pair
apartments_prefix='.apartments'
apartments_navigation=$ apartments_prefix+'-navigation'
apartments_content=$ apartments_prefix+'-content'
tabs_hover_change apartments_navigation, apartments_content
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment