Develop Reference

Image iterating multiple times in popover

I have a div with multiple images that when hovered on the images triggers a popover that contains the image that was hovered on and It kinda works. The problem is when I hover on another image It appends the new hovered image to the popover but it doesn't remove the previous hovered image. I tried to remove the previous image in popover but whenever I do it breaks the program and the hovered image doesn't show on the popover anymore. Where did I go wrong? How can I make the specific hovered image only show on the triggered popover?
I commented out what I tried to remove the previous image before appending the new image so that you guys can look at the current iterating image without the program breaking.
UPDATE:
After I remove the previously appended image the program doesn't show the image in the popover but when you inspect the element it shows that the image is there for some reason it is not visible in the popover though. Confusing..??
function appendImg() {
const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
$('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
if ($(this).attr('class') == 'imgWrap') {
const currnetInfoBarElementView = $(this).attr('id')
let source = $("#" + currnetInfoBarElementView).children()
//This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
//$('.infoBarElementContentView').remove()
$('.infoBarPopoverContent').append('<div class="infoBarElementContentView"></div>')
source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
$('.dataDisplayClone img').css({
'width': '100%',
'height': '100%'
})
return $('.infoBarPopoverContent').html();
}
}
}
function addEvent() {
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>

You have to empty .infoBarPopoverContent before you add the current image to it.
So this:
$('.infoBarPopoverContent')
.append('<div class="infoBarElementContentView"></div>')
becomes this:
$('.infoBarPopoverContent')
.empty()
.append('<div class="infoBarElementContentView"></div>')
See it working:
function appendImg() {
const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
$('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
if ($(this).attr('class') == 'imgWrap') {
const currnetInfoBarElementView = $(this).attr('id')
let source = $("#" + currnetInfoBarElementView).children()
//This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
//$('.infoBarElementContentView').remove()
$('.infoBarPopoverContent').empty().append('<div class="infoBarElementContentView"></div>')
source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
$('.dataDisplayClone img').css({
'width': '100%',
'height': '100%'
})
return $('.infoBarPopoverContent').html();
}
}
}
function addEvent() {
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>

Dynamic aspect ratio with changing SRC

My problem is that after selecting an initial image file and trying to select another, the aspect ratio does not change in relation to selected image but keeps the aspect ratio of the image selected first.
I want the aspect ratio to dynamically change in relation the the natural aspect ratio of the selected image. I can't figure out a way to fix it without losing the resizable part.
var test = document.getElementById('test');
var draggable = document.getElementById('draggable');
var resizable = document.getElementById('resizable');
var img = document.querySelector('img');
img.onload = function() {
$(function() {
$("#draggable").draggable({});
$("#resizable").resizable({
aspectRatio: img.naturalWidth / img.naturalHeight,
maxHeight: 200,
maxWidth: 200,
minHeight: 20,
minWidth: 20,
});
});
}
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
img.src = URL.createObjectURL(this.files[0]);
}
});
});
#draggable {
display: inline-block;
margin: 0px;
}
#resizable {
position: absolute;
cursor: move;
margin: 0px;
max-height: 200px;
max-width: 200px;
box-sizing: border-box;
border: none;
}
.test {
width: 300px;
height: 300px;
overflow: hidden;
background-color: beige;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='file' />
<div id='test' class='test'>
<div id='draggable' class="ui-widget-content">
<img id="resizable" class="ui-widget-content">
</div>
</div>

The issue is because the resizable widget only reads the dimensions of the content when it's instantiated, not when that content changes.
To fix this you need to check if the resizable widget has already been instantiated on the element and destroy it, along with removing any inline styling which the widget added to the element. Then you can change the image and reinitialise the widget again.
Also note that if you're using jQuery for the dragging and resizing, it would make sense to make the most of the convenience it offers for selecting the elements in the DOM and adding event handlers, too. Try this:
$(function() {
var $draggable = $('#draggable');
var $resizable = $('#resizable');
$('input[type="file"]').on('change', function() {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$draggable.draggable();
if ($resizable.hasClass('ui-resizable'))
$resizable.resizable('destroy').removeAttr('style');
$resizable.prop('src', e.target.result).resizable({
maxHeight: 200,
maxWidth: 200,
minHeight: 20,
minWidth: 20,
});
}
reader.readAsDataURL(this.files[0]);
}
});
});
#draggable {
display: inline-block;
margin: 0px;
}
#resizable {
position: absolute;
cursor: move;
margin: 0px;
max-height: 200px;
max-width: 200px;
box-sizing: border-box;
border: none;
}
.test {
width: 300px;
height: 300px;
overflow: hidden;
background-color: beige;
}
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type='file' />
<div id='test' class='test'>
<div id='draggable' class="ui-widget-content">
<img id="resizable" class="ui-widget-content">
</div>
</div>

