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

Image filter Navigation

I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working

You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>

Materialize swipe tabs not working in modal

I am encountering a strange problem.
I am using swipe on materialize tabs and when i make swipe without the modal it works fine but when i include them in the modal the swipe feature does not work anymore
$(document).ready(function() {
$('.modal').modal();
$('.tabs').tabs({
swipeable: true
});
})
div.tabs-content.carousel.carousel-slider {
height: 200px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
</head>
<body>
<li><a href='#profession-registration-modal' class='orange darken-1 modal-trigger'>Open</a></li>
<div id="profession-registration-modal" class="modal">
<div class="modal-content">
<h4>Register your profession</h4>
<div class="row">
<div class="col s12">
<ul id="tabs-swipe-demo" class="tabs">
<li class="tab col s3">Test 1</li>
<li class="tab col s3"><a class="active" href="#test-swipe-2">Test 2</a></li>
<li class="tab col s3">Test 3</li>
</ul>
<div id="test-swipe-1" class="col s12 blue">Test 1</div>
<div id="test-swipe-2" class="col s12 red">Test 2</div>
<div id="test-swipe-3" class="col s12 green">Test 3</div>
</div>
</div>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>
Here is the fiddle: jsfiddle

Because the modal is hidden by default, normal initialization of tabs within modals won't work. You can use callbacks like onOpenEnd to reinitialize your tabs so that they render correctly once the modal is fully opened.
$('.modal').modal({
onOpenEnd: function(el) {
$(el).find('.tabs').tabs({ swipeable: true });
}
});
Here is an updated fiddle that uses that callback: https://jsfiddle.net/y7rmbd6w/14/

Since jQuery is no longer a dependency in Materialize CSS, so in order to do it with vanillaJS, one can use this -
document.addEventListener('DOMContentLoaded', function() {
const options = {
onOpenEnd: (el) => {
M.Tabs.init(el.querySelector('.tabs'), {
swipeable: true
});
}
}
let elems = document.querySelectorAll('.modal');
let instances = M.Modal.init(elems, options);
});

Deactive bootstrap active label click

I have several groups with a selection of three buttons. I'm trying to make it so that when someone selects the N/A button, it disables the other two buttons. When the N/A button is deselected, the other two buttons are enabled. I have it working on my machine, that the other two buttons are colored as disabled, and have the "disabled" attribute set properly. The problem is, that the buttons/labels can still be clicked on and set the label to active.
I'm having trouble getting my JSFiddle to operate the same as on my machine. It won't disable the other two buttons on the initial N/A click, but it may just be something with JSFiddle. Here is my code, if you want to try it on your own machine:
https://jsfiddle.net/trout0525/huz8macm/7/
<div id="plan-wrapper">
<div class="row plan-title-row">
<div class="col-lg-6" id="plan-title">
Loading...
</div>
<div class="col-lg-6">
<div class="pull-right" id="countdown">
Countdown
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" style="margin-bottom: 4px;">
<div class="panel-body">
<div class="row" id="master-progress">
</div>
</div>
</div>
</div>
</div>
<div id="plan-file-title" style="margin: 0 0 4px 5px;"></div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a data-toggle="tab" href="#planTeam">Team</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planResources">Resources</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planStatus">Status</a></li>
</ul>
<div class="tab-content" style="background-color: white; padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
<div id="planTeam" class="tab-pane fade in active">
</div>
<div id="planResources" class="tab-pane fade">
</div>
<div id="planStatus" class="tab-pane fade">
</div>
</div>
</div>
</div>
</div>
Any help would be great.

Got it done on JSFiddle with removal of typos and debugging through developer console, yet it's currently with Chrome, not IE:
https://jsfiddle.net/trout0525/huz8macm/9/
$(".btn-group .btn").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var $selectedButton = $(this),
$panelDefault = $selectedButton.closest('.panel-default'),
$controlPanel = $panelDefault.find('.panel-heading .pull-right'),
parent = $selectedButton.closest('.panel-default').attr('data-stepId'),
stepId = $selectedButton.closest('li').attr('id'),
spcStat = $selectedButton.attr('id').match(/^(.*?)\d+$/)[1];
var buttonIsActive = $selectedButton.hasClass('active'),
buttonIsDisabled = $selectedButton.attr('disabled');
if ( buttonIsActive || buttonIsDisabled ) {
$selectedButton.removeClass('active');
} else {
$selectedButton.addClass('active');
}
if ($selectedButton.hasClass('not-applicable')) {
var naIsActive = $selectedButton.hasClass('active'),
allButtons = $selectedButton.closest('.btn-group');
if (naIsActive) {
$selectedButton.siblings().removeClass('active');
$(allButtons)
.find('.btn_draft_complete')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
$(allButtons)
.find('.btn_done')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
} else {
$(allButtons)
.find('.btn_draft_complete')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
$(allButtons)
.find('.btn_done')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
}
}
});

jQuery fade content out and then fade new content in continuously

I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}

Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});

Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->

Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->