Develop Reference

Clone LI div so it is placed after the original LI instead of end

I want to be able to click on an item and clone it immediately after that item, At moment it always Clones to the END, id adds it after the last LI in list.
I created a jsFiddle here jsfiddle test
JS
const curId = 20;
function cloneIt(){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),
newId
));
$("#ulContainer").append(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt();
alert('item cloned');
e.preventDefault();
});
HTML
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

You can try using .after() by passing the event to the function:
Insert content, specified by the parameter, after each element in the set of matched elements.
Change
$("#ulContainer").append(newCloned);
To
$(e.target.closest('li')).after(newCloned);
const curId = 20;
function cloneIt(e){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),newId));
$(e.target.closest('li')).after(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt(e);
alert('item cloned');
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

JQuery Select turn off div and display another

I have the flowing html and jquery code on my development site. It works but seems clunky. I am looking for an easier cleaner way to make the function fade in divs and fade out divs.
$(document).ready(function() {
$("#sup1").click(function() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
});
$("#con1").click(function() {
$("#con").show(300);
$("#conselect").show(300);
$("#select").hide(300);
$("#sup").hide(300);
});
$("#con2").click(function() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
});
$(".back").click(function() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select" class="lin">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="sup" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="con" style="display:none">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="conform" style="display:none">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Try this code:
$(document).ready(function() {
$(".js-trigger").click(function() {
const $t = $(this);
const href = $t.attr('href');
$(".js-trigger-target").hide(300);
$(href).show(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="anchor3" class="js-trigger-target">
<div>
I am Cool
I am Lame
</div>
</div>
<div id="anchor1" style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div id="anchor2" style="display:none" class="js-trigger-target">
<div id="conselect" style="display:block">
Learn More
Enroll Now
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
<div style="display:none" class="js-trigger-target">FORM GOES HERE
<p><i class="fas fa-angle-left"></i> Go back</p>
</div>
</div>

Looking at what you have is sufficient enough for what you are trying to achieve. No need to over engineer the simple things. That said, if you must make it a bit cleaner ...it would improve your readability to use named functions over all the anonymous inline functions, see below:
function onCon1Clicked() {
$("#sup").show(300);
$("#select").hide(300);
$("#con").hide(300);
}
function onCon2Clicked() {
$("#conform").show(300);
$("#select").hide(300);
$("#conselect").hide(300);
$("#sup").hide(300);
}
function onBackClicked() {
$("#select").show(300);
$("#sup").hide(300);
$("#con").hide(300);
$("#conform").hide(300);
}
$(document).ready(function() {
// Click on sup1.
$("#sup1").click();
// Assign click handlers.
$("#con1").click(onCon1Clicked);
$("#con2").click(onCon2Clicked);
$(".back").click(onBackClicked);
});

Saving Bootstrap collapse state between page refresh/page swap

I have this BS navbar that you can collapse, and I want it to save the state when I change page or refresh the current page.
home.php
<!-- Side Navbar -->
<nav class="side-navbar">
<div class="side-navbar-wrapper">
<div class="sidenav-header d-flex align-items-center justify-content-center">
<div class="sidenav-header-inner text-center"><img src="img/marcus_avatar.png" alt="person" class="img-fluid rounded-circle">
<h2 class="h5 text-uppercase"><?php echo $_COOKIE['userName']; ?></h2><span class="text-uppercase">Web Admin</span>
</div>
<div class="sidenav-header-logo"> <strong>S</strong><strong class="text-primary">F</strong></div>
</div>
<div class="main-menu">
<ul id="side-main-menu" class="side-menu list-unstyled">
<li class="active"> <i class="fa fa-home"></i><span>Home</span></li>
<li> <i class="fa fa-users"></i><span>Users</span></li>
<li> <i class="fa fa-upload"></i><span>Upload</span></li>
<li><i class="fa fa-file"></i><span>My Files</span></li>
</ul>
</div>
</div>
</nav>
jsfile.js
$(".side-navbar").on('shown.bs.collapse', function ()
{
var active = $(this).attr('id');
$.cookie(active, "1");
});
$(".side-navbar").on('hidden.bs.collapse', function ()
{
var active = $(this).attr('id');
$.removeCookie(active);
});
$(document).ready(function(){
var panels=$.cookie(); //get all cookies
for (var panel in panels){ //<-- panel is the name of the cookie
if ($("#"+panel).hasClass('shrink')) // check if this is a panel
{
$("#"+panel).collapse("show");
}
}
});
I want it to work like this: http://jsfiddle.net/03u0bfst/3/ but I just can't get it to work for the life of me!

JS work with only one id and ignores other

I ADDED TEXT RESIZER A BUT IT IS WORKING ON LAST ID , PLZ HELP ME TO FIX IT
<span class="category category--full">%s</span>
<h2 class="title title--full">%s</h2>
<div class="meta meta--full">
<img class="meta__avatar" src="%s" alt="%s" />
<span class="meta__author">%s</span>
<span class="meta__date"><i class="fa fa-calendar-o"></i>%s</span>
<span class="meta__reading-time"><i class="fa fa-clock-o"></i> %s</span>
<span class="meta__misc meta__misc--seperator"></span>
<span class="meta__misc"><div class="fb-like" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-layout="box_count" data-action="like" data-show-faces="true" data-share="true"></div></span><br><br><br>
<nav class="article-nav">
<button><i class="fa fa-angle-left"></i> <span>Previous</span></button>
<button><span>Next</span> <i class="fa fa-angle-right"></i></button>
</nav>
</div>
<div id="wrapper">
<div id="controls">
A
A
A
</div>
%s
</div>
<p>lorem link by <span>%s</span> </p>
<center><p> <div class="fb-comments" data-href="http://hypnos.cosmicgirl.xyz?id=%s" data-width="450" data-numposts="5"></div></p> </center> </article>',$myrow["title"],$myrow["titled"],$myrow["pic"],$myrow["title"],$myrow["author"],$myrow["date"],$myrow["time"],$myrow["id"],$myrow["text"],$myrow["link"],$myrow["author_d"],$myrow["id"]); }
?>
HERE IS JS CODE:
$(document).ready(function(){
$("#small").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"24px"});
$("h2").animate({"font-size":"16px"});
$("p").animate({"font-size":"12px", "line-height":"16px"});
});
$("#medium").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"36px"});
$("h2").animate({"font-size":"24px"});
$("p").animate({"font-size":"14px", "line-height":"20px"});
});
$("#large").click(function(event){
event.preventDefault();
$("h1").animate({"font-size":"48px"});
$("h2").animate({"font-size":"35px"});
$("p").animate({"font-size":"30px", "line-height":"40px"});
});
$( "a" ).click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});

