I'm trying make a drag and drop component, but when dragging an opacity gradient is automatically applied.
I performed several tests and I noticed that when the component less than 300px approximately, only an opacity is inserted, not perfect, but it'll do. However, when it exceeds this size (300px), a gradient is applied in addition opacity, making the user experience bad.
how to resolve this?
I'm trying remove opacity gradient with CSS and others.
I expected remove opacity gradient on drag.
**Sorry, i'm using google translate
const columns = document.querySelectorAll(".column");
document.addEventListener("dragstart", (e) => {
e.target.classList.add("dragging");
});
document.addEventListener("dragend", (e) => {
e.target.classList.remove("dragging");
});
columns.forEach((item) => {
item.addEventListener("dragover", (e) => {
const dragging = document.querySelector(".dragging");
const applyAfter = getNewPosition(item, e.clientY);
if (applyAfter) {
applyAfter.insertAdjacentElement("afterend", dragging);
} else {
item.prepend(dragging);
}
});
});
function getNewPosition(column, posY) {
const cards = column.querySelectorAll(".item:not(.dragging)");
let result;
for (let refer_card of cards) {
const box = refer_card.getBoundingClientRect();
const boxCenterY = box.y + box.height / 2;
if (posY >= boxCenterY) result = refer_card;
}
return result;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins';
font-size: 30px;
}
.kanban {
display: flex;
justify-content: center;
min-height: 400px;
gap: 10px;
padding: 10px;
}
.column {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
background-color: cadetblue;
min-width: 500px;
border-radius: 5px;
}
.item {
background-color: white;
padding: 10px;
border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kanban</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="kanban">
<div class="column">
<div class="item" draggable="true">Card 01</div>
<div class="item" draggable="true">Card 02</div>
</div>
<div class="column">
<div class="item" draggable="true">Card 03</div>
<div class="item" draggable="true">Card 04</div>
</div>
<div class="column">
<div class="item" draggable="true">Card 05</div>
<div class="item" draggable="true">Card 06</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Related
I need to make an invisible background color that appears after 10 seconds of losing a game. In the finish, I also should make a button "Restart" that restarts the game.
Please, help me!
I have found some information about restarting on the internet, but I couldn't understand most of this, so please may you explain to me a very simple method? I am just a student, it totally fits me more than difficult theories.
const width = $(document).width() - 200 // ширина окна html 1366
const height = $(document).height() - 200 // высота окна html 600
let timer = 10
let points = 0
let isClick = false
let intervalID
$('.item-1').click(function () {
setRandomPosition()
$('.points').text(points)
points += 10
if(points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
let intervalID = setInterval(function() {
if(timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
}, 1000)
function setRandomPosition() {
$('.item-1').css({
'top' : Math.floor(Math.random() * height),
'left' : Math.floor(Math.random() * width)
})
}
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
It's a bit hard to know how you want the game to reset since you haven't include information about how it should reset, but here is an example:
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
Also I've moved your code a bit around, but nothing major.
Demo
const width = $(document).width(); - 200 // ширина окна html 1366
const height = $(document).height(); - 200 // высота окна html 600
let timer = 10;
let points = 0;
let isClick = false;
let intervalID;
$('.item-1').click(function() {
setRandomPosition()
points += 10
$('.points').text(points)
if (points == 100) {
endGame('Вы выиграли')
clearInterval(intervalID)
}
})
function _timer() {
$('.end').css('display', 'none')
if (timer > 0) {
timer--
$('.timer').text(timer)
} else {
endGame('Вы проиграли')
}
};
intervalID = setInterval(_timer, 1000)
function setRandomPosition() {
$('.item-1').css({
'top': Math.floor(Math.random() * height),
'left': Math.floor(Math.random() * width)
})
}
$('.end h1').click(function() {
points = 0;
$('.points').text(points);
timer = 10;
intervalID = setInterval(_timer, 1000)
});
function endGame(endText) {
$('.end').css('display', 'flex')
$('h1').text(endText)
}
* {
margin: 0;
padding: 0;
}
.item {
width: 200px;
aspect-ratio: 1/1;
background-color: lightpink;
position: absolute;
}
.timer {
font-size: 65px;
text-align: center;
position: absolute;
left: 0;
right: 0;
z-index: 1;
}
.points {
font-size: 65px;
position: absolute;
right: 20px;
z-index: 1;
}
.end {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.497);
align-items: center;
justify-content: center;
}
.restart {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="item item-1"></div>
<p class="timer">10</p>
<p class="points">0</p>
<div class="end">
<h1></h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</body>
</html>
I have a timer that sits ontop of an image. The timer represents a countdown to a specific date. The problem is when the browser is resized the timer will hold true but the banner will stretch etc. I have noticed if I set the website to width 130% it will work flawlessly. The only issue is the horizonal scrollbar upon launch will default to the left. I am trying to have it default to the center.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name= viewport content= width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
<title>Document</title>
<style>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght#1,800&family=Oswald&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Rowdies:wght#300;400;700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Festive&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #00628c;
width: 100%;
min-height: 100vh;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.remaining-time {
display: flex;
align-items: center;
position: absolute;
top: var(--time-unit-wrapper-top);
left: var(--time-unit-wrapper-left);
}
.remaining-time .separator {
padding: var(--time-unit-seperator-padding);
color: #FFFFFF00;
font-size: 12px;
}
.remaining-time .days,
.remaining-time .hours,
.remaining-time .minutes,
.remaining-time .seconds {
display: flex;
justify-content: center;
align-items: center;
width: var(--time-unit-width);
background-color: var(--time-unit-background-color);
color: var(--time-unit-color);
font-size: var(--time-unit-font-size);
font-family: var(--time-unit-font-family);
border-radius: 25%;
}
:root {
--time-unit-wrapper-top: 27.5%;
--time-unit-wrapper-left: 44%;
--time-unit-seperator-padding: 0 8px;
--time-unit-width: 20px;
--time-unit-background-color: #FFFFFF00;
--time-unit-color: #E5D5B5;
--time-unit-border-radius: 4px;
--time-unit-font-size: 13px;
--time-unit-font-family: 'Exo';
}
</style>
</head>
<body>
<div class="hpf_body">
<img src="/CServer/HomepageFeed/7D30D9006D4E4156BE0F54B95A6CFB69/LMSNEW.gif" alt="banner" width="500%" style="width: 100%;">
<div class="remaining-time">
<span class="days"></span>
<span class="separator">:</span>
<span class="hours"></span>
<span class="separator">:</span>
<span class="minutes"></span>
<span class="separator">:</span>
<span class="seconds"></span>
</div>
</div>
</header>
<script>
let intervalHandler;
// (year, months, date, hours, minutes, seconds)
const startTime = new Date(2022, 1, 9, 10, 45, 0);
const endTime = new Date(2022, 7, 12, 0, 0, 0);
const header = document.querySelector('.header');
const remainingDaysSpan = document.querySelector('.remaining-time .days');
const remainingHoursSpan = document.querySelector('.remaining-time .hours');
const remainingMinutesSpan = document.querySelector('.remaining-time .minutes');
const remainingSecondsSpan = document.querySelector('.remaining-time .seconds');
const addLeadingZero = str => {
return (str.length == 1) ? '0' + str : str;
}
const updateRemainingTime = () => {
const curTime = new Date();
const timeDffSecs = (endTime - curTime) / 1000;
if(timeDffSecs <= 0) {
clearInterval(intervalHandler);
return;
}
const remainingSeconds = timeDffSecs;
const remainingMinutes = remainingSeconds / 60;
const remainingHours = remainingMinutes / 60;
const remainingDays = remainingHours / 24;
remainingDaysSpan.innerText = addLeadingZero(Math.floor(remainingDays).toString());
remainingHoursSpan.innerText = addLeadingZero(Math.floor(remainingHours % 24).toString());
remainingMinutesSpan.innerText = addLeadingZero(Math.floor(remainingMinutes % 60).toString());
remainingSecondsSpan.innerText = addLeadingZero(Math.floor(remainingSeconds % 60).toString());
}
intervalHandler = setInterval(() => {
updateRemainingTime();
}, 100);
</script>
</body>
</html>
Is the each() method capable of incrementing upon each instance of the element?
In addition, how do I make it so that each element gets it's own background color corresponding with the array, with $('colorbox')[0] getting 'yellow', $('colorbox')[1] getting 'blue'..ect. I can't access the property with $('.colorbox')[k].css() or document.querySelector('.colorbox')[k].style.backgroundColor=""; because I get an error. Help would be appreciated.
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function () {
let k = 0;
$(this).css("background-color", `${test[k]}`);
k++;
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
You are very close! You're resetting k each time the loop iterates, so you just need to put let k = 0 outside the .each(). But even better than using your own counter, use the internal index you get with the each method, like so:
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
$('.colorbox').each(function (index) {
$(this).css("background-color", `${test[index]}`);
})
You mentioned using querySelector and you're right, you definitely don't need jquery for this:
const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor=test[i])
Here's a snippet showing that:
let test = ['yellow', 'blue', 'purple', 'orange', 'red', 'green'];
/*
$('.colorbox').each(function (index) {
$(this).css("background-color", `${test[index]}`);
})
*/
const boxes = document.querySelectorAll('.colorbox')
boxes.forEach((box, i) => box.style.backgroundColor = test[i])
.colorbox {
display: flex;
height: 200px;
width: 200px;
border: 1px solid black;
box-sizing: border-box;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
<div class="container">
<div class="container-box">
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
<div class="colorbox"></div>
</div>
</div>
For the past week I have been trying to create a website which is 100vh & vw where the images swap when you move the cursor from left to right.
I have almost no prior coding skills but I managed to get it working using a script called swinger.js So far so good.
But now I want to add an image caption in the header that shows the right caption with the right image. But I can't seem to figure out how to do this...
Any help would be appreciated!
Thanks,
Here is the code so far
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
i have added an attribute title to your html (see string of image)
and I have lightly modified yout swinger code to select the right title and display in header
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$("header").text($(img).attr("title"));
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” title="image left"/>
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image center"/>
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image right"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
I made a page with Bootstrap 4, where I have an options-menu at the left and a container-div with a row and some cols.
To show the options-menu, the container-div is made smaller by changing the "left" value. The arrangement of the cols in the container
then should change - but it only changes, when the browser window changes its size.
Is there a way to make the cols rearrange when the size of the container changes (without changing the browser size)?
<!DOCTYPE html>
<html lang="de">
<head>
<title>Grid-Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$("#tree-toggle").click(function(e) {
e.preventDefault();
treeMenu.toggle(); // options
});
//
var treeMenu = {
visible: true, // options
// show options
show: function() {
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
},
// toggle options
toggle: function() {
if(this.visible) {
this.hide();
} else
this.show();
},
};
});
</script>
</head>
<body>
<nav role="navigation" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="margin-bottom:5px; padding:0 0.5rem 0 0">
<a id="tree-toggle" title="Anlagenauswahl" class="btn btn-outline-secondary" style="display:flex; align-content:flex-start" href="">Show options</a>
<div id="divCustom" style="position: fixed; top: 50px; left: 0; right: 0; bottom: 0; padding-top: 5px;">
<div id="divTree" class="bg-light resizable ui-resizable" style="opacity: 0.8 !important; position: absolute; overflow-x: hidden; top: 10px; bottom: 10px; left: 0; padding: 5px; border-width: 1px 1px 1px 0; border-color: #e0e0e0; border-style: solid; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); border-top-right-radius: 4px; border-bottom-right-radius: 4px; z-index: 1010; width:300px"></div>
<div id="client" style="position: absolute; overflow-y: auto; top: 0; bottom: 0; right: 5px; padding-top: 5px; left:305px">
<div id="clientContent" class="container-fluid pl-0 pr-0" style="margin:0; background-color:#f0f0f0">
<div class="row">
<div class="col-lg-6 col-xl-4">Col 1</div>
<div class="col-lg-6 col-xl-4">Col 2</div>
<div class="col-lg-6 col-xl-4">Col 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
The breakpoints in Bootstrap use #media queries which are based on viewport width, not parent/container width.
The only way to do this would be to conditionally add the appropriate col- class in the jQuery logic. For example,
// show options
show: function() {
$('#divCustom').find('.col-lg').removeClass('col');
$('#divCustom').animate({left: '0'}, 500); // divCustom verschieben
this.visible = true;
},
// hide options
hide: function() {
$('#divCustom').find('.col-lg').addClass('col');
var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
$('#divCustom').animate({left: px}, 500);
this.visible = false;
}
Demo: https://www.codeply.com/go/sMfAWKuX1T