jQuery flip plugin switch function fails on switch

I have a piece of code where I have two buttons and when I press one button I want a div to flip on the y-axis and when I press the other button I want the same div to flip on the x-axis. this works just fine when I use the button for the y-axis even if the previous flip was on the x-axis. But when I want to switch from the y-axis to the x-axis I need to press the x button twice because the first time nothing happens.
So desired behavior is:
click y button flip the div on the y-axis.
click x button flip the div on the x-axis.
current behavior is:
click y button div flips on the y-axis.
click x button nothing happens
click x button again div flips on the x-axis.
I have no idea what the problem is, this is the best i got so far.
All help is appreciated.
var ax = 'x';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'x'
});
$('#left').click(function() {
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>

You over-complicated the problem. Here is a solution inspired by the documentation. All you have to do is to call flip to change the axis on click on he buttons, and to listen on flip:change event which is fired every time you call flip to change the orientation in order to actually flip it.
// Configure it to be manually flipped
$("#card").flip({
trigger: 'manual'
});
// Change the axis
$('#left').click(function() {
$("#card").flip({
axis: 'y'
});
});
$('#right').click(function() {
$("#card").flip({
axis: 'x'
});
});
// Toggle it on change
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>

Here you go with a solution
var ax = 'x';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'x'
});
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
$('#left').click(function() {
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>
You should keep the flip:change outside the click event.
Hope this will help you.

You ended up binding the flip:change event multiple times with each click. That caused x to flip twice when clicked after Y was clicked twice. Hence it looks like nothing is happening.
You can see that happening when adding a debugger; at the start of $('#right').click(function() { and using the console to debug your code.
Anyway, adding the event binding ones only fixes it as that is all you need.
Removing all instance of $("#card").on('flip:change', function() { in your code and only adding it one time, fixes the problem.
In this example I added it at the bottom of your code.
var ax = 'y';
$(document).ready(function() {
$('#card').flip({
trigger: 'manual',
axis: 'y'
});
$('#left').click(function() {
//debugger;
if (ax != 'y') {
$("#card").flip({
axis: 'y'
});
ax = 'y';
} else {
$("#card").flip('toggle');
}
});
$('#right').click(function() {
//debugger;
if (ax != 'x') {
$("#card").flip({
axis: 'x'
});
ax = 'x';
} else {
$("#card").flip('toggle');
}
});
// Only bind ones.
$("#card").on('flip:change', function() {
$('#card').flip('toggle');
});
});
#card {
position: fixed;
left: 50px;
top: 50px;
width: 200px;
height: 200px;
}
.front {
width: 100%;
height: 100%;
background-color: red;
}
.back {
width: 100%;
height: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<button id="left">y</button>
<button id="right">x</button>
<div id="card">
<div class="front">Front content</div>
<div class="back">Back content</div>
</div>

How can I use easing effects to this div that expands onclick, as well as fade in effects on the elements inside it?

I have two problems,
1) I have a div that expands onclick, (.panel) how can I use easing on it so it opens in a smooth way?
2) how can I make the ul list within the expanding div (.panel) fade in a few mili seconds after the div has expanded?
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
}
.panel ul {
margin-left:10%;
color:white;
}
.mores {
width: 210px;
height: 170px;
overflow: hidden;
}
here is the fiddle JSFiddle
Many Thanks

I tried something, tell me if that's what you expected. http://jsfiddle.net/z2p0r5s9/11/
<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
<ul style="display:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
CSS
.panel {
width: 30px;
height: 21px;
overflow: hidden;
color:white;
background-color: grey;
transition: all 2s ease;
}
JS
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
setTimeout(function(){
$('ul').fadeIn();
},2000);
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200);
});
});

