I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.
and my HTML code :
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
the way I intend to use location.reload
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});
Saving $(e.target).class('current') won't work. There is no .class() method...
It seems you wish to use the href to open the tab... But there is no href!
So I think you should use the data-tab.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})
Related
I'm using the addthis toolbox to share pages on my site to social media. This is my entire addthis section:
<div class="print_share">
<ul>
<li>
<!-- addthis print button begin -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_print"><svg class="icon icon--print"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-print"></use></svg> Print</a>
</div>
<!-- addthis print button end-->
</li>
<li>
<!-- addthis email button begin -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_email"><svg class="icon icon--email"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-email"></use></svg> Email</a>
</div>
<!-- addthis email button end-->
</li>
<li>
<!-- addthis menu button begin -->
<div class="addthis_toolbox addthis_default_style" data-media="http://i.imgur.com/sI5mrZP.png">
<div class="share_interstitial" style="display: none">
<span class="at16nc at300bs at15nc at15t_compact at16t_compact"><span class="at_a11y">More Sharing Services</span></span>
<a>Share</a>
<div class="share_loading" style="display: none"><img height="50" src="/images/loading.gif"/><span>Generating thumbnail image...</span></div>
</div>
<a class="addthis_button_compact"><svg class="icon icon--share"><use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="/images/icons/svg-sprite.svg#icon-share"></use></svg> Share</a>
</div>
<!-- addthis menu button end-->
</li>
<li><span>Hello</span></li>
</ul>
</div>
I also have this script, which I added the $(document).ready() method to:
<script language="javascript" type="text/javascript">
var addthis_share = {
url_transforms: {
shorten: {
twitter: 'bitly'
}
},
shorteners: {
bitly: {}
},
media: "http://i.imgur.com/sI5mrZP.png"
};
var addthis_config = {
ui_click: true,
services_compact: 'facebook,twitter,more',
services_exclude: 'gmail,email,print,printfriendly,favorites,blogger,w3validator'
};
$(document).ready(function() {
console.log(addthis);
if (typeof addthis !== 'undefined') {
addthis.update('share', 'image', "http://i.imgur.com/sI5mrZP.png");
if (addthis_share.passthrough) {
addthis_share.passthrough.pinterest_share.media = "http://i.imgur.com/sI5mrZP.png";
}
addthis.toolbox('.addthis_toolbox', addthis_config, addthis_share);
}
});
</script>
but the image is never getting included. Why is it not sharing the image when I have the property data-media set on the addthis_toolbox element?
I need to hide or show charts depending on the selected value, but it is not working and not showing the error in console. I made the javascript code with an alert and it works, so I guess the problem is not about the "if" logic
Here is the HTML code
<div class="row">
<!-- Left col -->
<section class="col-lg-12 connectedSortable">
<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
<!-- Tabs within a box -->
<ul class="nav nav-tabs pull-right">
<li class="active"></li>
</ul>
<div class="tab-content no-padding">
<!-- Morris chart - Sales -->
<div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
</div>
</div>
</section>
</div>
<select class="target" id="opcion">
<option value="mes1" selected="selected">Hace 1 mes</option>
<option value="mes2">Hace 2 meses</option>
<option value="mes3">Hace 3 meses</option>
</select>
and this is the Javascript Snippet
$( ".target" ).change(function() {
if(document.getElementById('opcion').value == "mes1") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area.redraw();
area2.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes2") {
$('.box ul.nav a').on('shown.bs.tab', function () {
area2.redraw();
area.hidden = true;
});
}
if(document.getElementById('opcion').value == "mes3") {
alert( "Mes 3" );
}
});
any help will be appreciated
I solved it by using the chart js function called "Redraw". Thanks anyways
I'm trying to achieve smooth scrolling with jQuery and smoothscroll.js. I have done a lot of research as to why I'm getting this error in dev tools but I can't seem to figure it out:
TypeError: $(...).offset(...) is undefined
This is my code:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - headerH + 'px'
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
This is the html:
<body class="onepage" data-spy="scroll" data-target=".navigation">
<div id="load"></div>
<!-- START PAGE WRAP -->
<div class="page-wrap">
<!-- START HOME SECTION -->
<div id="home" class="home-parallax">
<div class="home-text-wrapper">
<div class="home-logo-text">
Welcome to Jarvis
</div>
<div id="home-slider" class="flexslider">
<ul class="slides styled-list">
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">Creative</span> Nerds</p></li>
<li class="home-slide"><p class="home-slide-content">We are <span class="highlight">crazy</span> Coders</p></li>
<li class="home-slide"><p class="home-slide-content">We <span class="highlight">love</span> Pizzas</p></li>
</ul>
</div><!-- END FLEXSLIDER -->
</div><!-- END HOME TEXT WRAPPER -->
</div><!-- END HOME SECTION -->
<!-- START NAVIGATION -->
<nav class="light sticky-nav navigation">
<!-- START CONTAINER -->
<div class="container clearfix">
<div class="four columns">
<!-- START LOGO -->
<div class="logo large">
<img src="images/logo.png" title="logo" alt="Logo"/>
</div>
<!-- END LOGO -->
</div><!-- END FOUR COLUMNS -->
<div class="twelve columns">
<!-- START NAVIGATION MENU ITEMS -->
<ul class="main-menu large nav" id="nav">
<li>Home</li>
<li>About</li>
</ul>
<!-- END NAVIGATION MENU ITEMS -->
</div><!-- END TWELVE COLUMNS -->
</div><!-- END CONTAINER -->
</nav>
<!-- END NAVIGATION -->
<!-- START ABOUT US SECTION -->
<div id="about" class="page">
<div class="container">
<div class="row">
<div class="sixteen columns">
<!-- START TITLE -->
<div class="title">
<h1>About Jarvis</h1>
<div class="subtitle">
<p>we are utmost <span class="highlight">Creative Agency</span> located in Melbourne, Australia. Praesent rhoncus nunc <span class="highlight">vitae metus</span> condimentum viverra.</p>
</div><!-- END SUBTITLE -->
</div><!-- END TITLE -->
</div><!-- END SIXTEEN COLUMNS -->
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
Please check element is exist or not before got top property of offset() function:
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var destinateEle = $($(this).attr("href"));
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
After read you update HTML, I have to change js to remove "index.html".
Jquery('index.html#your-id') will always return empty element.
/*----------------------------------------------------*/
// MENU SMOOTH SCROLLING
/*----------------------------------------------------*/
$(".main-menu a, .logo a, .home-logo-text a, .home-logo a, .scroll-to").bind('click', function(event) {
$(".main-menu a").removeClass('active');
$(this).addClass('active');
var headerH = $('.navigation').outerHeight();
var queryIDArr = $(this).attr("href").split('#');
if (queryIDArr.length < 2) return;
var queryID = queryIDArr[1];
var destinateEle = $('#' + queryID);
if (destinateEle.length == 0) {
return;
}
$("html, body").animate({
scrollTop: destinateEle.offset().top - headerH
}, {
duration: 1200,
easing: "easeInOutExpo"
});
event.preventDefault();
});
I want to implement a custom next button into the bootstrap tab navigation.
When clicking on the next-button, the next tab should be displayed as active.
If the last tab is reached it should start with the first tab.
Bootply snippet
This solve your problem
$('.next-tab').click(function(e){
if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
$('.nav-tabs > li').first('li').find('a').trigger('click');
}else{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
e.preventDefault();
});
http://www.bootply.com/XYpxMIgink
I Recently needed this functionality and this is what I ended up with:
$('.change-tab').click(function() {
var $this = $(this);
var $nav = $($this.data('target'))
var $tabs = $nav.find('li');
var $curTab = $tabs.filter('.active');
var cur = $tabs.index($curTab);
if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a');
else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a');
$showTab.tab('show');
});
// normal tabs code
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$(function () {
$('#myTab a:last').tab('show');
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home
</li>
<li>Profile
</li>
<li>Messages
</li>
<li>Settings
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home content...</div>
<div class="tab-pane" id="profile">Content here...</div>
<div class="tab-pane" id="messages">Messages...</div>
<div class="tab-pane" id="settings">Settings...</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
<button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
I am using #DelightedD0D provided solution. When the page load, the control stop on the last tab always. If you want to fix this, please update the following function
$(function () {
$('#myTab a:last').tab('show');
})
to
$(function () {
$('#myTab a:active').tab('show');
})
there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});
If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();