I've been searching a lot on the site and the web but can't really seem to find any help. My problem is that I need to make a function that creates a new div box on the press of a button and that div box needs to be draggable and editable.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
draggable is a part of jquery-ui library. Not jquery.
Add <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> to your code.
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
}
}
function deleteNote() {
$(this).parent('#newbox').remove();
}
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#canvas').click(function (e) {
makeNote(e);
});
// Remove the note
$("#close").click(function () {
deleteNote();
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
#newbox {
position: absolute;
background-color: white;
height: 200px;
width: 200px;
box-shadow: 10px 10px 10px #888;
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 200px;
height: 180px;
border: 0;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
</div>
</body>
</html>
Since you use jQuery, you can use .draggable() from jQuery UI along with contenteditable="true":
function addNew() {
var field = $('<div contenteditable="true">Text</div>')
field.appendTo('#fields').draggable();
}
#fields div {
border: 1px dashed #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button onClick="addNew()">Add new field</button>
<hr/>
<div id="fields"></div>
There is something I want to notice.
never use same id to elements.
use jquery .on function for element that make by scripts.
never use box-shadow :D
function makeNote(e) {
// Check the event object if the .click is on the canvas
// or a created note
if (e.eventPhase === 2) {
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox'+e.pageX+e.pageY+'"><span class="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$($newbox).css({
'top' : ($('#canvas').height() / 2 - 150 + sequentCounter++) + 'px' ,
'left' : ($('#canvas').width() / 2 - 100 + rowSeqCounter + sequentCounter++) + 'px'
});
$newbox.draggable({cancel : '.close'});
}
}
var sequentCounter = 1;
var rowSeqCounter = 1;
// wait until the dom document is loaded
jQuery(document).ready(function () {
// listen for a .click() event on the canvas element
$('#div_element_maker').click(function (e) {
if (sequentCounter > 70){
sequentCounter = 1;
rowSeqCounter += 11;
if (rowSeqCounter > 50)
rowSeqCounter = 1;
}
makeNote(e);
});
// Remove the note
$('#canvas').on('click',".close", function () {
$(this).parent().remove()
});
});
html, body {
background-color: #cccccc;
margin: 0;
padding: 0;
height: 100%;
position: relative;
}
.ui-widget-content {
position: absolute;
background-color: white;
height: 180px;
width: 185px;
border: 1px solid darkgray;
/*box-shadow: 10px 10px 10px #888;*/
padding: 20px;
z-index: 1000;
}
textarea {
background: transparent;
width: 180px;
height: 100px;
border: 1px solid darkgray;
}
#canvas {
height:auto !important;
min-height: 100%;
height:100%;
z-index: -1000;
}
.close{
cursor: pointer;
background: red;
}
#div_element_maker{
cursor: pointer;
background: green;
padding: 10px;
margin: 10px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" ahref="StyleSheet1.css" />
</head>
<body>
<div id="canvas">
<span id="div_element_maker">make element</span>
</div>
</body>
</html>
Related
I'm creating a game, the div with id "playerDiv" when I hit the space bar it should start going up but it doesn't. So I would like when I hit the space bar the div would go up high.
could you help me? could you also report me the mistakes i made?
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 420 + inc;
player.top = player.top + x;
inc++
playerTimeOut = setTimeout(jump, 50);
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.key === ' ') {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Game</title>
</head>
<body>
<div id="background">
<div id="playerDiv">
</div>
</div>
</body>
<script src="script.js"></script>
</html>
You're not passing the argument in addListener and you're not using correctly the top property, it belongs to style and needs unit , for example px
Also keyCode is deprecated, use key instead
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
player.style.bottom = `${x}px`
inc++
console.log(player.style.bottom)
}
//window.addEventListener("keydown", e => e.key === "(Space Character)" ? jump() : '');
//For snippet only
jump()
setTimeout(() => jump(), 1000)
* {
/* demo */
box-sizing: border-box
}
body {
background-color: #222;
}
#background {
border: solid 2px #ddd;
width: 800px;
height: 500px;
position: relative;
/* demo */
max-width: 100%
}
#playerDiv {
background-color: #aaa;
width: 60px;
height: 80px;
position: absolute;
bottom: 0px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
Try this:
const player = document.getElementById("playerDiv");
let inc = 0;
let playerTimeOut;
function jump() {
let x = 10 + inc;
let style = window.getComputedStyle(player);
player.style.top = (parseInt(style.getPropertyValue('top'),10) - x) + 'px';
inc++
}
window.addEventListener("keydown", checkKeyPress, false);
function checkKeyPress(key) {
if (key.keyCode == "32") {
jump();
}
}
body {
background-color: #222222;
}
#background {
border: solid 2px #dddddd;
width: 800px;
height: 500px;
}
#playerDiv {
background-color: #aaaaaa;
width: 60px;
height: 80px;
position: relative;
top: 420px;
left: 10px;
}
<div id="background">
<div id="playerDiv">
</div>
</div>
I'm trying to change some styling properties based on the div ID that I've been able to capture in a javascript function.
When the user selects a div, the javascript captures its ID. When they select the red button, whichever div is selected, it's background colour should be changed to red.
I've tried multiple ways and none of the approaches I've taken so far work.
Any ideas? Would greatly appreciate any and all suggestions!
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
sid.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this.id)"></div>
<div id="colorPreview2" onclick="reply_click(this.id)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
You are close, but you have a few issues with your code. First of all, you need the element itself in order to change its properties; not its ID. this.id should be changed to simply this. And secondly, you need to change sid.setProperty() to sid.style.setProperty().
Here's your code with the above fixes:
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
sid.style.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this)"></div>
<div id="colorPreview2" onclick="reply_click(this)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
sid is an id, it's just a string, not a function so you can't call sid.now it's id of element and we can find the element with document.getElementById(). and also it's a good practice to check is any div selected or not.
var sid;
function reply_click(clicked_id) {
sid = clicked_id;
console.log("Got ID!" + sid);
}
function btnRed() {
console.log("Changed color for " + sid);
//sid.setProperty("background-color", "#ff4f4f");
var doc = document.getElementById(sid)
if(doc){
doc.style.backgroundColor ="#ff4f4f"
}
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this.id)"></div>
<div id="colorPreview2" onclick="reply_click(this.id)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
Here's working code. You can't use the id of an element to change the element. You need to get the element with the Id. So use this instead of this.id.
var selectedElem;
function reply_click(clickedElem) {
selectedElem = clickedElem;
console.log("Got ID!" + selectedElem.id);
}
function btnRed() {
console.log("Changed color for " + selectedElem.id);
selectedElem.style.setProperty("background-color", "#ff4f4f");
}
body {
maring: 0;
poadding: 0;
}
#colorPreview {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
#colorPreview2 {
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
button {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style-hillbilly.css" />
</head>
<body>
<div id="colorPreview" onclick="reply_click(this)"></div>
<div id="colorPreview2" onclick="reply_click(this)"></div>
<button class="bttn-1" onclick="btnRed()">Red</button>
</body>
</html>
I'm learning javascript and I've faced with a strange case while doing the gallery example in the MDN. I decided to add a simple function to this example but it didn't work. My goal is to add a function to the ".displayed-img" img.
I know that the issue is because of the "overlay" div. and I can run my function when I comment that line in the HTML. But I wonder what would be the best approach when I have a case like this and I need to access to an object which sits beneath another one. Thanks.
Here is my code:
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
var btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
var imgUrl, currentImgUrl;
/* Looping through images */
for (var i = 0; i < 5; i++) {
imgUrl = 'https://via.placeholder.com/640x48'+(i+1)+'.jpg';
var newImage = document.createElement('img');
newImage.setAttribute('src', imgUrl);
thumbBar.appendChild(newImage);
newImage.addEventListener ('click', function(e){
displayedImage.setAttribute('src', e.target.getAttribute('src'));
} );
}
displayedImage.addEventListener('click', sayHi);
function sayHi(){
console.log('hi');
}
btn.onclick = function() {
if (btn.getAttribute('class')==='dark') {
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
btn.textContent = 'Light';
btn.setAttribute('class', 'light');
} else {
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
btn.textContent = 'Darken';
btn.setAttribute('class', 'dark');
}
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0, 0, 0, 0);
}
button {
border: 0;
background: rgba(150, 150, 150, 0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Image gallery example</h1>
<div class="full-img">
<img class="displayed-img" src="https://via.placeholder.com/640x480">
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar">
</div>
<script src="main.js"></script>
</body>
</html>
[EDIT] I tried to dynamically create 6 horizontal lines every 1 second using setTimeout method. So it should shows every 6 horizontal lines as a group for every 1 second. Here, I call 6 horizontal lines as group. However, I want to append each group horizontally rather than vertically. When trying to append a group and the width of the border is not long enough to hold a new group, append the new group to next lines. And also I want a "pilar" between each grounp of 6 horizontal lines, and I only want to create 8 group of horizontal lines. The first picture below is what I get after running my code. The second one is what I need. The code below is my html, css, and js code. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
</body>
</html>
css:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-right: 20px;
}
#output {
background: #ffe6e6;
width: 600px;
height: 800px;
position:absolute;
}
js:
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$('#output').append(hr);
}
makeTable(function() {
if(++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}
You can use display:flex to get the output you are expecting
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
var output = $("#output");
var div = $("<div></div>");
div.attr('id', order);
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$(div).append(hr);
}
output.append(div);
makeTable(function() {
if (++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left: 0px;
margin-bottom: 10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-left: 10px;
}
#output div:nth-child(2n+1) {
border-right: 5px solid green;
margin-top: 5px;
}
#output div:nth-child(2n) {
border-right: 5px solid green;
margin-top: 5px;
height: auto;
}
#output {
display: flex;
flex-wrap: wrap;
}
#output {
background: #ffe6e6;
width: 500px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">
</div>
Hope it helps
How to restrict drag (disable) in the block?
Full example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x = 0, setElementMove = 0, getElementMove = $('#drag');
getElementMove.mousedown(function(event){
x = event.clientX+$(document.body).position().left-parseInt($(this).css('left'));
setElementMove = true;
if(typeof event.preventDefault != 'undefined'){
event.preventDefault();
return false;
}
});
getElementMove.ondragstart = function(){
return false;
};
$(document).mouseup(function(){
setElementMove = false;
});
$(document).mousemove(function(event){
if(setElementMove){
getElementMove.css('left', event.clientX+$(document.body).position().left-x + 'px');
}
});
});
</script>
<h1>How to restrict drag (disable) in the block?</h1>
<div id="block">
<div id="border">
<div id="drag" style="left:200px;">some text</div>
</div>
</div>
<style type='text/css'>
h1, #drag {
font: bold 1.0em arial, helvetica, tahoma, verdana, sans-serif;
margin: 10px 0px;
text-align: center;
}
#block {
border: 1px solid #DDD;
overflow: hidden;
width: 100%;
}
#border {
border: 1px solid red;
margin: 0px auto;
overflow: hidden;
width: 70%; /*important*/
height: 150px;
}
#drag {
background: #DDD;
cursor: default;
position: absolute;
top: 50px;
width: 54px;
height: 45px;
}
</style>
edit your mousemove like this,
$(document).mousemove(function(event) {
var eleft = event.clientX + $(document.body).position().left - x;
if (eleft > boundary.offset().left && (eleft + getElementMove.width() < boundary.offset().left + boundary.width() ) ) {
if (setElementMove) {
getElementMove.css('left', eleft + 'px');
}
}
});
crazy demo
Since you asked for jQuery (altough you are using Mootools in your example), have a look at jQuery Ui Draggable. They have IMO the best drag & drop utility you can have with jQuery.