is this what you pretend?
var next_move = "expand";
$(document).ready(function () {
$(".panel").click(function () {
console.log(next_move);
var css = {};
if (next_move == "expand") {
css = {
width: '210px',
height: '170px'
};
next_move = "shrink";
} else {
css = {
width: '30px',
height: '20px'
};
console.log('hi');
next_move = "expand";
}
$(this).animate(css, 200, function(){
setTimeout(function() {
$(".options").fadeIn()
}, 75);
});
});
});
http://jsfiddle.net/lycrest15/z2p0r5s9/2/
It is using default easing but you can change it to the proper way you want. Just see documentation here: http://api.jquery.com/animate/

How to Animate (slide) content adjacent to content with jquery toggle()

I am setting up a page which the user can hide the side bar if they wish. I am trying to use the jqeuryui to do this with the following js code
// TOGGLE JS
$(function () {
function runEffect() {
var options = {};
$("#effect").toggle('slide', options, 500);
};
$("#button").click(function () {
runEffect();
return false;
});
});
I have this working in a JSFiddle here http://jsfiddle.net/jwg4U/
However, when you look at the JSFiddle you will notice that my main content area which is a DIV called #content does not animate, it just jumps into place when I toggle the sidebar.
I would like the content div to also slide into place seamlessly and follow the toggle as it if it attached to it.
I have looked at jquery animate, but not sure how to implement this with the slide?
A Second part I am struggling with is how to change the button text when the sidebar is closed to say "Show Sidebar" - Weather it is open or closed right now it just says "Hide Sidebar"
Looking for some help
Thanks

See this updated fiddle : http://jsfiddle.net/jwg4U/23/
HTML:
<div id="container" style="width:800px">
<div id="header">
<h1>HEADER</h1>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<div id="menu" style="background-color:#FFD700;height:300px;width:100px;float:left;">
<h3>SIDEBAR</h3>
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;">Main Content goes here</div>
</div>
Hide Sidebar
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
FOOTER</div>
</div>
​
JS:
// TOGGLE JS
$(function() {
var i = 0;
function runEffect() {
var options = {};
if (i === 0) {
i = 1;
$(".toggler").animate({
left: -100
}, {
duration: 500
});
}
else {
i = 0;
$(".toggler").animate({
left: 0
}, {
duration: 500
});
}
}
$("#button").click(function() {
if (i === 0) {
$(this).html("Show Sidebar");
}
else {
$(this).html("Hide Sidebar");
}
runEffect();
return false;
});
});
// TABS JS
$(function() {
$("#tabs").tabs();
});​
CSS:
.toggler {
float: left;
position: relative;
}
#button {
padding: .5em 1em;
text-decoration: none;
}
#effect {
position: relative;
float: left;
}
#content{
position: relative;
float: left;
width: 500px;
}
#button{
float: left;
clear: both;
}
#header{
background-color: #000;
color: #FFF;
}​

The jsfiddle for the complete answer : http://jsfiddle.net/jwg4U/22/
$('#effect').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 500,
specialEasing: {
width: 'linear',
height: 'linear'
},
complete: function() {
$("#content").animate(
{ left: '+=100px' },
60,
'easeInQuad',
function ()
{
if(isOpen)
{
isOpen=false;
$("#button").html('Show Sidebar');
}
else
{
isOpen=true;
$("#button").html('Hide Sidebar');
}
});
}
});