I am trying to create a drag and drop question where the user drops an arrow on a specific part of a photo. The photo will have 4 black rectangles on it labeled A, B, C, D and the arrows will be 1, 2, 3, 4. My goal is to layer the rectangle "drop zones" on top of the photo (of a pulley system). Then the arrows will be dropped in the proper drop zone and after each arrow is dropped it will return a string denoting the location of the arrows ie: 2A, 3B, 4C etc..
what I have right now the photo is stuck inside of the dropzone rectangle and therefore no arrow can be dropped on top of the photo. I was hoping someone could help. Here is what I have
``$<!DOCTYPE html>
<html>
<head>
<title>js drag and drop</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.dragzone
{
height: 400px;
width: 40%;
border: 2px solid black;
float: left;
margin-top: 150px;
margin-left: 7%;
}
.dropzone
{
height: 400px;
width: 40%;
border: 2px solid black;
float: left;
margin-top: 150px;
margin-left: 7%;
}
</style>
</head>
<body>
<div class="dragzone">
<img src="orange_T.png" id="dragelement" height="80px" ondragstart="dragStart (event)">
<img src="red_T.png" id="dragelement" height="80px" ondragstart="dragStart (event)">
</div>
<div class="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)" >
<div class="picture" >
<img src="C:\Users\Claire Peters\Desktop\Research\pulleys haptic screenshots\1.1.png" alt="HTML5 Icon" style="width:400px;height:400px;">
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
`
and
var id;
function allowDrop(ev)
{
ev.preventDefault();
}
function dragStart(ev)
{
id=ev.target.id;
//alert(id);
}
function drop(ev)
{
ev.target.append(document.getElementById(id));
event("dropped!")
}
Related
Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>
I am working currently on a project and i haven't found a solution how to realize it yet. I am not asking for the solution. I would be very thankful if someone could give me some hints or tell me in which direction i could go to reach my goal.
Currently i am thinking about trying to solve it by programming an web-application. But i am not sure if a windows forms application would even be better. I am also open for other solutions.
My goal is following:
I have some (real world) documents which are being scanned and afterwards scanned with an OCR-Scanner, which generates some PDF-Documents.
Next i want to open one of these generated PDF-Files in a User Interface which shows me the PDF. The user should be able to select some (one after another) text-blocks, which are downloaded from a database, and drag them over the pdf and drop it at some position.
Now i want to save or print the pdf with the text-blocks, just as the user sees it. Kind of making a screenshot of the pdf but resulting in a pdf file with the same dimensions as before.
Currently i have no idea how to "merge" these two.
Which technologies should i use. What would you recommend me. Would a web-application or something native be better suitable for that purpose.
I have written some kind of mockup to show what i mean. Please put some pdf named "testpdf.pdf" to the same folder if you want to test it.
It works on Chrome ... not sure about the others.
Thanks a lot
Kerem
var movabelelements=document.getElementsByClassName("moveableElement");
Array.from(movabelelements).forEach(element => {
dragElement(element);
});
function dragElement(elem){
var pos1=0,pos2=0,pos3=0,pos4=0;
elem.onmousedown=dragMouseDown;
function dragMouseDown(e){
e=e||window.event;
e.preventDefault();
pos3=e.clientX;
pos4=e.clientY;
document.onmouseup=closeDragElement;
document.onmousemove=elementDrag;
}
function elementDrag(e){
e=e||window.event;
e.preventDefault();
pos1=pos3-e.clientX;
pos2=pos4-e.clientY;
pos3=e.clientX;
pos4=e.clientY;
elem.style.top=(elem.offsetTop -pos2)+"px";
elem.style.left=(elem.offsetLeft-pos1)+"px";
}
function closeDragElement(){
document.omouseup=null;
document.onmousemove=null;
}
}
function printPDF(){
alert('Der Bericht sollte jetzt gedruckt werden');
}
function highLightAllValues(){
Array.from(movabelelements).forEach(element => {
element.classList.add("highlighted");
});
setTimeout(function(){
Array.from(movabelelements).forEach(element => {
element.classList.remove("highlighted");
});
}, 1500);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,h2{
text-align:center
}
.pdffile{
height: 100%;
width: 100%;
}
body,html{
height: 100%;
width: 100%;
}
#values_list_values{
padding: 15px;
}
#values_list{
text-align: center;
}
#values_list_values div{
margin: 15px;
border-bottom: solid;
border-width: 1px;
}
#values_list_values div:hover{
color: red;
}
#values_list_values div span{
margin: 10px;
}
.moveableElement{
border-style: solid;
border-color: transparent;
position: absolute;
z-index: 20;
padding: 20px;
}
.moveableElement:hover{
border-style: solid;
border-color: red;
cursor: move;
}
#values_list{
position: relative;
width: 20%;
display: inline-block;
padding: 10px;
padding-bottom: 50px;
}
#pdfFileWrapper{
width: 80%;
float: left;
height: 100%;
}
#highLightAllValuesButton{
width: 90%;
display: inline-block;
padding: 20px;
margin: 10px;
}
.highlighted{
border-style: solid;
border-color: red;
border-width: 2px;
}
#printButtonArea{
position: fixed;
bottom: 10px;
right: 10px;
width: 20%;
height: 50px;
line-height: 50px;
}
#printButtonArea button{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Vorschau</title>
<link rel="stylesheet" href="vorschau.css">
</head>
<body>
<h1>Druckvorschau PDF</h1>
<div id="pdfFileWrapper">
<object class="pdffile" data="testpdf.pdf" type="application/pdf">
alt : PDF-Vorschau Fehlgeschlagen - Bitte anderen Browser Probieren
</object>
</div>
<div id="values_list">
<div id="printButtonArea">
<button onclick="printPDF()">Print</button>
</div>
<h2>Werte aus der Datenbank</h2>
<button id="highLightAllValuesButton" onclick="highLightAllValues()">Show all text blocks</button>
<div id="values_list_values">
<div>
<h3>One</h3>
<span>xy</span>
</div>
<div>
<h3>Material ID</h3>
<span>12</span>
</div>
<div>
<h3>Some Other ID</h3>
<span>some other id</span>
</div>
<div>
<h3>Identifikation</h3>
<span>lastvalue</span>
</div>
</div>
</div>
<div id="1" style="top:200px;left:100px" class="moveableElement">
Example value
</div>
<div id="2" style="top:250px;left:150px"class="moveableElement">
Car One
</div>
<div id="3" style="top:300px;left:200px" class="moveableElement">
<span>whatever</span>
</div>
<div id="4" style="top:350px;left:250px" class="moveableElement">number 12
</div>
</body>
<script src="vorschau.js"></script>
</html>
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
When adding rectangles the canvas height does not scale with it. Changing the canvas height is not an option. I am searching for weeks how to make this possible. My question is when adding multiple rectangles that the canvas height automatically increases with it for example bij 100 pixels so that it shows the complete rectangle and not only a piece of it like now.
Here is how it is now https://jsfiddle.net/5qybcp84/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IIS7</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/NodeList.js"></script>
<script src="click.js"></script>
<script src="date.js"></script>
<script src='jcanvas.min.js'></script>
<script src="canvasscript.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<b>Nodes</b>
<br>
<div class="scrollbar">
<div class="content">
<canvas id="NodeList" width="200" style="border:2px solid black"></canvas>
</div>
</div>
<div class="Display" id="Display">
<canvas id="NodeDisplay" style="border:2px solid black;" ></canvas>
<script>
var ctx = $('#NodeList').get(0).getContext('2d');
var rects = [[20, 20, 150, 100], [20, 140, 150, 100]];
for(var i=0;i<rects.length;i++) {
ctx.fillRect(rects[i][0],
rects[i][1],
rects[i][2],
rects[i][3]);
}
$('#NodeList').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var i=0;i<rects.length;i++) {
if(x > rects[i][0]
&& x < rects[i][0] + rects[i][2]
&& y > rects[i][1]
&& y < rects[i][1] + rects[i][3]) {
alert('Rectangle ' + i + ' clicked');
}
}
});
</script>
</div>
<div id="canvas-wrap">
<canvas width="600" height="600" style="border:2px solid black;"></canvas>
<div id="overlay"></div>
<div class="een" style="border:2px solid black;" >11111 </div>
<div class="twee" style="border:2px solid black;" >22222 </div>
<div class="drie" style="border:2px solid black;" >33333</div>
<div class="vier" style="border:2px solid black;" >44444 </div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
overflow: hidden;
}
b {
margin-left: 75px;
}
#container {
margin-left:auto;
margin-right:auto;
text-align:center;
}
a img {
border:none;
}
.scrollbar{
width:220px;
height:1050px;
border:1px solid #000;
overflow:scroll;
overflow-x: hidden;
position: fixed;
}
.content{
width:auto;
height:100%;
}
#Display {
margin-left: 580px;
float: left;
}
#NodeDisplay{
float: left;
height: 300px;
width: 600px;
margin-left: -200px;
}
#canvas-wrap {
position:fixed;
margin-left: 380px;
float: left;
position: fixed;
margin-top: 435px;
}
#canvas-wrap canvas {
position:absolute;
top:0;
left:0;
z-index:0
}
.een{
height: auto;
width: 600px;
}
.twee{
height: auto;
width: 600px;
}
.drie {
height: auto;
width: 600px;
}
.vier{
height: auto;
width: 600px;
}
If you want to resize your canvas without stretching your drawings you'll need a draw() method. This draw method will add all object to your canvas. Therefore you'll have to save your object somewhere. You'll need to do this because resizing the canvas clears it. The draw method need to know your current objects and draws them every time you resize the canvas.
You could add some JQuery code:
Everytime you add a rectangle:
$('#NodeList').height("+=100");
draw();
when you delete a rectangle:
$('#NodeList').height("-=100");
draw();
In your example that would be for for-loop right now. But the whole loop.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#gallery
{
width: 960px;
margin: 0 auto;
}
.galleryitem
{
width: 300px;
height: 300px;
float: left;
font-family: Lucida Sans Unicode, Arial;
font-style: italic;
font-size: 13px;
border: 5px solid black;
margin: 3px;
}
.galleryitem img
{
width: 300px;
}
.galleryitem p
{
text-indent: 15px;
}
#galleryhoverp
{
margin-top: -55px;
background-color: black;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
height: 40px;
color: white;
padding-top: 10px;
}
#singleimagedisplay
{
width: 800px;
}
#singleimagedisplay img
{
width: 800px;
}
#singleimagedisplay a
{
float: right;
color: white;
}
</style>
</head>
<body>
<div id="gallery">
<div class="galleryitem">
<img src="computer1.png" alt="A beautiful Sunset over a field" /><p>
A beautiful Sunset over a field</p>
</div>
<div class="galleryitem">
<img src="computer2.png" alt="Some penguins on the beach" /><p>
Some penguins on the beach</p>
</div>
<div class="galleryitem">
<img src="computer3.png" alt="The sun trying to break through the clouds" /><p>
The sun trying to break through the clouds</p>
</div>
<div class="galleryitem">
<img src="computer.png" alt="Palm tress on a sunny day" /><p>
Palm tress on a sunny day</p>
</div>
<div class="galleryitem">
<img src="computer4.png" alt="The sun bursting through the tall grass" /><p>
The sun bursting through the tall grass</p>
</div>
</div>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('p').hide();
var galleryItems = $('.galleryitem');
galleryItems.css('height', '200px');
var images = $('.galleryitem').find('img');
galleryItems.hover(
function () {
$(this).children('p').show().attr('id', 'galleryhoverp');
},
function () {
$(this).children('p').hide().attr('id', '');
}
)
images.click(function () {
$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
})
</script>
Above code is from here: http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/
Question:
For this line: $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
1.I know the first $(this) means the img that clicked, but what does sencond $(this) mean?
2.when I clicked one img on the frontend, I can see see the img get enlarged, and it shows style="height: 533px; in firebug, but how come it is 533px? in css script, there is no such definition as height: 533px.
The second $(this) also means the same as the first one.
What is happening here is, you are getting the parent elemet of the clicked img then set the id to singleimagedisplay then set its height to the heigth of the img that was clicked(This gets the rendered hight of the image) then hides all the sibling elements of the images parent