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>

Creating variables in Javascript to manipulate the CSS box-shadow

I am creating a CSS editor using Javascript. I would like the User to be able to change the attributes of the CSS box-shadow. I imagine the function would look something like this:
var box = document.getElementById("boxDiv");
var h-offset; //= getUserInput (= document.getElementById("textareaID").value;)
var v-offset; //= getUserInput
var blur; //= getUserInput
var spread; //= getUserInput
var color; //= getUserInput
box.style.boxShadow =; //(h-offset,v-offset,blur,spread,color)
I am not sure how to format the String in a way the CSS box-shadow can understand it.
Thanks!

You can just concatenate the strings together. Keep in mind, that you need to validate the user input first. Otherwise, the box-shadow is not properly shown, if the user inserts a wrong value.
box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;
With ES6, you can also use template strings:
box.style.boxShadow = `${offsetX} ${offsetY} ${blurRadius} ${spreadRadius} ${color}`;
Here is a live example:
function apply() {
var box = document.getElementById('box');
var offsetX = document.getElementById('offsetX').value;
var offsetY = document.getElementById('offsetY').value;
var blurRadius = document.getElementById('blurRadius').value;
var spreadRadius = document.getElementById('spreadRadius').value;
var color = document.getElementById('color').value;
box.style.boxShadow = offsetX + ' ' + offsetY + ' ' + blurRadius + ' ' + spreadRadius + ' ' + color;
}
#box {
width: 100px;
height: 100px;
background: #f2f2f2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input {
display: block;
}
<div id="box"></div>
<input id="offsetX" placeholder="offsetX" />
<input id="offsetY" placeholder="offsetY" />
<input id="blurRadius" placeholder="blurRadius" />
<input id="spreadRadius" placeholder="spreadRadius" />
<input id="color" placeholder="color" />
<button onclick="apply()">Apply</button>

Thanks. I realized that I was not formatting the String correctly.
What I was coding:
box.style.boxShadow = String(h-offset + v-offset + blur + spread + color);
What I needed to code:
box.style.boxShadow = String(h-offset + " " + v-offset + " " + blur + " " + spread + " " + color);
Almost a 'Well Duh' moment XD

var first = "10px";
var second = "20px";
var third = "red";
$("#bshadow_jquery").css('box-shadow', first + " " + second + " " + third);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
#bshadow_css {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px;
}
#bshadow_jquery {
border: 1px solid;
padding: 10px;
}
</style>
</head>
<body>
<h2>box-shadow css: 5px 5px #990000:</h2>
<div id="bshadow_css">
<p>this is a block-shadow by css</p>
</div>
<hr style="margin: 50px 0px">
<h2>box-shadow jquery: 5px 5px #990000:</h2>
<div id="bshadow_jquery">
<p>this is a block-shadow by JQuery</p>
</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?

Change amount from px to percent based

I am trying to create a carousel with a sliding effect. The basic setup is I have 2 div's wrapping around the sliding content. The first div's width (the outerWrapper) is the size of all slides width together. The next div's width (the innerWrapper) is the size of 1 div.
When it's supposed to change slides, the innerWrapper get's a translation of x amount and it animates from the css transition.
I have everything working, but there's one thing I want to change. I want to change from pixel to percent.
Line 29:
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
I tried a lot of things, but nothing worked. The only thing that worked was targetIndex * 20 + %, but that only works for 5 divs. It's not a concrete solution. How can I make the translateX percentage based?
JSFiddle
var trigger = document.getElementsByClassName('trigger'),
outerWrapper = document.createElement('div'),
innerWrapper = document.createElement('div'),
slide = document.getElementsByClassName('slide'),
parentElm = slide[0].parentNode,
imgWidth = slide[0].offsetWidth,
lastElm = trigger.length - 1,
previousSelectedIndex = 0;
innerWrapper.id = 'innerWrapper';
outerWrapper.id = 'outerWrapper';
trigger[0].className += ' selected';
innerWrapper.style.width = imgWidth * (lastElm + 1) + 'px';
while (slide.length) {
innerWrapper.appendChild(slide[0]);
}
for (var i = 0; i < trigger.length; i++) {
trigger[i].addEventListener('click', function(e) {
clickEvent(e);
})
}
function clickEvent(e) {
if (!hasClass(e.target, 'selected')) {
var targetIndex = [].slice.call(trigger).indexOf(e.target);
innerWrapper.style.transform = 'translateX(-' + imgWidth * targetIndex + 'px)';
e.target.className += ' selected';
removeClass(trigger[previousSelectedIndex], 'selected');
previousSelectedIndex = targetIndex;
}
}
outerWrapper.appendChild(innerWrapper);
parentElm.appendChild(outerWrapper);
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
#outerWrapper {
float: left;
width: 270px;
height: 266px;
overflow: hidden;
}
#innerWrapper {
position: relative;
display: flex;
transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
ul.triggers li {
float: left;
margin: 0 5px;
font: bold 16px arial;
cursor: pointer;
background-color: #ccc;
padding: 10px;
}
ul.triggers li.selected {
background-color: orange;
}
<img class="slide" width="270" src="http://i.imgur.com/XyWadkY.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/oWbhwWT.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/IXcqVB1.jpg" />
<img class="slide" width="270" src="http://i.imgur.com/OpP86hg.jpg" />
<ul class="triggers">
<li class="trigger">1</li>
<li class="trigger">2</li>
<li class="trigger">3</li>
<li class="trigger">4</li>
<li class="trigger">5</li>
</ul>

