I am trying to design a menu system for upgrading attack skills. For example, when you click upgrade "strike skill", you get a circle with 3 subset skills to upgrade to.
The Problem I am running into is my function calls. The last function of similar type, seems to over-ride the first 2 functions, so instead of filling all 3 circles in with their numbers, it instead just overwrites the last 2 instead. Why does it do this and how can I fix it?
The problem:
skills("skills", "attack1", "I");
skills("skills", "attack2", "II");
skills("skills", "attack3", "III");
Javascript Code:
function upgradeBar() {
menu("upgradeMenu", "systemMenu");
}
function menu(classID, id) {
var button = dom.el("skill"); // Apply DIV to THIS location
var x = document.createElement("div");
x.setAttribute("class", classID);
x.setAttribute("id", id);
button.appendChild(x);
function skills(classID, id, text){
var circle = dom.el("systemMenu"); // Apply DIV to THIS location
var x = document.createElement("div");
x.setAttribute("class", classID);
x.setAttribute("id", id);
circle.appendChild(x);
dom.setText("attack1", text);
}
skills("skills", "attack1", "I");
skills("skills", "attack2", "II");
skills("skills", "attack3", "III");
}
CSS Code:
.upgradeMenu {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
border-radius: 50px;
position: relative;
}
#attack1 {
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 50px;
position: absolute;
top: 0;
left: 0;
margin-left: -10px;
}
#attack2 {
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 50px;
position: absolute;
top: 0;
right: 0;
margin-right: -10px;
}
#attack3 {
width: 50px;
height: 50px;
background-color: white;
border: 1px solid black;
border-radius: 50px;
position: absolute;
bottom: 0;
margin-left: 23px;
margin-bottom: -10px;
}
Related
<style>
* {padding: 0; margin: 0;}
#game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
#character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
.block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
.falling {animation: fall 2s infinite linear;}
#keyframes fall {
0% {top: -50px}
100% {top: 450px;}
}
</style>
<body>
<div id="game">
<div id="character"></div>
</div>
</body>
SCRIPT
var block = [];
function createEnemy(nth) {
var divAddText = '<div class="block ' + nth + '"></div>'
document.getElementById('game').innerHTML += divAddText;
block[nth] = document.getElementsByClassName(nth)[0];
block[nth].classList.add("falling");
setInterval(function() {
block[nth].style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
As you can see in the SCRIPT part, I tried to write a block creating and falling code.
It worked well when I executed createEnemy(1) in chrome console.
The first block created went smoothly falling from random left points as I expected.
But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points.
Could any of you guys give me some insight into this issue?
Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.
const enemies = [];
const game = document.getElementById("game");
function createEnemy(name) {
const enemy = document.createElement("div");
enemy.classList.add("block", "falling", name);
enemies.push(enemy);
game.appendChild(enemy);
setInterval(function() {
enemy.style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
createEnemy(1);
createEnemy(2);
* {
padding: 0;
margin: 0;
}
#game {
width: 300px;
height: 400px;
border: 2px solid #222;
background-color: #ccc;
margin: 50px;
position: relative;
overflow: hidden;
}
#character {
width: 20px;
height: 20px;
background-color: #ffc554;
border: 2px solid #222;
position: absolute;
bottom: 0;
left: 0;
}
.block {
width: 10px;
height: 10px;
background-color: #ff5252;
border-radius: 50%;
border: 2px solid #222;
position: absolute;
top: -50px;
left: -20px;
}
.falling {
animation: fall 2s infinite linear;
}
#keyframes fall {
0% {
top: -50px;
}
100% {
top: 450px;
}
}
<div id="game">
<div id="character"></div>
</div>
PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.
So what I'm trying to do is create two functions that each go along with their respective buttons. The purpose of the function is to make divs containing images rotate through a number images. When 3 is rotated to the right it leaves the stack of visible images on the page, and when 1 is rotated to the left the same happens. When 1 is rotated to the right, a new image pops into the visible stack. I have the basic JavaScript written out, however when I click the buttons nothing happens. Can anyone help me out with this? Thank you!!
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<div>
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft(), false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight(), false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
The problem was in your even listeners. You were passing rotateLeft() and rotateRight() when you should have passed them without the parenthesis. See working code below.
var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");
myLeftArrow.addEventListener("click", rotateLeft, false);
function rotateLeft()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img3');
set2.id = ('img1');
set3.id = ('img2');
}
myRightArrow.addEventListener("click", rotateRight, false);
function rotateRight()
{
var set1 = document.getElementById('img1');
var set2 = document.getElementById('img2');
var set3 = document.getElementById('img3');
set1.id = ('img2');
set2.id = ('img3');
set3.id = ('img1');
}
#img1 {
position: absolute;
background-color: lightblue;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
right: 45px;
}
#img2 {
position: absolute;
background-color: lightcoral;
height: 70px;
width: 50px;
z-index: 10;
left: 70px;
right: 70px;
top: 100px;
margin: auto;
}
#img3 {
position: absolute;
background-color: lightgreen;
height: 70px;
width: 50px;
z-index: 5;
margin: auto;
left: 45px;
}
#rightArrow {
position: absolute;
left: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#rightArrow:hover {
color: yellow;
}
#leftArrow {
position: absolute;
right: 15px;
bottom: 45px;
width: auto;
font-size: 24px;
transform: rotate(180deg);
}
#leftArrow:hover {
color: yellow;
}
<p id='leftArrow'>↶</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>↷</p>
I want to create page, which will show bars/restaurants on page based on some filter. I have one div, which will contain all results (.resultsContainer). I have no problem appending more divs (.barContainer) to this one, but I am struggling to actually append information to these divs. I want .barContainer (.infoContainer) to hold more information such as picture, name, address etc. Problem is when I use append to it, divs are stacked vertically, because margins take full width, even when I set them to zero. I tried using createDocumentFragment() function, where I stack more childs, and then I append result to the .barContainer, which I pass then to HTML, but still it is not working how it should. Basically what I try to achieve is to stack information to infoContainer like tetris bricks. I appreciate any help, maybe there is way how to create html template and use it dynamically? I am pretty sure I am doing something wrong with appendChild, but I cant find a solution. I am new to webcoding.)
Here in my code I will try to put picture, adress and name into the infoContainer, each of those should take one third of the parent div's width and they should be next to each other without any margin. They will have different colours.
HTML:
<body>
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
</body>
JS:
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createElement("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
CSS:
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
}
Simply make your elements inline-block, as by default div is a block element and whatever the width you specify it will always occupy the whole row.
You can read more about block/inline elements
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createElement("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
display:inline-block
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
display:inline-block
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
display:inline-block
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
Your best solution is to apply display: flex to .infoContainer. That will force the divs to be arranged in a row. You can also apply display: inline-block; for .barPicture and .barName, but it may look bad if you have an overflow.
Demo with .infoContainer {display: flex;}:
function appendBars(){
var barContainer = document.createElement("div");
barContainer.className = "barContainer"
var infoContainer = document.createElement("div");
infoContainer.className = "infoContainer";
var barPicture = document.createElement("div");
barPicture.className = "barPicture";
var barName = document.createElement("div");
barName.className = "barName";
var barAddress = document.createTextNode("div");
barAddress.className = "barAddress";
var fragment = document.createDocumentFragment();
fragment.appendChild(barPicture);
fragment.appendChild(barName);
fragment.appendChild(barAddress);
infoContainer.appendChild(fragment);
barContainer.appendChild(infoContainer);
document.getElementById("resultsContainer").appendChild(barContainer);
}
#resultsContainer{
float: right;
background: red;
width: 620px;
height: 100%;
overflow-x: auto;
}
.barContainer {
background-color: white;
width: 100%;
height: 200px;
border-top: 0px;
border-right: 0px;
border-bottom: 1px;
border-style: solid;
border-color: grey;
}
.infoContainer{
width: 620px;
height: 180px;
background-color: white;
padding: 10px;
display: flex;
}
.barPicture{
width: 200px;
height: 180px;
margin: 0;
background-color: yellow;
}
.barName{
background-color: blue;
margin: 0px;
width: 200px;
height: 180px;
}
.barAddress{
background-color: green;
margin: 0px;
width: 200px;
height: 180px;
}
<button type="button" id="myBtn" onclick="appendBars()">Append</button>
<div id="resultsContainer"></div>
If I understand your question correctly, you just need to add this to your CSS
/* CLASSES YOU WANT TO INCLUDE */
.barPicture,
.barName,
.barAddress{
display: inline-block;
}
I am trying to do my very first simple game.
My question is: why is my game loop not working? If you see the code, I tried to put all the game code inside an if. The idea is: "if game over is false, execute the game, else (when my humanHungerBar reaches 0) the game is over".
Can you help me here? Thanks a lot
<!doctype html>
<html>
<head>
<style>
body {
-webkit-user-select: none;
}
#screen {
position: relative;
left: 480px;
top: 30px;
border: 2px solid black;
height: 500px;
width: 400px;
display: block;
}
#myCash {
position: relative;
width: 90px;
height: 40px;
top: 7px;
left: 5px;
border: 5px solid lightgreen;
text-align: center;
vertical-align: middle;
line-height: 40px;
color: green;
font-weight: bolder;
font-size: 20px;
}
#humanHunger {
position: relative;
width: 90px;
height: 90px;
top: 20px;
left: 280px;
border: 1px solid black;
}
#humanHungerContainer {
position: relative;
width: 100%;
height: 20px;
top: 20px;
border: 1px solid black;
background-color: red;
}
#humanHungerBar {
position: absolute;
width: 76%;
height: 18px;
border: 1px solid green;
background-color: green;
}
#moneyMaker {
position: relative;
width: 300px;
height: 450px;
top: -850px;
left: 100px;
border: 3px solid green;
background-image: url("moneyMakerBackground.png");
}
#jobInstructions {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 20px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#workingHours {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 90px;
left: 22px;
background-color: lightgreen;
text-align: center;
vertical-align: middle;
line-height: 50px;
}
#workCounter {
position: absolute;
width: 60px;
height: 50px;
border: 3px solid orange;
top: 250px;
left: 22px;
background-color: lightgreen;
text-align: center;
}
#clickingArea {
position: absolute;
width: 250px;
height: 50px;
border: 3px solid orange;
top: 170px;
left: 22px;
background-color: lightgreen;
filter: saturate(100%);
}
#clickingArea:hover {
filter: saturate(190%);
}
#dollar {
position: relative;
left: 80px;
top: 5px;
}
#nakedHuman {
position: absolute;
top: 25px;
left: 120px;
}
#clothesScreen {
position:relative;
top: -400px;
left: 900px;
border: 2px solid black;
width: 300px;
height: 400px;
overflow: auto;
}
#lumberShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#coffeeStainedTShirt {
position: absolute;
top: 165px;
left: 120px;
display:none;
}
#regularJeans {
position: absolute;
top: 328px;
left: 145px;
display:none;
}
#lumberShirtMiniContainer {
position: relative;
top: 10px;
left: 10px;
}
#coffeeStainedTShirtMiniContainer {
position: relative;
top: 30px;
left: 10px;
}
#regularJeansMiniContainer {
position: relative;
top: 60px;
left: 20px;
}
#burgerMiniContainer {
position: relative;
top: 90px;
left: 10px;
}
#lumberShirtPrice {
position: absolute;
top: 20px;
left: 100px;
border: 3px solid orange;
width: 50px;
height: 20px;
text-align: center;
vertical-align: middle;
line-height: 20px;
background-color: orange;
}
#buyButtonLumber {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonCoffee {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonRegularJeans {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
#buyButtonBurger {
position: absolute;
top: 60px;
left: 100px;
border: 3px solid lightgreen;
width: 30px;
height: 15px;
}
</style>
</head>
<body>
<div id="screen">
<img id="nakedHuman" src="nakedHuman2.png" width="139.46" height="450">
<img id="lumberShirt" src="lumberShirt.png" width="139.46" height="158.51">
<img id="coffeeStainedTShirt" src="coffeeStainedTShirt.png" width="139.46" height="158.51">
<img id="regularJeans" src="regularJeans.png" width="89" height="152.72">
<div id="myCash"></div>
<div id="humanHunger">
<div id="humanHungerContainer">
<div id="humanHungerBar"></div>
</div>
</div>
</div>
<div id="clothesScreen">
<div id="lumberShirtMiniContainer">
<img id="lumberShirtMini" src="lumberShirt.png" width="70.38" height="80">
<div id="lumberShirtPrice"></div>
<div id="buyButtonLumber">Buy</div>
</div>
<div id="coffeeStainedTShirtMiniContainer">
<img id="coffeeStainedTShirtMini" src="coffeeStainedTShirt.png" width="70.38" height="80">
<div id="buyButtonCoffee">Buy</div>
</div>
<div id="regularJeansMiniContainer">
<img id="regularJeansMini" src="regularJeans.png" width="46.62" height="80">
<div id="buyButtonRegularJeans">Buy</div>
</div>
<div id="burgerMiniContainer">
<img id="burger" src="burger.png" width="94.11" height="80">
<div id="buyButtonBurger">Buy</div>
</div>
</div>
<div id="moneyMaker">
<div id="jobInstructions">You work on a click factory, so get to clickin'!!</div>
<div id="workingHours"></div>
<div id="clickingArea"><img src="dollar.png" id="dollar" width="82.55" height="42"></div>
<div id="workCounter"></div>
</div>
<script>
window.onload = function () {
var gameOver = false;
if (!gameOver) {
var lumberShirtPrice = document.getElementById("lumberShirtPrice");
lumberShirtPrice.innerHTML = 7;
var myCash = document.getElementById("myCash");
myCash.innerHTML = 45;
var buyButtonLumber = document.getElementById("buyButtonLumber");
buyButtonLumber.addEventListener("click", substractItemPriceFromMyCash);
var negateFX = new Audio('negate1.wav');
function substractItemPriceFromMyCash() {
var a = parseInt(lumberShirtPrice.innerHTML);
var b = parseInt(myCash.innerHTML);
if (a > b) {
negateFX.play();
}
else {
myCash.innerHTML -= lumberShirtPrice.innerHTML;
console.log("you bought the lumber shirt");
}
}
var workingHoursScreen = document.getElementById("workingHours");
workingHoursScreen.innerHTML = 0;
var workCounter = document.getElementById("workCounter");
workCounter.innerHTML = 0;
var allowedToWork = false;
var workingHoursChronometer = setInterval(incrementWorkingHoursChronometer, 1000);
function incrementWorkingHoursChronometer () {
var a = parseInt(workingHoursScreen.innerHTML);
if(a < 10) {
workingHoursScreen.innerHTML++;
}
else if (a == 10) {
workingHoursScreen.innerHTML = 0;
workCounter.innerHTML++;
}
var b = parseInt(workCounter.innerHTML);
if (b == 4) {
workCounter.innerHTML = 0;
}
if (b % 2 == 0) {
allowedToWork = true;
}
else if (b % 2 == 1) {
allowedToWork = false;
}
}
var coinFX = new Audio('coin1.wav');
var clickingAreaBox = document.getElementById("clickingArea");
clickingAreaBox.addEventListener("click", giveMeMoney);
function giveMeMoney() {
if(allowedToWork) {
myCash.innerHTML++;
coinFX.play();
}
else {
negateFX.play();
}
}
var humanHungerBar = document.getElementById("humanHungerBar");
var barWidth = 76;
humanHungerBar.style.width = barWidth + '%';
var humanHungerBarDecrement = setInterval (decreaseHumanHungerBar, 700);
function decreaseHumanHungerBar () {
if (barWidth > 0) {
humanHungerBar.style.width = barWidth + '%';
barWidth--;
}
}
var buyButtonBurger = document.getElementById("buyButtonBurger");
var burgerPrice = 15;
buyButtonBurger.addEventListener("click", buyBurgerRestoreLifeAndDecreaseMoney);
function buyBurgerRestoreLifeAndDecreaseMoney() {
var a = parseInt(myCash.innerHTML);
if (a >= burgerPrice){
if(barWidth < 92) {
barWidth += 10;
myCash.innerHTML -=burgerPrice;
}
else if (barWidth == 1) {
gameOver = true;
console.log("bar is 1");
}
else {
negateFX.play();
}
}
else {
negateFX.play();
}
}
}
else {
document.getElementById("screen").style.display = 'none';
}
}
</script>
</body>
</html>
So you have written a script that executes one time. It goes from beginning to end, and then stops. So what you want to do is write a script that repeats over and over until the game ends. So here's a super brief example of how you might do that in javascript:
while (!gameOver) {
// do game code
}
BUT WAIT!!!
So the code inside that while loop will keep on happening over and over until the gameOver variable is true. But if you try to use that code, your game will probably freeze! Why? Because the browser is executing the code inside the while loop as fast as it possibly can. But if you'd like your game to run at a certain frame-per-second rate, you probably want to use a javascript timeout. So try something like this:
setInterval(function() {
// do game code
}, 1000/60);
That is the absolutely bare minimum that you'll need for a technical "game loop". However, this is not really the recommended approach for starting to create a browser-based game. Try doing some research and checking out things like this and this.
I made a simple web application which allow you to add dynamic divs to a container div.
You can see how the app is looking here :
Before resizing
As you can see, when you click the link "Image" in the left menu, it add a new div in the div container with the black background.
Theses dynamics divs add by this way can be dragged and resized by jQuery with the jQuery ui draggable and resizable method.
the draggable function works well, but not the resizable. It seem like the divs are dependents, and when you try to resize it, it depends of the size of the others dynamics divs.
Here is the illustration of what I try to explain :
After resize
Like you can see, I tried to resize the div2, but because I add the div1 first, the div1 been resized too.
I want to make all div independent so I can resize it even if it overlap another div.
Here is my codes :
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
var moveDiv = document.createElement("div");
moveDiv.className = 'encadrer';
var titre = document.createElement("p");
var para = document.createElement("p");
titre.textContent = "Titre";
titre.className = 'centrerTitre';
moveDiv.appendChild(titre);
para.textContent = prompt("Texte de l'image :");
para.className = 'centrerPara';
moveDiv.appendChild(para);
bg.appendChild(moveDiv);
$(function () {
$(".encadrer")
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
display: table-cell;
border: 1px solid white;
vertical-align: middle;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
/*----- Resizable ------*/
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
z-index: 99999;
display: block;
}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0px;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0px;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0px;
height: 100%;
}
.ui-resizable-nw {
cursor: nw-resize;
height: 7px;
width: 7px;
top: -5px;
left: -5px;
}
.ui-resizable-se {
cursor: se-resize;
height: 7px;
width: 7px;
right: -5px;
bottom: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
height: 7px;
width: 7px;
top: -5px;
right: -5px;
}
.ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 7px;
left: -5px;
bottom: -5px;
}
/*----------------------*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
I don't really know how to use the snippet system but you can see the code by this way :p
Sorry for the bad English and the var names.
I did some css and js changes to fix your problem:
Replace $(".encadrer") to $(moveDiv) because you don't want to call the plugin for all elements (.encadrer) in each time the user add an image.
The main problem was with the position of the images which was relative I changed it to absolut.
I removed the display:table-cell and vertical-align:middle. If you want to center the image you should do this using by following How to center absolute element in div.
var bg = document.getElementById('bg');
bg.className = "centrer";
var ajoutImg = document.getElementById('ajoutImage');
var initDiagonal;
var initFontSize;
ajoutImg.onclick = function () {
//var moveDiv = document.createElement("div");
//moveDiv.className = 'encadrer';
//var titre = document.createElement("p");
//var para = document.createElement("p");
//titre.textContent = "Titre";
//titre.className = 'centrerTitre';
//moveDiv.appendChild(titre);
//para.className = 'centrerPara';
//moveDiv.appendChild(para);
var name = prompt("Texte de l'image :");
var container = $('<div class="encadrer"><div class="inner"><p class="centrerTitre">Titre</p><p class="centrerPara">' + name + '</p></div></div>');
$(bg).append(container);
container
.draggable({ containment: "parent" })
.resizable({
containment: "parent",
handles: "all"
});
};
.centrer {
display: block;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 640px;
width: 360px;
background-color: #000000;
}
.menu {
border: 1px solid black;
padding-left: 15px;
padding-right: 15px;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.encadrer {
/*display: table-cell;
vertical-align: middle;*/
border: 1px solid white;
position:absolute !important;
}
.centrerTitre {
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.centrerPara {
font-size: 16;
color: white;
margin: auto;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
.inner {
display: inline-block;
vertical-align: middle;
text-align:center;
width:100%;
}
.encadrer:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<div id="menu" class="menu">
<h3>Ajouter des éléments</h3>
<ul>
<li><a id="ajoutImage" href="#" onclick="return false;">Image</a></li>
</ul>
</div>
<div id="bg"></div>
Update
To get the content center inside the .encadrer you need to:
Wrap the content with div
Follow the tutorial go to: Vertically-> Is it inline or inline-* elements (like text or links)?-> Is it multiple lines? -> see the second demo. You can see the final result here