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>

why is resizable when applied simultaneously with draggable on topleft and bottomleft giving me an unwanted behaviour

I want to apply resizable simultaneously with draggable for a div and it should be contained within its parent div but on dragging towards the left or top corner and resizing it from north-west,west,south-west handles makes the div widthless..
<!DOCTYPE html>
<html>
<head>
<title>Resizable</title>
<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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type = "text/css">
#primary
{
width : 30rem;
height : 30rem;
background-color:green;
margin: auto;
}
#draggable{
width: 15rem;
height: 15rem;
background-color: yellow;
}
.ui-widget-content{
background: yellow;
}
</style>
</head>
<body>
<div id = "primary">
<div id= "draggable" class="ui-widget-content">
</div>
</div>
<script >
w= parseInt($('#draggable').css('width'),10);
h= parseInt($('#draggable').css('height'),10);
$( function() {
$( "#draggable" ).resizable( {handles: 'ne , nw ,se,
sw , n ,e ,s,w', minWidth : w, minHeight : h ,containment:"parent"
}).draggable({containment: "parent"});
} );
</script>
</body>
</html>

The trick is to set the primary div position: relative and the draggable div position: absolute
$(document).ready(function(){
let w = parseInt($('#draggable').width());
let h = parseInt($('#draggable').height());
$( function() {
$( "#draggable" ).resizable(
{
handles: 'n, e, s, w, ne, se, sw, nw',
minWidth : w,
minHeight : h,
containment:"#primary"
}).draggable(
{
containment: "#primary",
});
});
});
#primary
{
width: 30rem;
height: 30rem;
background-color: green;
margin: auto;
position: relative !important;
}
#draggable{
width: 15rem;
height: 15rem;
background-color: yellow;
position: absolute !important;
}
.ui-widget-content{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id = "primary">
<div id= "draggable" class="ui-widget-content">
</div>
</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>

Fancybox caption location

I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?
What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>
<footer>
<section class="socialmedia">
<a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>
I am using the defaults

Of course, it is too late but maybe help someone.
Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.
JS (jquery):
$('[data-fancybox="gallery"]').fancybox({
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
CSS:
.fancybox-caption.caption--image {
width: 100%;
bottom: 0;
padding: 10px;
color: #fff;
transform: translateY(100%);
}
.fancybox-inner > .fancybox-caption {
display: none;
}

My solution:
CSS:
.fancybox-caption {
display: block;
margin-right: auto;
margin-left: auto;
padding: 0;
bottom: 13px;
text-align: right;
}
.fancybox-caption:before {
background: 0 0;
}
.fancybox-caption:after {
border-bottom: 0;
}
.fancybox-caption.none {
display: none;
}
.fancybox-caption>span {
background-color: #343434;
color: #B6B6B6;
display: inline-block;
padding: 5px 15px;
}
Jquery:
$('[data-fancybox="images"]').fancybox({
idleTime: false,
infobar: false,
beforeShow: function() {
$(".fancybox-caption").addClass('none');
},
afterShow: function() {
$(".fancybox-caption").wrapInner("<span/>");
var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
$(".fancybox-caption").css("width", imageWidth);
setTimeout($(".fancybox-caption").removeClass('none'), 200);
}
});

This maybe can help you.
$('[data-fancybox]').fancybox({
protect: true,
afterShow: function() {
var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
$(".fancybox-caption").css("width", imageWidth);
}
});

Highlight words from multiple input fields simultaneously

I have a problem i'm working on, my program will highlight words if typed in an input field. It wont highlight words from both.(Example Input1 type "Test1", Input2 type "Test2") is there a way to keep the highlighted words active from one field when the user switches to another?
JSBIN: http://jsbin.com/xovisayaso/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">
</body>
</html>
<script
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function(){
$(this).removeClass('active');
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');}});});
</script>
<style>#list_input > div { border:4px solid; padding: 1em; margin: 1em auto; }
#listArray { overflow: auto; }
#listArray span { display: block; float: left; clear: left; padding:4px; margin:1px; }
#listArray span.active { background: green; }
}
</style>

You can achieve the desired effect by removing the active class whenever the text changes and then checking against both inputs:
$("#userArray, #userArray2").on('change keyup paste', function() {
$('#listArray span').removeClass('active');
$('input').each(function() {
var input = $(this).val().toLowerCase().split(" ");
$('#listArray span').each(function() {
if ($.inArray($(this).text().toLowerCase(), input) != -1) {
$(this).addClass('active');
}
});
});
});
#list_input > div {
border: 4px solid;
padding: 1em;
margin: 1em auto;
}
#listArray {
overflow: auto;
}
#listArray span {
display: block;
float: left;
clear: left;
padding: 4px;
margin: 1px;
}
#listArray span.active {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="listArray">
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
<input type="text" class="form-control" id="userArray">
<input type="text" class="form-control" id="userArray2">

Try this code :
$("#userArray, #userArray2").on('change keyup paste', function() {
var input = $("input").map(function(){return $(this).val().toLowerCase();}).get();
$('#listArray span').each(function(){
if( $.inArray( $(this).text().toLowerCase(), input ) != -1 ) {
$(this).addClass('active');
}
else
$(this).removeClass('active');
});
});
Reason : In your code you are only getting single value at a time to compare, rather the both textbox's values !!!