In Fancybox modal window I have Flickity carousels. On iPad, when I change the orientation, Flickity stops working properly. flickity-viewport appears as 0px. No issues on desktop window resize. Not sure how to update Flickity when the orientation changes on iPad.
https://jsfiddle.net/2zb5qesa/13/embedded/result/
$(document).ready(function() {
$('.carousel-container').each( function( i, container ) {
var $container = $( container );
// main Flickity
var $carouselMain = $container.find('.carousel-main').flickity({
imagesLoaded: true,
percentPosition: false,
pageDots: false,
adaptiveHeight: true
});
// nav Flickity
$container.find('.carousel-nav').flickity({
asNavFor: $carouselMain[0],
contain: true,
pageDots: false,
groupCells: true,
adaptiveHeight: true,
prevNextButtons: false
});
});
$("[data-fancybox]").fancybox({
idleTime : false,
smallBtn: false,
buttons : [
'close'
],
touch : {
vertical : false,
momentum : false
},
wheel : false,
afterShow: function( instance, slide ){
slide.$slide.find('.carousel-main').flickity('resize');
slide.$slide.find('.carousel-nav').flickity('resize');
}
});
});
.carousel {
background: #FAFAFA;
margin-bottom: 40px;
}
.carousel-cell {
width: 100%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.carousel-nav .carousel-cell {
height: 80px;
width: 100px;
}
.carousel-nav .carousel-cell:before {
font-size: 50px;
line-height: 80px;
}
.carousel-nav .carousel-cell.is-nav-selected {
background: #ED2;
}
.modal-window {
width: 985px;
padding: 0;
background: none;
}
.modal-window-inner {
width: 980px;
padding: 40px;
position: relative;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity#2.1.2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/flickity#2.1.2/dist/flickity.css" rel="stylesheet"/>
<a data-src="#p1" href="javascript:;" data-fancybox="gallery">MODAL 1</a>
<a data-src="#p2" href="javascript:;" data-fancybox="gallery">MODAL 2</a>
<div style="display: none;" id="p1" class="modal-window">
<div class="modal-window-inner">
<div class="carousel-container">
<div class="carousel carousel-main">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-main -->
<div class="carousel carousel-nav">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-nav -->
</div>
<!-- /.carousel-container -->
</div>
<!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->
<div style="display: none;" id="p2" class="modal-window">
<div class="modal-window-inner">
<div class="carousel-container">
<div class="carousel carousel-main">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-main -->
<div class="carousel carousel-nav">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
<!-- /.carousel-nav -->
</div>
<!-- /.carousel-container -->
</div>
<!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->
I think this is because fancybox hides content for a moment on device orientation change event, maybe try adding this for fancybox and see if helps:
onUpdate : function( instance, slide ) {
slide.$slide.find('.carousel-main').flickity('resize');
slide.$slide.find('.carousel-nav').flickity('resize');
}
Related
I did a swiper slideshow that swipes images automatically and it is working very well. but now I would like to make all the images with the information written below it to go down after doing the slideshow and appear in the form of a table. Below is my source code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/swiper.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<script type ="text/javascript" src="../js/swiper.min.js"></script>
<style type="text/css">
body
{
background: black;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container
{
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper-slide
{
background-position: center;
background-size: cover;
width: 300px;
height: 300px;
background: white;
}
.swiper-slide .imgBx{
width: 100%;
height: 200px;
overflow: hidden;
}
.swiper-slide .imgBx img{
width: 100%;
}
.swiper-slide .details{
box-sizing: border-box;
font-size: 20px;
padding: 20px;
}
.swiper-slide .imgBx h3{
margin: 0;
padding: 0;
font-size: 20px;
text-align: center;
line-height: 20px;
}
.swiper-slide .imgBx h3 span{
font-size: 16px;
color: red;
}
</style>
</head>
<body style="background: grey ;">
<div class="row" >
<div class="col-md-3 input-group input-group-sm" style="margin-left: 70%; margin-top: 10px;">
<input type="number" name="numb" class=" form-control col-sm" placeholder=" Mentors" >
<button type="submit" class="btn btn-dark acc_active">Ment</button>
</div>
</div>
<div class="row" style="margin-left: 350px; margin-top: 250px;" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="col-md-12 container d-flex">
<div class="box-1">
<div class="ping">
</div>
</div>
<div>
<a href="table.php>"> <button id="btn-go" style="width: 100px; margin-top: 0px;">
<span></span>
<span></span>
<span></span>
<span></span>
Shuffle
</button></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="imgBx">
<img src="book2.jpg">
</div>
<div class="details">
<h3>Image <span>SWE</span></h3>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<div class="box-1">
<div class="ping">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
coverflowEffect: {
rotate: 60,
stretch: 15,
depth: 190,
modifier: 3,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
});
</script>
</body>
</html>
<?php
include "header.php";
?>
<?php
include "footer.php"
?>
I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>
I am trying to implement a show/hide function on one of my web pages. basically, there is a page on my website which shows 'Jargon' and the definitions. the user clicks on the title and the definition should then be displayed.
I have tried 2 different techniques, one works but is very harsh with no transition, it is basically open or closed:
jQuery(function($){
var acc = document.getElementsByClassName("jarg-container");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
});
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
height: 4.5em;
width: 45% !important;
margin: 0 2.5% 2em;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container .jargon-desc {
height: 0;
display: none;
}
.jarg-container.active .jargon-desc{
height:100%;
display:block;
}
.jarg-container.active {
height: 100%;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.active h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<h2>Jargon</h2>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
The other I like but when one opens, they all open:
$('.jargon-header').on('click', function(){
$('.jargon-desc').toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition:all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
Ideally, I would like a combination of the 2... where all elements open individually and the use the transition effect that the second code uses...
any help combining the 2 would be amazing
To to achieve both the transition and only moving one element at a time, you can use the this keyword. When a function is called, in this case the function() inside of your click listener, it will bind this to that context. This allows you to select the element that was clicked by simply using $(this).
This may not be the most detailed explanation, so here is a bit more information on the topic.
$('.jargon-header').on('click', function() {
// Use this to select the element that was clicked
$(this)
// Then just select the next description
.next('.jargon-desc')
// And toggle the class on that description
.toggleClass('show');
});
.jargon-desc {
height: 0px;
opacity: 0;
transition: all .75s ease;
}
.jargon-desc.show {
opacity: 1;
height: 100%;
}
.jarg-container {
background: gainsboro;
box-shadow: 4px 5px 14px 1px black;
width: 45% !important;
margin: 0 2.5% 2em;
transition: all .75s ease;
}
.jarg-container h2 {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.jarg-container h2::after {
content: '\02795';
font-size: 0.5em !important;
right: 10%;
position: absolute;
}
.jarg-container.show h2::after {
content: "\2796";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
<div class="col-md-6 jarg-container">
<div class="jargon-header" href="#">
<h2>Jargon</h2>
</div>
<div class="jargon-desc">
<p>Description.</p>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
</div>
</div>
</main>
I click Click Me! to display the #formcontainer div.
I click it again to hide it, but it doesn't hide :-(
Can someone explain why?
Demo: https://jsfiddle.net/v809wxp9/
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You are not adding the class back to it when class is missing.
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You have to add Following Line in Else Condition :
$("#formcontainer").addClass('hassent');
You are only remove the class at time of click.Then else statement add with class$('#formcontainer').addClass('hassent');.Its get back with original position.
jQuery( document ).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function(){
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
}else{
$('#formcontainer').addClass('hassent');
$('#topimage').slideUp();
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner{
padding:15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size:30px;
text-transform:uppercase;
letter-spacing:3px;
}
#sub-page-banner .tog{
margin-top:0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer{
overflow:hidden;
height:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add the class you remove
Use toggle() function
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
//if ($("#formcontainer").hasClass("hassent")) {
// $('#formcontainer').removeClass('hassent');
// $('#topimage').slideDown();
// $('#formcontainer').css('height', '0');
//} else {
// $('#formcontainer').css('height', 'auto');
// }
$('#formcontainer').toggle();
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
See below code just need to addd $('#formcontainer').addClass('hassent');
jQuery(document).ready(function($) {
// Control Banner toggle on sub pages
$('#sub-page-banner .tog').click(function() {
if ($("#formcontainer").hasClass("hassent")) {
$('#formcontainer').removeClass('hassent');
$('#topimage').slideDown();
$('#formcontainer').css('height', '0');
} else {
$('#formcontainer').addClass('hassent');
$('#formcontainer').css('height', 'auto');
}
});
});
/*SUb Page Banner*/
#sub-page-banner {
padding: 15px;
background: #3887c2;
color: #fff;
cursor: pointer;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 3px;
}
#sub-page-banner .tog {
margin-top: 0px !important;
width: 100%;
font-size: 13px !important;
text-align: center;
}
#formcontainer {
overflow: hidden;
height: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contslide">
<div class="container-fluid" id="sub-page-banner">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="btn tog">Click me!</div>
</div>
</div>
</div>
</div>
<div class="container-fluid " id="formcontainer" style="background-image: url('http://placehold.it/1500x1500');">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-sm-12 topmain">
<div id="theform">
<div class="row">
<div class="col-md-12">
<h1>Hello - Test my form please :-)</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to have three columns on my page, but column2 should initially have a size of column size of 0, ie col-md-0. When the user clicks on a link in the navigation bar, I would like column2 to expand to col-md-3, and column3 should shrink to adjust.
For example, this is what I would imagine my columns' html to be when the page is loaded:
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-0">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-11">
<div class="placeholder">
</div>
</div>
</div>
</div>
The navbar could be:
<nav class="navbar navbar-inverse navbar-full">
<ul class="nav nav-stacked">
<li>
<a>Home</a>
</li>
<li>
<a>Info</a>
</li>
</ul>
</nav>
When the Info link is clicked, I would like the html to transition to:
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-3">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-8">
<div class="placeholder">
</div>
</div>
</div>
</div>
I have a vague but messy idea how this could be done with some javascript, but I've seen this kind of thing on several sites so I'm looking for the clean, recommended way of doing this, especially as I'm using bootstrap.
Because you have IDs, I assume you now the exact structure of your row.
If it is so, a solution can be based on toggleClass:
$('a:contains("Info")').on('click', function(e) {
$('#col2').toggleClass('col-md-0 col-md-3')
$('#col3').toggleClass('col-md-11 col-md-8')
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-full">
<ul class="nav nav-stacked">
<li>
<a>Home</a>
</li>
<li>
<a>Info</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar>aaaaaa</vs-navbar>
</div>
<div id="col2" class="col-md-0">
<router-outlet>bbbbbb</router-outlet>
</div>
<div id="col3" class="col-md-11">
<div class="placeholder">cccc
</div>
</div>
</div>
</div>
You can use the :target pseudo-class for this.
The :target pseudo-class is used to style an element that is the
target of an internal link in a document.
Basically you hide your column, then when the user clicks the link it will show up:
#col2{
display: none;
}
#col2:target{
display: block;
}
CODE SNIPPET:
.row {
display: flex;
}
.col {
background-color: dodgerblue;
flex: 0 0 30%;
height: 100px;
}
.col:nth-child(odd) {
background-color: gold;
}
#col2 {
display: none;
animation: open 300ms linear both;
}
#col2:target {
display: block;
}
#keyframes open {
0 {
transform: rotateX(0);
}
55% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(180deg);
}
}
Trigger Col 2
<div class="row">
<div id="col1" class="col"></div>
<div id="col2" class="col"></div>
<div id="col3" class="col"></div>
</div>
EDIT:
To change between .col-md-8 and .col-md-11, you can change the width of .col-md-8when your second column is not present, using the corresponding media query for md viewport.
#media (min-width: 992px) {
#col2 + .col-md-8 {
width: 91.66666667%;
}
#col2:target + .col-md-8 {
width: 66.66666667%;
}
}
Bootstrap demo:
div[class*="col"],
div[class^="col"] {
height: 100px;
}
#col1 {
background-color: gold;
}
#col3 {
background-color: purple;
}
#col2 {
background-color: dodgerblue;
display: none;
animation: open 300ms linear both;
}
#col2:target {
display: block;
}
#media (min-width: 992px) {
#col2 + .col-md-8 {
width: 91.66666667%;
}
#col2:target + .col-md-8 {
width: 66.66666667%;
}
}
#keyframes open {
0 {
transform: rotateX(0);
}
55% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(180deg);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Trigger Col 2
<div class="container-fluid">
<div class="row no-gutter">
<div id="col1" class="col-md-1">
<vs-navbar></vs-navbar>
</div>
<div id="col2" class="col-md-3">
<router-outlet></router-outlet>
</div>
<div id="col3" class="col-md-8">
<div class="placeholder">
</div>
</div>
</div>
</div>