I have the following tabs:
<div class="container">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active">Search</li>
<li>Other search</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="search">
</div>
<div class="tab-pane" id="other">
</div>
</div>
with the following javascript:
<script>
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
if (typeof url !== "undefined") {
var pane = $(this), href = this.hash;
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
} else {
$(this).tab('show');
}
});
</script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initialize();
});
</script>
The tab named other contains a search form and a map, once the form is submitted I get redirected to a new page. From this new page I would like to be able to go back to the other tab, but I would like to view the same exact content it had when the form was submitted.
Any ideas how I can implement this?
The browser back button does this. You can also add a button to go back:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>
Related
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
I am using MVC-5 and in my view i have a number of divs arranged horizontally and just below each divs i have tabs.
Each div is arranged such that it contains tabs just below it.
Now what i have to do ?
I have to click on div and upon clicking the div must automatically click the tab just below it.(i don't want manual )
My try to do it :
I have created a Onclick event of div and i have assigned ID to that tab.
But the problem is that tab is never clicked on clicing to the respectivce div.
My code to do so is:
<div class="panel-body">
<div class="col-md-2" id="Active" onclick="activeCircleClick('tab1')">
<div id="active" style="height: 125px;">
//here is something
</div>
</div>
</div>
<div style="width:1300px;">
<div style="width:100%;">
<ul class="nav nav-tabs nav-pills nav-justified" role="tablist" id="myTab">
<li class="active" id="activeList">
Active device list
<span class="col-md-12" id="activeDeviceStatus" style="text-align: center;"></span>
</li>
</ul>
</div>
<script>
function activeCircleClick(el)
{
alert("test1:" +el);
selectTab(el);
}
function selectTab(tabId)
{
alert('test2:' + tabId);
var tab = $("#" + tabId);
if (typeof tab != 'undefined')
{
e.preventDefault()
tab.tab('show');
}
}
</script>
My both the alert message popups but it don't click the tab below this div which i have clicked.
How to make it happen ?
I just soved my issue by doing this:
function activeCircleClick(el)
{
$('#tab1').bind('click', function () { });
$('#tab1').trigger('click');
}
I am working on a website and I can't seem to make it dynamic. My problem is that I can not get the navigation bar to be interactive. When I click it, nothing happens but it refreshes the same page.
(http://puu.sh/8RkDH.png) <- That's what the website looks like with this HTML, javascript and css: http://pastebin.com/Lz1rDwVj.
I thought
<div id="page">
<div id="header"><h1>FILMSTER</h1></div>
<div id="nav">
HOMEPAGE
DIRECTORS
MOVIES
CONTACT
</div>
<div id="main">
<div id="content">
<div class="tabs-container">
<div class="tab" id="HOMEPAGE"></div>
<div class="tab" id="DIRECTORS">asdfasdf</div>
<div class="tab" id="MOVIES">asdfasdf</div>
<div class="tab" id="CONTACT">gfdsgg</div>
would make my navigation bar interactive, but when I click one of the categories, It just refreshes the same page.
<script>
$(document).ready(function() {
//Assign the click handlers:
var nav = $('#nav'),
currentTab = nav.find('a').first().text();
nav.on('click', 'a', function(e) {
e.preventDefault();
if( $(this).text() !== currentTab ) {
$('.tabs-container').find('.tab').fadeOut(function() {
$('#' + currentTab).fadeIn();
}
}
}
});
</script>
Does not seem to help either.
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.