We Keep Coding

Need the image to be in the same position in both divs

I need the image in the both divs below to be in the same position even if the other div changes height or width. I have tried calculating top and left to % from px but still it is not working. I have also tried calculating the % of how big or small other div is and adding or removing the top and left to the image in other div and still no luck.
To check the issue, drag the image around inside the first div and click on submit. Now the image inside the bottom div should be in the same position as the above div, same top and left distance.
Please help. Thanks.
Here is the fiddle : https://jsfiddle.net/kashyap_s/gLdt62nh
var zoomLevel = 1;
$("#myimage").draggable({
start: function() {
},
stop: function() {
}
});
$('#save').click(function() {
var topcss = $('#myimage').css('top');
var leftcss = $('#myimage').css('left');
var transformcss = zoomLevel;
topcss = topcss.replace('px', '');
leftcss = leftcss.replace('px', '');
topcss = parseInt(topcss);
leftcss = parseInt(leftcss);
var parentWidth = $('#dragDiv').outerWidth()
var parentHeight = $('#dragDiv').outerHeight()
console.log('leftcss', leftcss, 'width', parentWidth)
console.log('topcss', topcss, 'height', parentHeight)
var percentLeft = leftcss / parentWidth * 100;
var percentTop = topcss / parentHeight * 100;
console.log('percentLeft', percentLeft, 'percentTop', percentTop)
transformcss = parseFloat(transformcss).toFixed(2);
var result = {
"top": topcss,
"left": leftcss,
'percentTop': percentTop,
'percentLeft': percentLeft,
'parentWidth': parentWidth,
'parentHeight': parentHeight,
"transform": "scale(" + transformcss + ")"
};
var output = JSON.stringify(result);
console.log('output', output)
$("#newimg").css({
'left': leftcss
});
$("#newimg").css({
'top': topcss
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="agent.png">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="agent.png" />
</div>

$(function() {
$("#logo1").draggable({
containment: "parent",
drag: function() {
}
});
});
function setpos() {
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w - image1_w;
var div2_aw = div2_w - image2_w;
var div1_ah = div1_h - image1_h;
var div2_ah = div2_h - image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw) / parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah) / parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos) / ratio_w;
var div2_nh = parseFloat(yPos) / ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({
'left': div2_nw,
'top': div2_nh
});
}
.div1 {
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2 {
width: 651px;
height: 431px;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX">
</div>
<div id="posA">
</div>
<div id="posz">
</div>
<div id="posZ1">
</div>
Solved! check this out
HTML
<p>Drag my logo.</p>
<div class="div1">
<img src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" style=" position: relative; left: 0px; top: 0px;" width="100" id="logo1">
</div>
<br>
<div class="div2">
<img style="position: relative;left: 0px;top: 0px" src="https://smteg.sefion.com/perfectmetal/assets/ui/sefion.jpg" width="100" id="logo2">
</div>
<br>
<button onclick="setpos();">
Save
</button>
<div id="posX"></div>
<div id="posA"></div>
JS CODE
$( function() {
$( "#logo1" ).draggable(
{
containment: "parent",
drag: function() {
}
}
);
} );
function setpos()
{
var image1_w = $("#logo1").width();
var div1_w = $(".div1").width();
var image2_w = $("#logo2").width();
var div2_w = $(".div2").width();
var image1_h = $("#logo1").height();
var div1_h = $(".div1").height();
var image2_h = $("#logo2").height();
var div2_h = $(".div2").height();
var div1_aw = div1_w-image1_w;
var div2_aw = div2_w-image2_w;
var div1_ah = div1_h-image1_h;
var div2_ah = div2_h-image2_h;
var div
var xPos = $('#logo1').css('left');
var yPos = $('#logo1').css('top');
var ratio_w = parseFloat(div1_aw)/parseFloat(div2_aw);
var ratio_h = parseFloat(div1_ah)/parseFloat(div2_ah);
//let act = 1.39;
var div2_nw = parseFloat(xPos)/ratio_w;
var div2_nh = parseFloat(yPos)/ratio_h;
$("#posX").text('Div left:' + div2_nw);
$("#posA").text('Div Top:' + div2_nh);
$("#logo2").css({ 'left' : div2_nw, 'top' : div2_nh});
}
CSS
.div1{
width: 497px;
height: 329px;
border: 1px solid black;
}
.div2{
width: 651px;
height: 431px;
border: 1px solid black;
}

For your newimg, the parent must have a position that is relative. This way, the absolute positioning will be relative to the parent and not the body.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Consider the following code.
$(function() {
var zoomLevel = parseFloat(1 - ($("#dragDiv").outerWidth() / $("#bigimg").outerWidth()).toFixed(2));
function log(str) {
if ($(".log").length) {
$(".log").html(str);
} else {
$("<div>", {
class: "log"
}).html(str).appendTo("body");
}
}
function getPos(el) {
var par = $(el).parent();
var pos = {
top: parseInt($(el).css("top")),
left: parseInt($(el).css("left")),
zoom: "scale(" + (1 + zoomLevel) + ")",
parWidth: par.outerWidth(),
parHeight: par.outerHeight()
};
pos['perLeft'] = parseFloat((pos.left / pos.parWidth).toFixed(2)) * 100;
pos['perTop'] = parseFloat((pos.top / pos.parHeight).toFixed(2)) * 100;
return pos;
}
$("#myimage").draggable({
containment: "parent",
drag: function(e, ui) {
log("Left: " + ui.position.left + ", Top: " + ui.position.top);
},
start: function() {
// coordinates('#myimage');
},
stop: function() {
// coordinates('#myimage');
var p = getPos(this);
$(this).attr("title", JSON.stringify(p));
}
});
$('#save').click(function() {
var result = getPos($("#myimage"));
var output = JSON.stringify(result);
var nLeft = Math.round(result.perLeft * (1 + zoomLevel)) + "%";
var nTop = Math.round(result.perTop * (1 + zoomLevel)) + "%"
console.log(output, nLeft, nTop);
$("#newimg").css({
left: nLeft,
top: nTop
});
var p = getPos($("#newimg"));
$("#newimg").attr("title", JSON.stringify(p));
});
});
.transperentimage {
width: 497px;
height: 329px;
border: 1px solid black;
margin: 0 auto;
}
#bigimg {
width: 651px;
height: 431px;
border: 1px solid black;
margin: 0 auto;
position: relative;
}
img {
border: 2px solid red;
padding: 3px;
width: auto;
height: auto;
cursor: move;
/* max-width: 100%; */
max-height: 180px;
}
#newimg {
position: absolute;
max-height: 180px;
width: auto!important;
height: auto!important;
max-width: 100%!important;
}
.log {
font-size: 11px;
font-family: "Arial";
position: absolute;
top: 3px;
left: 3px
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="transperentimage" id="dragDiv">
<img id="myimage" src="https://i.imgur.com/4ILisqH.jpg">
</div>
<button id="save">Save</button>
<div id="bigimg">
<img id="newimg" src="https://i.imgur.com/4ILisqH.jpg" />
</div>
See More: https://www.w3schools.com/css/css_positioning.asp
Updated
Looking at it further, I am guessing that you might be trying to reposition the bigimg in relationship to myimage position. This requires scaling the percentage.
For example, if we move myimage to the far left, it will be at left: 247, and this is roughly 49% of 499px. 49% of 653 is around 319, and this would not place the image where we want it. We want it at 401.
bigimg is about 24% larger than dragDiv, so we need to scale our percentage. 49 * 1.24 = 60.74, round up to 61. 653 * .61 = 398.33 so better yet not perfect.

jQuery Draggable with Bootstrap Tooltip TypeError: e.$element is null

I have a draggable element (see the code snippet and click on picture to add pins) which shows a tooltip on mouseover and deletes it on mouseout.
The below code throws tens of errors "TypeError: e.$element is null" in Firefox or "Uncaught TypeError: Cannot read property 'trigger' of null" in Chrome as soon as I start dragging the pin element.
I tried:
$('.tooltip').remove();
$('.tooltip').tooltip('destroy');
$('.pin').tooltip('destroy');
but none of these solve that.
How can I stop the tooltip errors when dragging the element?
var pic_wrapper = $('#pic_wrapper');
var selected_picture = $('#selected_picture');
selected_picture.on('click', function(e) {
var pin = $('<div class="pin"></div>');
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
pin.uniqueId();
pic_wrapper.append(pin);
pin.css({
transform: 'translate(-50%, -50%)'
});
pin.css({
left: x,
top: y
}).show();
pin.draggable({
containment: 'parent'
});
pin.on('dragstart', function() {
pin.css({
transform: 'translate(0%, 0%)'
});
});
pin.on('dragstop', function(e, ui) {
x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
pin.css({
left: x,
top: y
});
});
});
pic_wrapper.on('mouseenter', '.pin', function(e) {
$(this).attr('title', 'tooltip text');
$(this).tooltip({
placement: function(context, source) {
return "right";
}
});
$(this).tooltip('show');
});
pic_wrapper.on('mouseout', '.pin', function(e) {
$(this).tooltip('destroy');
});
#pic_wrapper {
display: block;
position: relative;
padding: 0;
border: 1px dotted #0099ff;
}
#selected_picture {
width: 100%;
height: auto;
border: 1px solid #0099ff;
}
#selected_picture img {
width: 100%;
height: auto;
}
.pin {
display: none;
position: absolute;
padding: 0;
margin: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff4100;
cursor: pointer;
box-shadow: 0 0 0 rgba(255, 65, 0, 0.4);
animation: pulse 2s infinite;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset>
<div class="col-xs-12">
<div class="form-group">
<div id="pic_wrapper">
<div id="selected_picture">
<img src="http://www.outline-world-map.com/map-images-original/blank-thin-gray-white-world-map-b9a.png" />
</div>
</div>
</div>
</div>
</fieldset>

Try with:
$('.tooltip').tooltip('destroy').remove();
it should do the trick
I think the reason why you got this error, is that when you do the $('.tooltip').tooltip('destroy') it doesn't remove also all the events linked to the tooltip.
update: It's necessary to update also
$(this).attr('title', 'tooltip text');
with
$(this).attr('data-original-title', 'tooltip text');
otherwise it display 2 tooltip!
full JS code:
var pic_wrapper = $('#pic_wrapper');
var selected_picture = $('#selected_picture');
selected_picture.on('click', function(e) {
var pin = $('<div class="pin"></div>');
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
pin.uniqueId();
pic_wrapper.append(pin);
pin.css({
transform: 'translate(-50%, -50%)'
});
pin.css({
left: x,
top: y
}).show();
pin.draggable({
containment: 'parent'
});
pin.on('dragstart', function() {
pin.css({
transform: 'translate(0%, 0%)'
});
});
pin.on('dragstop', function(e, ui) {
x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
pin.css({
left: x,
top: y
});
});
});
pic_wrapper.on('mouseenter', '.pin', function(e) {
$(this).attr('data-original-title', 'tooltip text');
$(this).tooltip({
placement: function(context, source) {
return "right";
}
});
$(this).tooltip('show');
});
pic_wrapper.on('mouseout', '.pin', function(e)
{
$('.tooltip').tooltip('destroy').remove();
});

div position fixed re-size behaviour

I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top. The style or anything does not mention this explicitly, as it still has position:fixed but what I see is this. I tried most of the questions related to this problem in stackoverflow and other resources but nothing gave me a satisfying answer. Any help? Thanks.
$.fn.extend({
scrollTabs: function() {
var pageTop = parseFloat($(window).scrollTop());
if (elementTop < pageTop + 66) {
$(this).css({
'position': 'fixed',
'top': '66px',
'left': '0',
'right': '0',
'z-index': '9999',
'background': '#ffffff',
'width': '100%',
'padding': '20px 0',
'margin-top': '0'
});
$(this).find('#product-tabs').css({
'max-width': '1300px',
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$(this).css({
'position': 'initial',
'margin-top': '-' + elementHeight + 'px'
});
}
}
});
$(window).load(function() {
var scrollElement = $('.box-additional.box-tabs.grid12-12');
elementTop = parseFloat($(scrollElement).offset().top);
var overflowHeight = parseFloat($(window).height()) - 200;
$('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
var scrollElement = $('#firstElement');
elementHeight = parseFloat($(scrollElement).outerHeight());
var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
var newElement = $('#newElement');
$(scrollElement).css('visibility', 'hidden');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(scrollElement).after(newElement);
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
$(window).resize(function() {
var scrollElement = $('#firstElement');
elementTop = parseFloat($(scrollElement).offset().top);
elementHeight = parseFloat($(scrollElement).outerHeight());
var newElement = $('#newElement');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
.header-container {
background-color: #000;
position: fixed;
width: 100%;
z-index: 99999;
color: #fff;
}
.grid12-12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
font-size: 50px;
}
.page-content {
min-height: 1000px;
float: left;
font-size: 72px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
this is my menu
</div>
<div class="page-content">
this is my page content
<div>
<div class="box-additional box-tabs grid12-12">
this is my container
</div>

jQuery(newElement).css('margin-top', '-' + elementHeight + 'px');
to
jQuery(newElement).css('top', '-' + elementHeight + 'px');

Get the div position and add some pixel to some div - Jquery

I want to get the current top position of .top class div, then i have to add some 20px+.top into the .bottom inline style.
Ex: if .top has top:200px; the .bottom must be changed to top:220px;
funtion(){
var position = $('.top').offset();
$('.bottom').css(position)+20px;
}
.parent
{
position: relative;
}
.child
{
position: absolute;
}
.top
{
top: 100px;
right: 0px;
}
.bottom
{
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child top">Top</div>
<div class="child bottom">Bottom</div>
</div>

funtion(){
var position= $('.top').offset();
var top= position.top;
var left = position.left;
var newtop = top + 20 + "px";
var newleft = left + 20+ "px";
$('.bottom').css( {
'position': 'absolute', // if require
'left': newleft,
'top': newtop
});
}

This might do the work:
var topPosition = $('.top').offset().top;
$('.bottom').css('top',(topPosition+20)+'px');

You can use the following code snippet for this,
$( '.bottom' ).css( 'top', $('.top').css('top'));
$( '.bottom' ).css( 'top', '+=20px' );

jQuery: animated slider pager

I've set up an animated slider using jQuery:
jsFiddle demo: http://jsfiddle.net/neal_fletcher/9zRDV/
The reason being I wanted to achieve a slight overhang on the slides, i.e. while viewing slide 1 you can see some of slide 2 etc. The slider works great, perfect in fact for what I'm after, now though I'm trying to figure out if it's possible to set up a pager for this slider, the aim of which being to click on a .slide-menu-item and the slider will slide to the relevant slide, if at all possible?
One other slight problem too, is it possible to animate the slider on load? Thus, the pager will slide every 5 seconds, but you can still navigate the slider using the pager / next and previous buttons?
Any suggestions would be greatly appreciated!
HTML:
<div class="outerwrapper">
<div class="innerwrapper">
<div class="inner-slide">SLIDE 01</div>
<div class="inner-slide">SLIDE 02</div>
<div class="inner-slide">SLIDE 03</div>
<div class="inner-slide">SLIDE 04</div>
<div class="inner-slide">SLIDE 05</div>
<div class="inner-slide">SLIDE 06</div>
<div class="inner-slide">SLIDE 07</div>
</div>
</div>
<ul id="slide-menu">
<li id="one" class="slide-menu-item">01</li>
<li id="two" class="slide-menu-item">02</li>
<li id="three" class="slide-menu-item">03</li>
<li id="four" class="slide-menu-item">04</li>
<li id="five" class="slide-menu-item">05</li>
<li id="six" class="slide-menu-item">06</li>
<li id="seven" class="slide-menu-item">07</li>
</ul>
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
CSS:
.outerwrapper {
position: absolute;
left: 50%;
height: 250px;
width: 400px; margin-left: -225px;
border: 1px solid black;
overflow: hidden;
padding-left: 50px;
}
.innerwrapper {
height: 250px;
width: 4000px;
}
.inner-slide {
height: 250px;
width: 350px;
float: left;
background: silver;
}
.innerwrapper div:nth-child(odd) {
background: silver;
}
.innerwrapper div:nth-child(even) {
background: red;
}
#left, #right {
position: absolute;
cursor: pointer;
}
#left {
left: 10px; bottom: 10px;
}
#right {
right: 10px; bottom: 10px;
}
#slide-menu {
position: absolute;
top: 250px;
list-style: none;
}
.slide-menu-item {
display: inline-block;
width: 50px;
cursor: pointer;
}
jQuery:
var animating = false,
slideWidth = $('.inner-slide').width(),
$wrapper = $('.outerwrapper'),
slideIndex = 2,
slideLen = $('.inner-slide').length,
build = function() {
$firstClone = $('.inner-slide').eq(0).clone();
$secondClone = $('.inner-slide').eq(1).clone();
$preLastClone = $('.inner-slide').eq(slideLen - 2).clone();
$lastClone = $('.inner-slide').eq(slideLen - 1).clone();
$wrapper.find('.innerwrapper').append($firstClone, $secondClone).prepend($preLastClone, $lastClone);
$wrapper.animate({
scrollLeft: '+=' + slideWidth * slideIndex + 'px'
}, 0);
},
slide = function(dir, speed) {
if(!animating) {
animating = true;
dir == 'right' ? slideIndex++ : slideIndex--;
slideIndex == slideLen - 1 ? slideIndex == 0 : '';
if(slideIndex == 0 && dir == 'left') {
//if the slide is at the beginning and going left
slideIndex = slideLen + 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex--;
} else if(slideIndex == slideLen + 2 && dir == 'right') {
//if the slide is at the end and going right
slideIndex = 1;
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, 0, function() {
animating = false;
});
slideIndex++;
}
$wrapper.animate({
scrollLeft: slideIndex * slideWidth + 'px'
}, speed, function() {
animating = false;
});
}
};
$(function() {
build();
$('#right, #left').on('click', function() {
slide($(this).attr('id'), 600)
});
});

Add the slideTo function:
slideTo = function (index, speed) {
slideIndex = index+1;
$wrapper.animate(
{scrollLeft: slideIndex * slideWidth + 'px'},
speed, function () {animating = false;}
);
}
Then call it when you click one of the page buttons:
$('.slide-menu-item').click(function() {
var toSlideIndex = Math.round($(this).text());
slideTo(toSlideIndex, 600);
});
And then, to make it slide automatically every 5 seconds, add this:
setInterval(function() {slide("right", 600);}, 5000);
JSFiddle demo: http://jsfiddle.net/9zRDV/3/

for example ?
$('#yourFavouriteIdForButtonThree').click(function(){
slide('three', 600)
});