We Keep Coding

how to Put div to same Position on reload and load using jquery 1.5.2

I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->

So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});

Kill bxSlider on button click so it can be reloaded

I am using bxslider to create a somewhat customized thumbnail/slider element. Basically I have a simple grid of thumbnails and the intent is to have the slider open on the specific thumbnail image on click.
The issue I'm coming across is that the slider remains active after closing the slider window and I need it to stop/reset.
Scouring the internet led me to the function destroySlider(), but that is resulting the following error in the console:
Uncaught TypeError: $(...).bxSlider(...).destroySlider is not a
function
Any thoughts on how best to do this is appreciated, code below:
JS:
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
$('.bxslider').bxSlider().destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
$('.bxslider').bxSlider({
startSlide: parseInt(startingImg)
});
removeSlider('.remove-port-item', '.slide-contain')
})
HTML:
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>

Referring to comment by #Chris G above ^:
Try storing the slider in a global variable when you create it:
mySlider = $('.bxslider').bxSlider({ .... Then call
myslider.destroySlider(); Edit: according to the docs on github, this
will do it.
I tried this earlier with no luck, but I figured out why and here is the correct code:
var slider = $('.bxslider').bxSlider();
function removeSlider(a, b) {
$(a).click(function(){
$(b).removeClass("open-slide");
slider.destroySlider();
});
}
$('.open-slider').on('click', function (e) {
var startingImg = $(this).data('starting-img');
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
removeSlider('.remove-port-item', '.slide-contain')
})
As Chris G points out, the ultimate solution is to move bxSlider to a global variable, but there was an extra step due to the fact that the click function for opening the slider is using a variable scoped to that function (startingImg). This was solved by running:
slider.reloadSlider({
startSlide: parseInt(startingImg)
})
UPDATE: This works if only using one set of slides in the markup. The minute I try to use multiple sets of slides, even though they have their own unique IDs, it breaks reloadSlider and destroySlider. I am still trying to work through this.

In order for the image clicks and X button to work regardless of the state, it needs to be checked, both when opening and closing the slider:
Demo:
var slider = {};
function removeSlider(a, b) {
$(a).click(function() {
$(b).removeClass("open-slide");
var slideSection = $(a).parent().parent().attr("id");
if (slider[slideSection]) {
slider[slideSection].destroySlider();
slider[slideSection] = null;
}
});
}
$('.open-slider').on('click', function(e) {
var startingImg = parseInt($(this).data('starting-img'));
var slideSection = $(this).data('slide-section');
e.preventDefault();
$('#' + slideSection).addClass('open-slide');
if (slider[slideSection]) slider[slideSection].goToSlide(startingImg);
else slider[slideSection] = $('.bxslider').bxSlider({
startSlide: startingImg
});
})
$(document).ready(function() {
removeSlider('.remove-port-item', '.slide-contain');
});
.open-slider img {
width: 100%;
height: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="row padding-md-bot">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
<div class="col-sm-4">
<img src="media">
</div>
</div>
<!-- slides -->
<section class="slide-container slide-contain clearfix" id="careers-slides">
<div class="item-control">
<button class="remove-port-item button-close-slide">X</button>
<ul class="bxslider">
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
<li>
<img src="media" alt="">
</li>
</ul>
</div>
</section>
Edit: changed JS code to work for multiple groups of thumbs + slider.

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>

Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

JS: fullpage.js moveTo() among different section

CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->

Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.

Masonry js is messing with the Bootstrap tab function

I am using the Bootstrap tab function with Desandro's Masonry, and the problem is that when I load the page, it starts on the first tab for half a second, then jumps to the tab with the Masonry.
I am guessing that I could fix this with some scripting, but I am too new to js/jquery to figure it out.
I tried changing the order of the script code, because it looks to me like the page loads and then the Masonry script happens and forces its tab to the active state. But it still happens no matter what order the code is in.
Specifically what I need is either for someone to point out a mistake I overlooked or give me some pointers on how to make the page stay on the first tab when it loads.
I have included my html and js controls here, but I also made a fiddle with the full code at http://jsfiddle.net/jccarter1990/o15e98ts/3/
Thanks in advance
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter</li>
<li role="presentation">Features</li>
<li role="presentation">Gallery</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">Cover Letter</div>
<div role="tabpanel" class="tab-pane" id="page-two">Features</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="masonry js-masonry" >
<div class="item"><img class="thumbnail" src="img/paigeJohnLasVegas.jpg"></div>
<div class="item"><img class="thumbnail" src="img/engagementsCloseUp.jpg"></div>
<div class="item"><img class="thumbnail" src="img/jimmyJohns.jpg"></div>
<div class="item"><img class="thumbnail" src="img/paigeNinjaTurtle.jpg"></div>
<div class="item"><img class="thumbnail" src="img/sprayPaintSid.jpg"></div>
</div>
</div>
<script>
var container = document.querySelector('.masonry');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
var container = document.querySelector('.masonry');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.masonry.item'
});
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$(function () {
$('#myTab a[href="#page-one"]').tab('show')
$('#myTab a[href="#page-two"]').tab('show')
$('#myTab a[href="#page-three"]').tab('show')
})
</script>

UPDATED ANSWER: Set your first tab and panel as the active tab:
Fiddle
<div class="container navigation"> <span class="nt-name">John Carter</span>
<br> <span class="nt-title">Professional Portfolio</span>
<ul class="nav nav-pills" role="tablist" id="myTab">
<li role="presentation" class="active">Cover Letter
</li>
<li role="presentation">Features
</li>
<li role="presentation">Gallery
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="page-one">
<div class="container">
<h1>Cover Letter</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-two">
<div class="container">
<h1>Features</h1>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="page-three">
<div class="container">
<h1>Gallery</h1>
</div>
<div class="masonry js-masonry">
<div class="item">
<img class="thumbnail" src="img/paigeJohnLasVegas.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/engagementsCloseUp.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/jimmyJohns.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/paigeNinjaTurtle.jpg">
</div>
<div class="item">
<img class="thumbnail" src="img/sprayPaintSid.jpg">
</div>
</div>
</div>
</div>
Change your script to just this:
//bootstrap tab function
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
Leave out:
BTW, you don't have to include the bootstrap.js for tabs in your jsfiddle if you check the box to include Bootstrap, it includes the js. If you have other js to include, like masonry.js, add them using external resources instead of pasting them into the script panel This will make it much easier fior people to see the relevant code.