We Keep Coding

Set active class when page refreshes JQuery?

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');
}
});
}
})

Tabs with multiple slideshow does not load sliders sometimes

I have created tabs. There are 3 tab items and tabs content is sliders.When i use these slideshows without tabs it works fine. But when used tabs, the slider of tab2 or tab3 sometimes does not load. It only occurs sometimes. What I have learnt that it loads perfectly on page load when using no tabs, But with tabs I have to hide the other 2 tabs on page load. So when click on these tabs, the slideshow does not appear /load sometimes.It also works fine sometimes. Tabs working fine the text content also.
I have been working on shopify, so using slideshow of theme.
Here is the code for html code for tabs:
<ul class="tabs">
<li>
<a data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li>
<a data-toggle="tab" href="#menu2">Tab 2</a>
</li>
<li>
<a data-toggle="tab" href="#menu3">Tab 3</a>
</li>
</ul>
<!-- Code for tabs Contnet -->
<div id="menu1">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image1.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image2.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image3.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu2">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image21.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image22.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image23.jpg"/>
</div>
</div>
</section>
</div>
<div id="menu3">
<section class="homepage-slideshow js-homepage-slideshow">
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image31.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image32.jpg"/>
</div>
</div>
<div class="gallery-cell slide1">
<div class="oc_img_container">
<img src="image33.jpg"/>
</div>
</div>
</section>
</div>
Javascript for tabs
<script type="text/javascript">
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
</script>
I am working in shopify and the using the slider of theme, here is the code for slideshow from theme.
var slideshow = {
init: function(){
$('.js-homepage-slideshow').each(function (index, value){
var $homepageSlider = $(this);
var settings = {
slideshowSpeed: $homepageSlider.data('slideshow-speed')*1000,
slideshowTextAnimation: $homepageSlider.data('slideshow-text-animation'),
adaptiveHeight: $homepageSlider.data('adaptive-height')
}
//initiate the slideshow
if (!$homepageSlider.hasClass('flickity-enabled')){
var arrowShow = $homepageSlider.find('.gallery-cell').length === 1 ? false : true;
$homepageSlider.flickity({
adaptiveHeight: settings.adaptiveHeight,
wrapAround: true,
cellAlign: 'left',
imagesLoaded: true,
prevNextButtons: arrowShow,
draggable: arrowShow,
pageDots: usePageDots,
autoPlay: settings.slideshowSpeed,
arrowShape: arrowSize
});
if (settings.slideshowTextAnimation != ''){
var flkty = $homepageSlider.data('flickity');
setTimeout(function() {
$homepageSlider.find('.gallery-cell:nth-child(1) .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
$homepageSlider.on( 'select.flickity', function() {
if($homepageSlider.is(':visible')) {
var currentSlide = flkty.selectedIndex + 1;
setTimeout(function() {
$homepageSlider.find('.caption-content').removeClass('animated ' + settings.slideshowTextAnimation);
$homepageSlider.find('.gallery-cell:nth-child(' + currentSlide + ') .caption-content').addClass('animated ' + settings.slideshowTextAnimation);
}, 400);
}
});
}
}
if ($homepageSlider.find('.gallery-cell').length > 1) {
$homepageSlider.addClass('multi-image');
} else {
$homepageSlider.addClass('single-image');
}
$homepageSlider.find('.gallery-cell').each(function(){
var buttonWidth = 0;
$(this).find('.action_button').each(function(){
$button = $(this);
if($(this).width() > buttonWidth){
buttonWidth = $(this).width();
}
});
$(this).find('.action_button').width(buttonWidth);
});
});
},
unload: function($target){
var $slider = $target.find('.js-homepage-slideshow');
$slider.flickity('destroy');
}
}

add this share to Facebook not sharing image

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?

Datatables header align when sidebar is collapsed: trigger class change

I'm using datatables with scrollY actived and AdminLTE2 theme:
acquisitionTable = $('#acquisitionsTable').DataTable({
responsive: true,
// "bLengthChange": false,
deferRender: true,
scrollY: '60vh',
scrollCollapse: true,
scroller: true,
the problem is the header align when sidebar is collapsed
and this problem is widespread but all the solutions that I tryed have failed.
I thought to call acquisitionTable.columns.adjust(); but how can I catch the collapse and expand events?
This is the sidebar:
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img th:src="#{/static/assets/dist/img/fca.jpg}" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p sec:authentication="principal.name"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li><a th:href="#{/}"> <i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a></li>
<li sec:authorize="hasRole('ROLE_ADMIN')" class="treeview"><a
href="#"> <i class="glyphicon glyphicon-cog"></i> <span>Administration</span>
<span class="label label-primary pull-right">5</span>
....
From the documentation (and I check it with debug mode) when the sidebar is collapsed the class .sidebar-collapse is added to body tag.
Thanks

At the moment I fixed the problem with this code:
divW = jQuery("#contentAreaId").width();
setInterval(function(){
var w = jQuery("#contentAreaId").width();
if (w != divW) {
acquisitionTable.columns.adjust();
divW = w;
}
},100);

Have you tried css min-width option, such as :
.dataTables_scrollHead table {
min-width: 100%;
}
also you may want to add :
table-layout: fixed;

TypeError: $(...).offset(...) is undefined and offset exists

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();
});