Try this,
innerWrapper.style.transform = 'translateX(-' + (targetIndex*(100/document.getElementsByClassName("slide").length)) + '%)';

Complex Jquery Selector With Variables

I am building a demo of a lotto site where a user is presented with one section full of the balls and a second section that will fill up with his/her selections.
What I am trying to do is create a jQuery function that will run when a user clicks on a ball, this function must retrieve the number of the ball that was clicked as well as the color of the ball (background-image) and then set the number and the background-image to the next available ball.
Here is a jsFiddle: http://jsfiddle.net/8kq5p6gb/1/
This is my jQuery function, it stores the number and background of the clicked ball and then tries to find the next available ball open and applies that text and background to it but it currently does not work. When I click on a ball I get this error :
Uncaught Error: Syntax error, unrecognized expression: [object Object] a:nth-child(1)
For Code :
$(document).ready(function () {
var line_counter = 1;
var number_counter = 1;
$('.draw-selection-wrapper.choice .draw-number').click(function (e) {
event.preventDefault(e);
var number = $(this).text(); ;
var background = $(this).css('background-image');
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
link.text(number);
link.css('background-image', background);
number_counter = number_counter + 1;
if (number_counter == 8) {
line_counter = line_counter + 1;
number_counter = 1;
}
});
});
Here is my HTML:
<div class="draw-numbers-outer-wrapper">
<div class="draw-selection-wrapper choice">
<div class="draw-number-row one">
1
2
3
4
5
6
7
</div>
<div class="draw-number-row two">
8
9
10
11
12
13
14
</div>
</div>
<div class="draw-selection-wrapper selections">
<div class="draw-number-row">
</div>
<div class="draw-number-row">
</div>
</div>
</div>
And my CSS:
.draw-selection-wrapper {
width: 50%;
float: left;
}
.draw-number-row {
height: 36px;
border: 1px solid #C6C4C5;
padding-left: 10px;
}
.line-number {
float: left;
height: 100%;
width: 12px;
}
.draw-number {
width: 9%;
float: left;
height: 100%;
line-height: 36px;
margin: 0px 2.5% 0px 2.5%;
color: #000;
text-align: center;
background-color: green;
}
.draw-selection-wrapper.selections .draw-number {
margin: 0px 2% 0px 2%;
}
.draw-number-row.one .draw-number {
background-color: red;
}
.draw-number-row.two .draw-number {
background-color: teal;
}

row is a jQuery object, not a string, and as such you end up with [Object, object] when you try to concantenate the object into a string.
You could use the context selector instead
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $('a:nth-child(' + number_counter + ')', row);
FIDDLE

var link = row.find('a:nth-child(' + number_counter + ')');

Fiddle
replace this
var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');
var link = $(row + ' a:nth-child(' + number_counter + ')');
by
var row = '.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')';
var link = $(row + ' a:nth-child(' + number_counter + ')');