Why don't you write is as following, this is more reliable code:
$("a").click(function(e){
e.preventDefault();
$("a").removeClass("selected");
$(this).addClass("selected");
var type = $(this).attr('id');
if(type=="small"){
//Your code for small text
}
else if(type=="medium"){
//Your code for medium text
}
else if(type=="large"){
//Your code for large text
}
});

Close button not closing the popup box overlay

This is the html for the my ul,and on click of anchor tag data will be loaded from the other file tab2.html .
<ul class="list-unstyled " id="dist-tabs">
<li class="col-xs-3 student item ">
<a href="./tabs/tab2.html #1">
shimla
</a>
</li>
<li class="col-xs-3 staff item">
<a href="./tabs/tab2.html #2">
dharamshala
</a>
</li>
</ul>
<div id="dist-container">
</div>
Following is the content for the tab2.html , which will be loaded through ajax.
<div class="popup-overlay" id="1">
<div class="popup-box">
<h4>Name 1</h4>
<span class="close-btn">x close</span>
</div>
</div>
<div class="popup-overlay" id="2">
<div class="popup-box">
<h4>Name 2</h4>
<span class="close-btn">x close</span>
</div>
</div>
Every thing is working fine, popup opens just fine. But on click of close button with class="close-btn", the popup-box doesn't close
Following is the js i am using for the purpose stated above .
var containerId = '#dist-container';
var tabsId = '#dist-tabs';
$(document).ready(function(){
$(tabsId + ' A').click(function(){
loadTab($(this));
return false;
});
});
function loadTab(tabObj){
if(!tabObj || !tabObj.length){ return; }
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function(){
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
$(".close-btn").click(function(){
$(containerId).fadeOut('fast');
});
}
I have tried a lot of code for popup through ajax but not successful so far. So please help me out