We Keep Coding

Transform orgin not being implemented

Attempting to transform an images scale (zoom) BUT maintain it inside it's parents left and top div so only trying to transform it down and to the right. Setting the transform orgin does not seem to work, what am I missing?
the following code zooms the image on each button click, but pushes the left and top out of the parent div.
$('element').click(function{
$('#element').css({'transform':'scale(' + scale + ')' });
$('#element').css({'transform-orgin':'top left'});
})
<div style "max-wdith:1080px; height: 700px; overflow-x:scroll; overflow-y:scroll">
<img id="element" src=" src="https://images.techhive.com/images/article/2017/03/castle_moat-100714623-large.jpg" " class="img-flud">
</div>

You can try the below code
var x = 400 + 'px';
var y = 300 + 'px';
$('#element').css({
'transform-origin': x + ' ' + y + ' 0px',
'-webkit-transform-origin': x + ' ' + y + ' 0px'
});

Updated answer!
const btn = document.querySelector('button');
function zoomIn(e) {
const scale = 0.1;
const img = document.querySelector('#my-image');
$('#my-image').css({transformOrigin: "top left", transform: 'scale(' + scale + ')'});
}
btn.addEventListener('click', zoomIn);
div {
width: 400px;
height: 400px;
border: 1px solid black;
overflow: hidden;
float: left;
}
div > img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img id="my-image" src="https://images.techhive.com/images/article/2017/03/castle_moat-100714623-large.jpg" />
</div>
<button>Zoom In</button>

target same class different id

