I am currently using Zurb Foundation Tabs for small project. The tabs work great but I am running into a wall when trying to url target to an specific tab. I searched and found a method for getting this achived but when modifying and applying it to my example it is not working. I am getting error: “unrecognized expression: :nth-child”. How can I properly url link to a specific tab in Foundation 5? DEMO
JS/JQuery for url target
<script>
window.navigateTab = function (event) {
var url = $(event.target).attr('href');
var target = url.split('#')[1];
if (target.substr(0, 5) == 'panel') {
var state = {
tab: target.substr(5)
};
selectTab("tabs_edit", state.tab); //<-- change the tab
history.pushState(state, null, url); //<-- change the url
event.preventDefault();
}
}
window.onpopstate = function (event) {
if (event.state != null) {
selectTab("tabs_edit", event.state.tab); //<-- change the tab
}
};
function selectTab(id, tab) {
// activate only the right tab:
var tab = $("#" + id + "> dl > dd:nth-child(" + tab + ")");
console.log(tab);
var a = $("a", tab);
target = $('#' + a.attr("href").split('#')[1]);
siblings = tab.siblings();
settings = tab.closest('[data-tab]').data('tab-init');
tab.addClass(settings.active_class);
siblings.removeClass(settings.active_class);
target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
}
$('#menu a').on("click", navigateTab);
$(document).foundation();
</script>
HTML
//Target an specific tab:
<ul id="menu" class="dropdown">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
//Actual Tabs
<dl id="tabs_edit" class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
I know this post is old but after reading more into the foundation 5 text they've added Deeplinking features that works on different pages
Just add this :
data-options="deep_linking:true"
Example:
<dl class="tabs vertical" data-tab data-options="deep_linking:true">
This even works on different pages linking to it!
For link on other pages I just called the panelid
Example:
<a href="product-line.php#panel12">
Deep linking is something that Foundation 5 has not included as found in Foundation 4. I have made a fix that is not as clever but gets the job done:
if(window.location.hash){
$('dl.tabs dd a').each(function(){
var hash = '#' + $(this).attr('href').split('#')[1];
if(hash == window.location.hash){
$(this).click();
}
});
}
Related
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty.
Check:
Fiddle example
Like on example u will see you
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
And js:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Place this at the very end of your script:
$(document).ready(function(){
$('[data-toggle="tabajax"]:first').click();
});
that's it worked here is the complete js code:
<script type="text/javascript">
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$('[data-toggle="tab"]:eq(0)').trigger('click');
$this.tab('show');
return false;
});
$(document).ready(function(){
$('[data-toggle="tab"]:first').click();
});
</script>
Thanks a lot
I'm doing a responsive menu that check the window.resize event and, when it fits the minimum browser width, a click function for a button is allowed. If the browser width is greater, then the click function is unbound. I need to do this because the same element that is the button on the mobile version, is a visual element on the desktop version.
The problem is that, with the code that I have now, when the page is loaded (desktop or mobile screen), the click function works fine. But, if I resize the browser and click on the element again, it doesn't work. If I want to mobile nav works, I need to refresh the page to make it work. Really annoying.
To help understand what is happening, I've made a simple example. Here's is the simple code (just to check the click function issue)
HTML
<!-- WRAPPER -->
<div id="freakers-wrapper">
<!-- HEADER -->
<header id="header">
<div class="header-bottom">
<div class="container">
<div class="row">
<div class="col-md-5">
<!-- MENU -->
<nav class="menu-wrapper-left">
<a class="menu-trigger" href="#">
<span></span>
</a>
<ul id="main-menu" class="menu menu--main menu--left main-menu">
<li>Home</li>
<li class="has-children">
Shop
<ul class="sub-menu is-hidden">
<li class="go-back">Back</li>
<li>Shop 1</li>
<li>Shop 2</li>
<li>Shop 3</li>
</ul>
</li>
<li><a href="#" >Blog</a></li>
</ul> <!-- end main-menu -->
</nav> <!-- end menu-wrapper -->
</div>
<div class="col-md-2">
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="Logo" class="img-responsive">
</a>
</div>
</div>
<div class="col-md-5">
<!-- MENU -->
<nav class="menu-wrapper-right">
<ul id="main-menu" class="menu menu--main menu--right main-menu">
<li>help</li>
<li>lookbook</li>
<li>model</li>
</ul> <!-- end main-menu -->
</nav> <!-- end menu-wrapper -->
</div>
</div>
</div>
</div> <!-- end header-bottom -->
</header> <!-- end header -->
<!-- MOBILE NAV -->
<div id="mobile-nav"></div>
</div> <!-- end freakers-wrapper -->
JS
(function($) {
"use strict";
$(document).ready(function () {
$(window).on('load resize', function(){
moveNavigation();
});
/* ----------------------------------------------------------------------
Main Menu
---------------------------------------------------------------------- */
//if you change this breakpoint, don't forget to update this value as well
var MqL = 1030,
menuLeft = $('.menu-wrapper-left').html(),
menuRight = $('.menu-wrapper-right').html();
console.log(menuRight);
console.log(menuLeft);
//move nav element position according to window width
// moveNavigation();
//mobile - open lateral menu clicking on the menu icon
$(document).on('click', '.menu-trigger', function(event){
event.preventDefault();
if($('#freakers-wrapper').hasClass('push-content')){
closeNav();
}else{
$('#freakers-wrapper').addClass('push-content');
$('#mobile-nav .menu').addClass('menu--open');
$(this).addClass('nav-is-visible');
}
});
//open submenu
$('.has-children').on('click', function(event){
var selected = $(this);
if( selected.children('ul').hasClass('is-hidden') ) {
selected.children('ul').removeClass('is-hidden');
}
});
//submenu items - go back link
$('.go-back').on('click', function(evt){
evt.stopPropagation();
$(this).parent('ul')
.addClass('is-hidden')
.parent('.has-children')
.parent('ul');
});
function closeNav(){
$('#freakers-wrapper').removeClass('push-content');
$('.menu--main').removeClass('menu--open');
$('.has-children ul').addClass('is-hidden');
}
function checkWindowWidth() {
//check window width (scrollbar included)
var e = window,
a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
if ( e[ a+'Width' ] >= MqL ){
closeNav();
if ( $('.menu-trigger').hasClass('menu-trigger-open') ){
$('.menu-trigger').removeClass('menu-trigger-open');
}
return true;
} else {
var menuElm = $('.main-menu .has-children');
if($('.sub-menu ul', menuElm).hasClass('left-menu')){
$('.sub-menu ul', menuElm).removeClass('left-menu');
}
return false;
}
}
function moveNavigation(){
var navigation = $('.menu--main'),
desktop = checkWindowWidth();
if ( desktop ) {
$('#mobile-nav').children().remove();
$('.menu-wrapper-left').html(menuLeft);
$('.menu-wrapper-right').html(menuRight);
} else {
navigation.appendTo('#mobile-nav');
$('.menu--main').not(':first').remove().children('li').appendTo('.menu--main:first');
}
}
$(".menu-trigger").click(function() {
$(this).toggleClass("menu-trigger-open");
});
});
}(jQuery));
If you want to see it in action, I've made a Codepen (try resize to see it working)
http://codepen.io/thehung1724/full/JYmzWr/
I hope I could explain well my problem. I've searched and didn't found a solution for this issue (or maybe I just didn't know really well what to look for). Although when you resize the screen, you can still click on the menu icon, but please notice it doesn't transform to 'X' letter and you can't click to show sub-menu
Works
Doesn't work
Any help would be appreciated!
An easy fix would be to replace
$('.has-children').on('click', function(event){
with
$(document).on('click', '.has-children', function (event) {
When you clone the nav from one place to another you are losing the pointer to the on click function for .has-children
With the $(document).on.... you're actually binding the function to the document which doesn't get disposed.
Update:
Replace the following section of javascript
$('.has-children').on('click', function (event) {
var selected = $(this);
if (selected.children('ul').hasClass('is-hidden')) {
selected.children('ul').removeClass('is-hidden');
}
});
$('.go-back').on('click', function (evt) {
evt.stopPropagation();
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
});
With
$(document).on('click', '.has-children', function (event) {
var selected = $(this);
if (selected.children('ul').hasClass('is-hidden')) {
selected.children('ul').removeClass('is-hidden');
}
});
$(document).on('click', '.go-back', function (evt) {
evt.stopPropagation();
$(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul');
});
Further update:
I've Forked your code in CodePen with the above changes: http://codepen.io/anon/pen/JYmVXm
Here my JSfiddle : http://jsfiddle.net/sgmkghf4/
I want to create multiple level tabs.
In the first tabs i want to add somme other tabs levels but the first level tabs close when i click on second levels tabs.
Where is the mistake ?
<!--TABS WRAPPER-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1</li>
<li><a class="icon" href="#finished" rel="finished">2</a></li>
<li>3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="pending" class="tab_content" style="display: block;">
<!--SECOND TABS-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1.1</li>
<li><a class="icon" href="#othertwo" rel="othertwo">1.2</a></li>
<li>1.3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="otherone" class="tab_content" style="display: block;">
<p>TEST1</p>
</div>
<div id="othertwo" class="tab_content">
<p>TEST2</p>
</div>
<div id="otherthree" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
<!--SECOND TABS-->
</div>
<div id="finished" class="tab_content">
<p>TEST2</p>
</div>
<div id="cancelled" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
$(document).ready(function(){
// Main function that shows and hides the requested tabs and their content
var set_tab = function(tab_container_id, tab_id){
// Remove class "active" from currently active tab
$('#' + tab_container_id + ' ul li').removeClass('active');
// Now add class "active" to the selected/clicked tab
$('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");
// Hide contents for all the tabs.
// The '_content' part is merged with tab_container_id and the result
// is the content container ID.
// For example for the original tabs: tab_container_id + '_content' = original_tabs_content
$('#' + tab_container_id + '_content .tab_content').hide();
// Show the selected tab content
$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
}
// Function that gets the hash from URL
var get_hash = function(){
if (window.location.hash) {
// Get the hash from URL
var url = window.location.hash;
// Remove the #
var current_hash = url.substring(1);
// Split the IDs with comma
var current_hashes = current_hash.split(",");
// Loop over the array and activate the tabs if more then one in URL hash
$.each(current_hashes, function(i, v){
set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
});
}
}
// Called when page is first loaded or refreshed
get_hash();
// Looks for changes in the URL hash
$(window).bind('hashchange', function() {
get_hash();
});
// Called when we click on the tab itself
$('.tabs_wrapper ul li').click(function() {
var tab_id = $(this).children('a').attr('rel');
// Update the hash in the url
window.location.hash = tab_id;
// Do nothing when tab is clicked
return false;
});
});
Can you help me ?
You have very messed markup, but the main reason why this doesn't work is that you're using same id for multiple elements (new2_tabs and new2_tabs_content).
First of all, change ids to unique values. Then add classes to elements which you want to style, like this:
...
<div id="new_tabs" class="tabs">
...
<div id="new_tabs_content" style="padding:0" class="tabs_content">
In your css rewrite rules to use classes instead of ids. Here is working demo
I wonder if we can select a particular tab in a JQuery tab system from another page..?
For example I have a 3 menu section that is Home, Services, Contact.
In services page I have a tab system with 3 tabs for now (Name1, Name2, Name3).
For example I am in home page, and in submenu under Services I have links to Tabs (Name1, Name2, Name3 ).
If I click in name2 in submenu I need to display the Name2 tab (default visible one is Name1) in services page.
I have tried to give the it link like this... services.php#tab2 (like anchor tag method)
unfortunately it doesn't work..
I’m using the following JQuery for my tab system...
var $j = jQuery.noConflict();
$j(window).load(function(){
initTabs();
});
function initTabs(){
var strHash = document.location.hash;
if (strHash == "") {
if($j('.tabs').length){
var $tabsNav = $j('.tabs-nav');
var $tabsNavLis = $tabsNav.children('li');
$tabsNav.each(function() {
var $this = $j(this);
$this.next().children('.tab-content').stop(true,true).hide().first().show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
} else
$("a[href='" + strHash + "']").parent().click();
$tabsNavLis.on('click', function(e) {
var $this = $j(this);
$this.siblings().removeClass('active').end().addClass('active');
$this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
}}
tab navigation is like below:
<ul class="tabs-nav">
<li>name1</li>
<li>name2</li>
<li>name3</li>
</ul>
<div class="tabs-container">
<div id="tab-1" class="tab-content" style="display: none;">TABLE 1</div>
<div id="tab-2" class="tab-content" style="display: none;">TABLE 2</div>
<div id="tab-3" class="tab-content" style="display: none;">TABLE 3</div>
</div>
At home page I have menu options like one bellow, so if someone clicks on menu2 at home page it should redirect him to service page but open the tab2.
<nav class="menu-container">
<ul class="menu" id="">
<li id="menu-item" class=""><a class="" href="services.php#tab2" style="line-height: 82px;"><span>Name2</span></a></li>
<li id="menu-item" class=""><a class="" href="services.php#tab3" style="line-height: 82px;"><span>Name3</span></a></li>
</ul>
</nav>
I hope that someone can answer the above question.
Thanks a lot
Mark
I've managed to find the solution by checking the hash when the page loads, and then trigger a click.
Here is the whole code, hope it will help someone.
var $j = jQuery.noConflict();
$j(window).load(function(){
initTabs();
});
function initTabs(){
if($j('.tabs').length){
var $tabsNav = $j('.tabs-nav');
var $tabsNavLis = $tabsNav.children('li');
$tabsNav.each(function() {
var $this = $j(this);
$this.next().children('.tab-content').stop(true,true).hide().first().show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
$tabsNavLis.on('click', function(e) {
var $this = $j(this);
$this.siblings().removeClass('active').end().addClass('active');
$this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
var hash = $j.trim( window.location.hash );
if (hash) $j('.tabs-nav a[href$="'+hash+'"]').trigger('click');
}
}
One solution could be to use cookies, store the name of the tab you want to access and use the cookie value to programatically select the tab.