It seems there is a mistake in targeting the child element, it seems not to work on hover.
$(document).ready(function() {
$('.requested_user').on('mouseenter', function() {
var currentIdMouse = $(this).attr('id');
$('#' + currentIdMouse + ' .requested_user').css("text-decoration", "underline");
$('#' + currentIdMouse + ' .requested_user').css("color", "blue");
$('#' + currentIdMouse + ' .popup_window').show();
});
$('.requested_user').on('mouseleave', function() {
var currentIdMouse = $(this).attr('id');
$('#' + currentIdMouse + ' .requested_user').css("text-decoration", "none");
$('#' + currentIdMouse + ' .requested_user').css("color", "white");
$('#' + currentIdMouse + ' .popup_window').hide();
});
});
.requested_user {
width: 100px;
height: 20px;
}
.requested_user:hover {
cursor: pointer;
}
.popup_window {
position: relative;
left: 20px;
top: -10px;
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="requested_user" id="item1">
item1 content
<div class="popup_window" id="item1">item1 popup content</div>
</div>
<div class="requested_user" id="item2">
item2 content
<div class="popup_window" id="item2">item2 popup content</div>
</div>
Fiddle: https://jsfiddle.net/xht48eLg/

You don't need the id lookup at all. The this is the requested_user in the handler, and the popup_window is a child of it.
$(document).ready(function() {
$('.requested_user').on('mouseenter', function() {
this.style.textDecoration = 'underline';
this.style.color = 'blue';
$('.popup_window', this).show();
});
$('.requested_user').on('mouseleave', function() {
this.style.textDecoration = 'none';
this.style.color = 'white';
$('.popup_window', this).hide();
});
});
.requested_user {
width: 100px;
height: 20px;
}
.requested_user:hover {
cursor: pointer;
}
.popup_window {
position: relative;
left: 20px;
top: -10px;
width: 100px;
height: 100px;
background-color: green;
opacity: 0.6;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="requested_user" id="item1">
item1 content
<div class="popup_window">item1 popup content</div>
</div>
<div class="requested_user" id="item2">
item2 content
<div class="popup_window">item2 popup content</div>
</div>

So close, just change .live for .on, such that:
$('.requested_user').live('mouseenter', function() {
becomes $('.requested_user').on('mouseenter', function() {
and $('.requested_user').live('mouseleave', function() {
becomes $('.requested_user').on('mouseleave', function() {
Check out the updated version of your Fiddle: https://jsfiddle.net/MarcDBosse91/xht48eLg/1/
Also, as stated in the comments by #Peter Darmis:
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live() api.jquery.com/live

Programatically resize the H div and C div along with the resizer

When I click-drag (#cssNav) to the right, it is not moving proportionately along with the #html and #css div.
This might be something very obvious, but still am not able to figure it out, what am I missing here, please help?
Note: I don't want to use display:flex
codepen
$("#htmlNav").on("mousedown", dragStartH);
$("#cssNav").on("mousedown", dragStartH);
$("#jsNav").on("mousedown", dragStartH);
function dragStartH(e) {
e.preventDefault();
dragMeta = {};
dragMeta.pageX0 = e.pageX;
dragMeta.elem = this;
dragMeta.offset0 = $(this).offset();
dragMeta.codeWindow = "#" + $(e.target).attr("id").replace("Nav", "");
function handle_dragging(e) {
var change = e.pageX - dragMeta.pageX0;
var left = dragMeta.offset0.left + change;
$(dragMeta.elem).offset({ left: left });
$("#css").width($("#css").width() - change + "px");
$("#html").width($("#html").width() + change + "px");
}
function handle_mouseup(e) {
$("body")
.off("mousemove", handle_dragging)
.off("mouseup", handle_mouseup);
}
$("body").on("mouseup", handle_mouseup).on("mousemove", handle_dragging);
}
$(document).ready(function() {
var widthPercent = ($(window).width() - 30) / 3;
$("#html").width(widthPercent + "px");
$("#css").width(widthPercent + "px");
$("#js").width(widthPercent + "px");
});
html, body {
height: 100%;
margin: 0;
}
.container{
width:100%;
height: 100%;
background-color:#343;
display: flex;
flex-direction: column;
color: #fff;
margin: 0;
}
#preview, #code{
background-color:#433;
height: 50%;
width: 100%;
margin: 0;
}
#code{
border-bottom: #333 solid 2px;
width: 100%
}
#previewNav, #codeNav{
background-color:#bbb;
height: 10px;
width: 100%;
cursor: row-resize;
}
#html{
background-color: #BFB;
}
#css{
background-color: #FBB;
}
#js{
background-color: #BBF;
}
#html, #css, #js{
float: left;
width: 32%;
height: 100%;
}
#htmlNav, #cssNav, #jsNav{
background-color:#bbb;
float: left;
height:100%;
width: 10px;
cursor: col-resize;
z-index:10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="codeNav"></div>
<div id="code">
<div id="htmlNav"></div>
<div id="html">H</div>
<div id="cssNav"></div>
<div id="css">C</div>
<div id="jsNav"></div>
<div id="js">J</div>
</div>
<div id="previewNav"></div>
<div id="preview">P</div>
</div>

This is how I would do it:
Keep track of which handle you press with navTypeand check if the user is holding its mouse down with dragging.
Then when the user moves the mouse in the document and it is holding its mouse down (dragging) it will move the #html, #css and #js accordingly
Change your javascript into this:
var mouseX, prevMouseX, navType, change;
var dragging = false;
$("#cssNav").mousedown(function () {
dragging = true;
navType = "css";
});
$("#jsNav").mousedown(function () {
dragging = true;
navType = "js";
});
$(document).mousemove(function (e) {
mouseX = e.pageX;
if(dragging){
e.preventDefault();
change = mouseX - prevMouseX;
if(navType == "css" && ($("#css").width() - (change)) > 0 && ($("#html").width() + (change)) > 0){
var hw = $("#html").width();
var cw = $("#css").width();
$("#html").width(hw + change);
$("#css").width(cw - change);
} else if(navType == "js" && ($("#css").width() + (change)) > 0 && ($("#js").width() - (change)) > 0){
var cw = $("#css").width();
var jw = $("#js").width();
$("#css").width(cw + change);
$("#js").width(jw - change);
}
}
prevMouseX = mouseX;
}).mouseup(function () {
dragging = false;
}).mouseleave(function () {
dragging = false;
});

How we can change or set properties of html elements from UI like MS word elements

I am new in web development , I am working on DnD (drag & drop) , I make a small code which can drag and drop only one element any where on page . But Now I am want set their properties from UI for example see that link : https://www.draw.io/
Anyone can help me please . Thanks !
code is following which I did :
<!DOCTYPE HTML>
<html>
<title></title>
<style>
#dragme {
position: absolute;
left: 0;
top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
background: rgba(255,255,255,0.66);
border: 2px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
</style>
<body>
<div style="height:700px;width:100%;border:2px solid green;background-color:#60CEFB;">
<input type="button" draggable="true" id="dragme" style="color:#fff;width70px;height:50px;border:2px solid white;background-color:black;box-shadow:1px 1px 1px 1px grey;" value="Go India" name="button" />
<script>
function drag_start(event) {
var style = window.getComputedStyle(event.target, null);
event.dataTransfer.setData("text/plain",
(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
}
function drag_over(event) {
event.preventDefault();
return false;
}
function drop(event) {
var offset = event.dataTransfer.getData("text/plain").split(',');
var dm = document.getElementById('dragme');
dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
event.preventDefault();
return false;
}
var dm = document.getElementById('dragme');
dm.addEventListener('dragstart',drag_start,false);
document.body.addEventListener('dragover',drag_over,false);
document.body.addEventListener('drop',drop,false);
</script>
</div>
</body>
</html>

Collision detection wont work in Jquery?

So I'm making this project for school where we have to create a game and I picked space invaders. So it's going pretty well but the collision detection won't work. I've spent hours on google trying to find my problem but I couldn't. Here are the 2 JS files.
var newPlayer=0;
var hero = new Object();
var playerCount=0;
var pTag="";
var redImage=$("#red");
var blueImage=$("#blue");
var greenImage=$("#green");
function Hero(n,life,speed,buls)
{
var that=this;
playerCount++;
this.name=n;
this.lives=life;
this.speed=speed;
this.bulSpeed=buls;
this.warning=lowLives;
function stats()
{
alert("Name: " + that.name + "\n" + "Lives: "+ that.lives + "\n" + "Speed: " + that.speed + "\n" + "Bullet speed: " + that.bulSpeed);
}
function lowLives(life)
{
if(life==1)
alert("You have low lives. Be careful!");
else
alert("Don\'t worry! You still have " + life + " lives left");
}
this.buttonTag=$("#" + n + "B")
this.buttonTag.dblclick(startTheGame);
this.imageTag=$("#" + n);
this.imageTag.click(stats);
}
function newPlayerCreation1()
{
hero=new Hero("Red",3,5,6);
$("#RedB").off('click');
}
function newPlayerCreation2(){
hero=new Hero("Blue",4,3,4);
$("#BlueB").off('click');
}
function newPlayerCreation3(){
hero=new Hero("Green",2,8,2);
$("#GreenB").off('click');
}
$(document).ready(function(){
$("#RedB").click(newPlayerCreation1);
$("#BlueB").click(newPlayerCreation2);
$("#GreenB").click(newPlayerCreation3);
});
And this is the code where all the action happens
var position;
var position1;
var bulletCount=0;
var enemy=new Array(20);
var enemyVerticalCenter;
var enemyHorizontalCenter;
var verticalDifference;
var horizontalDifference;
var bulVerticalCenter;
var bulHorizontalCenter;
function startTheGame()
{
$("p").remove();
$("button").remove();
$("img").remove();
document.title="Space invaders";
var backGround = $("<div id='bground' style='background-color:black; width: 500px; height: 600px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; background-repeat:no-repeat; border:10px;'>");
$("body").append(backGround);
var player = $("<img id='player' src='" + hero.name + ".png' style='position: absolute; height:40px; width:40px; left: 250; top: 540;'>");
var base1 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:36; top: 440;'>");
var base2 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:153; top: 440;'>");
var base3 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:286; top: 440;'>");
var base4 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:413; top: 440;'>");
for(i=1;i<=15;i++){
if(i<=5)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + (i-1)*98 + "; top:0;'>");
else if(i>5 && i<=10)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:100;'>");
else
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:200;'>");
}
$("#bground").append(base1);
$("#bground").append(base2);
$("#bground").append(base3);
$("#bground").append(base4);
$("#bground").append(player);
for(i=1;i<=15;i++)
$("#bground").append(enemy[i]);
$("html").keyup(stop).keydown(moveAndFire);
function enemyMoving()
{
for(var i=1;i<=15;i++)
{
enemy[i].animate({left: "+=50" + "px"}, 1000, "linear")
.animate({left: "-=50" + "px"},1000, "linear");
}
}
function stop(evt)
{
player.stop(true);
}
function moveAndFire(evt)
{
if (player.position().left > 0 && evt.keyCode == 37)
{
player.css("left", (player.position().left - hero.speed) + "px");
}
else if (player.position().left < (backGround.width() - player.width()) && evt.keyCode == 39)
{
player.css("left", (player.position().left + hero.speed) + "px");
}
else if (evt.keyCode==32)
{
bulletCount++;
position=player.position();
var bullet=$("<img id='bullet' src='bullet.png' style='position: absolute; height:30px; width:5px;'>");
$("#bground").append(bullet);
$("#bullet").css({ position: "absolute",top: player.position().top + "px", left: (player.position().left + 18) + "px"});
bullet.animate({top: "-=540" + "px"},{
duration: 3000/hero.speed,
step: checkCollision(bullet,enemy),
done: bullet.remove()
});
}
}
var interval=setInterval(enemyMoving,1000);
}
function checkCollision(bul,obs)
{
for(i=1;i<=15;i++)
{
enemyVerticalCenter = obs[i].position().top + obs[i].height()/2;
enemyHorizontalCenter=obs[i].position().left + obs[i].width()/2;
verticalDifference = bul.height()/2 + obs[i].height()/2;
horizontalDifference = bul.width()/2 + obs[i].width()/2;
bulVerticalCenter = bul.position().top + bul.height()/2;
bulHorizontalCenter = bul.position().left + bul.width()/2;
if(Math.abs(bulVerticalCenter - enemyVerticalCenter) <= verticalDifference && Math.abs(bulHorizontalCenter - enemyHorizontalCenter) <= horizontalDifference)
{
$(bul).remove();
$(obs[i]).remove();
}
}
}
And this is the html code
<html>
<head>
<title>Character creation</title>
</head>
<body>
<p id="name">Choose your Character</p>
<p class="info">Click the button once to create a hero, click the image of a hero to view its stats after creating him and double click the button to start the game with that hero</p>
<p class="info">The hero you start the game with must be the last one you created</p>
<img name="image" id="Red" src="Red.png" width="100px" height="100px">
<img name="image2" id="Blue" src="Blue.png" width="100px" height="100px">
<img name="image3" id="Green" src="Green.png" width="100px" height="100px">
<br>
<button id="RedB" style = "position: absolute; left:12px; top:213px">Choose Red!</button>
<button id="BlueB" style = "position: absolute; left:112px; top:213px">Choose Blue!</button>
<button id="GreenB" style = "position: absolute; left:212px; top:213px">Choose Green!</button>
<script src="jquery.js"></script>
<script src="startGame.js"></script>
<script src="script.js"></script>
</body>
</html>
So my bullet won't even be created. When I remove the done: bullet.remove() in the second jquery file, it won't collide with the enemies. Can someone tell me why?