Develop Reference

Rotate an item on a background image with transform and js

I have a background image and another image element as needle. So you will see 3 tabs above the snippet page. My goal is to change the position of the needle when you click to the buttons. But there are some problems like if you click 2nd or 3th tab first, the needle moves wrong direction.
And if you move between 3th and 1st tabs the bottom of needle is moving out of the black little circle.
How can I achieve my purpose without any visual errors? Maybe some other way to achieve this?
function asama3() {
document.getElementById("ibre").style.transform = "rotate(-68deg)";
document.getElementById("ibre").style.left = "210px";
document.getElementById("ibre").style.top = "178px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(-107deg)";
document.getElementById("ibre").style.left = "157px";
document.getElementById("ibre").style.top = "180px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(-145deg)";
document.getElementById("ibre").style.left = "113px";
document.getElementById("ibre").style.top = "211px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 258px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>

As it rotates at the center, you can create a hidden div and wrap them both in an outer div and makes sure the center lines up with the black dot:
function asama3() {
document.getElementById("outer").style.transform = "rotate(68deg)";
}
function asama2() {
document.getElementById("outer").style.transform = "rotate(107deg)";
}
function asama1() {
document.getElementById("outer").style.transform = "rotate(145deg)";
}
#outer {
display: flex;
width: 300px;
height: 5px;
position: absolute;
left: 108px;
top: 278px;
transition: all 1s;
}
#ibre {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: #070707;
}
#hidden {
width: 150px;
height: 5px;
border-radius: 5px;
background-color: transparent;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama1()">1. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama2()">2. aşama</h1>
</div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;">
<h1 onclick="asama3()">3. aşama</h1>
</div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div id="outer">
<div id="ibre"></div>
<div id="hidden"></div>
</div>
</div>
This way it pivots on that dot to wherever you need it pointing.

Something like this, i think
function asama3() {
document.getElementById("ibre").style.transform = "rotate(140deg)";
document.getElementById("ibre").style.left = "250px";
document.getElementById("ibre").style.top = "220px";
}
function asama2() {
document.getElementById("ibre").style.transform = "rotate(80deg)";
document.getElementById("ibre").style.left = "165px";
document.getElementById("ibre").style.top = "190px";
}
function asama1() {
document.getElementById("ibre").style.transform = "rotate(40deg)";
document.getElementById("ibre").style.top = "220px";
document.getElementById("ibre").style.left = "120px";
}
#ibre {
width:150px;
position: absolute;
left: 100px;
top: 270px;
transition: all 1s;
}
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama1()">1. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama2()">2. aşama</h1></div>
<div style="cursor: pointer; float:left; background-color:red; color:#fff; width:200px;"><h1 onclick="asama3()">3. aşama</h1></div>
<div style="clear:both;"></div>
<div style=" background-image: url('https://i.hizliresim.com/WNguZF.png'); background-repeat:no-repeat; height:281px; width:500px;">
<div style=""><img id="ibre" style="" src="https://i.hizliresim.com/Hmuavw.png"></div>
</div>

Drag and drop not working. JavaScript

I have a div named meniucolaj where I store some images and I want to drag and drop some of them into each canvas drawn in the div conturcanvas to make a photo collage.
To test the code, I only make the first photo to be dragged and the first canvas as drop location. I resized the images to be included in the gallery, but when i drop them into the canvas, i want them to be shown at bigger size into the canvas but i want to choose which part of the picture to be shown into the canvas. You know, as you got the opportunity to choose when making a collage, but the picture is not shown when dragging into the canvas. Can you help me?
Thank you in advance! I'm a beginner here.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Photo Editor</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400">
<link rel="stylesheet" type="text/css" href="testcollage2css.css">
</head>
<body> <!--continutul care va fi afisat pentru utilizatori-->
<!--atasare fisier video pentru background-->
<video autoplay muted loop id="bkgvideo">
<source src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\bkgcity.mp4" type="video/mp4">
</video>
<div class="header">
<nav class="navigation">
<div class="totalnavigheader">
<div class="navheader">
<img id="logo" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\logocollage.png" alt="Logo cannot be displayed">
</div>
<div class="title">
<a id="name" href="#">Photo Collage</a>
</div>
</div>
</nav>
</div>
<div class="clasameniuri" id="meniuri">
<div class="meniucolaj" id="meniupoze">
<h4 id="titluimagini">Imagini</h4>
<ul class="listaimg" id="tabelimg">
<li class="elemimagini"><img class="imagini" id="dragelem" draggable="true" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\dog1.jpg"></li>
<li class="elemimagini"><img class="imagini" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\media\cat1.jpg"></li>
</ul>
</div>
</div>
<div class="containercolaj">
<div id="conturcanvas">
<canvas id="first"></canvas>
<canvas id="second"></canvas>
<canvas id="third"></canvas>
<script>
var canvas1 = document.getElementById("first");
var context1 = canvas1.getContext("2d");
<!--context.rect(1,0,296,100);
<!--context.stroke();-->
var canvas2 = document.getElementById("second");
var context2 = canvas1.getContext("2d");
var canvas3 = document.getElementById("third");
var context3 = canvas1.getContext("2d");
</script>
</div>
</div>
<script type="text/javascript" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\testcollage2js.js"></script>
</body>
</html>
CSS:
/*stilizare background*/
body {
background: #1A2D4B;
position: relative;
color: black;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 17px;
font-weight: 400;
overflow-x: hidden;
}
/*stilizare fisier video ca si background*/
#bkgvideo {
position: fixed;
right: 0;
bottom: 0;
left:0;
top:0;
min-width: 100%;
min-height: 100%;
}
.header {
position: relative;
left: 0;
right: 0;
top: 0;
z-index: 1002;
background-color: rgba(42, 59, 85, 0.6);
height: 80px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
.totalnavigheader > * {
display:inline-block;
}
#logo {
height: auto;
width: 60px;
vertical-align: middle;
margin-left:30px;
}
.title {
padding-left:10px;
padding-bottom:40px;
margin-left:10px;
}
#name {
text-decoration:none;
color:white;
}
.clasameniuri {
position:relative;
background-color: rgba(253, 242, 233, 0.8);
float:left;
width: 382px;
margin-top:8px;
margin-right:6px;
margin-left:5px;
height:560px;
box-shadow: 5px 10px 18px #888888;
border-radius: 10px;
}
#titluimagini {
color:rgb(56, 110, 147);
text-align:center;
}
.listaimg{
list-style-type:none;
}
.elemimagini{
margin:1px;
display:inline;
}
.imagini{
width:100px;
height:100px;
border:2px solid #000;
}
.containercolaj {
position:relative;
background-color:rgba(93, 109, 126,0.8);
float:right;
margin-top:8px;
margin-right:10px;
width:920px;
height:560px;
box-shadow:5px 10px 18px #888888;
border-radius: 10px;
}
#conturcanvas
{
width:490px;
height:490px;
border:2px solid #d3d3d3;
margin-top:20px;
margin-left:215px;
padding:20px;
background-color:gray;
}
#first{
border:1px solid #d3d3d3;
width:232px;
height:485px;
float:left;
}
#second{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
margin-bottom:13px;
}
#third{
border:1px solid #d3d3d3;
width:232px;
height:235px;
float:right;
}
#first > .imagini{
width:100%;
height:100%;
}
JS:
var dragItem = document.getElementById("dragelem");
var dropCanvas = document.getElementById("first");
dragItem.ondragstart = function(evt) { //aceasta functie se apeleaza cand userul incearca sa mute elementul prin drag
//evt.dataTransfer.setData('key', 'dragelem');
evt.dataTransfer.setData('key', evt.target.id);
console.log("its dragging...");
}
dropCanvas.ondragover = function(evt) { //aceasta functie se apeleaza cand un element este adus catre o locatie valida de drop
evt.preventDefault();
console.log("its dragover..");
}
dropCanvas.ondrop = function(evt){ //aceasta functie se apeleaza cand se lasa prin drop in locatia valida elementul adus prin drag
var dropItem = evt.dataTransfer.getData('key');
evt.preventDefault();
console.log("its dropped..");
console.log(dropItem);
var myElement=document.getElementById(dropItem);
console.log(myElement);
var myNewElem = document.createElement('img'); // create a new image element
myNewElem.src = myElement.src;
dropCanvas.appendChild(myNewElem);
}
I suppose that dataTransfer not working..

That is not the correct way to draw an image on a canvas.
You need to get its CanvasRenderingContext2D:
context = dropCanvas.getContext("2d");
Then draw the image by calling
context.drawImage(myNewElem, x, y, more, arguments, here);
You can read about all the arguments drawImage can take here:
https://www.w3schools.com/tags/canvas_drawimage.asp

Multiple drag and drops not working

So far I start with one image, and I can drag it to a box and drop it, and it works fine. But I have a button that generates more images and when I drop them on the same thing the original worked with, they do not drop there.
My code:
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = "drag(event)";
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
Any help would be appreciated! I would like to just be able to make as many new images as I want and be able to drop them into the box!

The ongragstart function on your node need to be point the function like this 'newImg.ondragstart = drag;' with the name of the function, not like this 'newImg.ondragstart = "drag(event)";'
The new code look like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Test</title>
<style>
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
</style>
<script>
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = drag;
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
</script>
</head>
<body>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
</div>
</body>
</html>

The problem is in the line newImg.ondragstart = "drag(event)"; according to https://www.w3schools.com/jsref/event_ondragstart.asp the format should be newImg.ondragstart = function(){drag(event)};. It seems to work...
<!DOCTYPE HTML>
<html>
<head>
<title>Drag and Drop Test</title>
<style>
body {background-color: #ddd; font-family: arial, verdana, sans-serif;}
#drop1 {width: 200px; height: 200px; border: 1px solid black; background-color: white;}
#drag1 {width: 50px; height: 50px;}
.drag {width: 50px; height: 50px;}
</style>
<script>
var myCount = 1;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function addImage() {
var newImg = document.createElement("img");
newImg.src = "apple.png";
myCount += 1;
var myString = "drag" + myCount.toString();
newImg.id = myString;
newImg.draggable = "true";
newImg.ondragstart = function(){drag(event)};
//newImg.ondragstart = "drag(event)";
newImg.style = "width: 50px; height: 50px; padding-right: 4px;"
var theDiv = document.getElementById('imgHolder');
theDiv.appendChild(newImg);
}
</script>
</head>
<body>
<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p> Drag the image below into the box above:</p>
<div style="width: 50px; height: 50px; border:2px solid black; background-color: cyan; text-align: center;" onclick="addImage()">click me!</div>
<div style="border: 2px solid black; height: 200px; width: 500px;" id="imgHolder">
<img id="drag1" src="apple.png" draggable="true" ondragstart="drag(event)"/>
</div>
</div>
</body>
</html>

Automatic change image up to down on time

I need this code without clicking function. I need it with normal slideshow against time.
I mean image will change after 5 sec automatically.
var gallery = $('.content'),
height = gallery.height();
$('.arrow').on('click', function(){
var up = $(this).is('.up_arrow');
if (up) {
gallery.animate({'scrollTop': '-=' + height});
} else {
gallery.animate({'scrollTop': '+=' + height});
}
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow up_arrow">UP</div>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
<div class="arrow down_arrow">DOWN</div>

Like this?
var gallery = $('.content'),
height = gallery.height(),
scrollHeight = gallery[0].scrollHeight,
y = 0;
$(function() {
setInterval(function() {
y += height;
if( y >= scrollHeight ) {
y = 0;
}
gallery.animate({'scrollTop': y });
}, 2000);
});
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>

View this example. Run with plunker
// Add your javascript here
$(function(){
var gallery = $('.content'),
height = gallery.height();
setInterval(function(){
gallery.animate({'scrollTop': '+=' + height},1000,function(){
gallery.animate({'scrollTop':0},0);
gallery.append($('.content img:first'));
});
}, 5000);
});
/* Put your css in here */
h1 {
color: red;
}
.content{
width:400px;
height:300px;
overflow:hidden;
border:1px solid #999;
}
.content img{display:block;}
.arrow{
display:inline-block;
padding:5px 15px;
background:#eee;
border-radius:3px;
margin:3px 0;
cursor:pointer;
border:1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><!-- Title here --></title>
<link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<img src="http://placehold.it/400x300?text=image+1">
<img src="http://placehold.it/400x300?text=image+2">
<img src="http://placehold.it/400x300?text=image+3">
</div>
</body>
</html>

Resize image upon click

Alright so, I need to resize an image on click (according to what the user clicks) a selection of 50%, 100%, and 150%. I also need to include a message that tells the user what % the picture is at once it has been scaled.
I think what I have is correct or in the right direction (well obviously not, since it's not working) wondering if anyone can help me out here... this is what I have currently:
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
var object = document.getElementById('div1');
document.getElementById('small').onclick = function () {change('div1', '50%')};
document.getElementById('medium').onclick = function () {change('div1', '100%')};
document.getElementById('large').onclick = function () {change('div1', '150%')};
}
function change (id, width){
document.getElementById(id).style.width = width;
document.getElementById(id).style.height = 'auto';
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif">
</div>
</main>
</body>
</html>
welp i'm still having issues with this. I need to find out the current size, and then add on to it.... but i'm not sure if i'm doing it correctly... i've changed my code a little, but not even sure if i'm going the right direction. Nothing is changing, and i'm not sure why o.o
<!doctype html>
<html lang="en">
<head>
<title>Change Image Size</title>
<style>
body {width: 80%; margin: auto;}
header {border-bottom: 1px solid #aaa;}
header h1 {font-size: 1.5em;}
nav {float: left; width: 15%; margin: 2% 2%; }
main {float: left; width: 60%; border: 0px black solid; margin: 2% 2%; height: 500px; padding: 1em;}
main img {border: 1px black solid;}
nav span {display: inline-block; width:100px; height: 30px; border: 1px solid black; border-radius: 10px; text-align: center; margin-bottom: 1em; background-color: green; color: white;}
</style>
<script>
function init (){
document.getElementById('small').onclick = function () {change('div1',50,50)};
document.getElementById('medium').onclick = function () {change('div1',100,100)};
document.getElementById('large').onclick = function () {change('div1',150,150)};
}
function change(id, y, x){
var img = document.getElementById('div1');
img.style.width = img.offsetWidth + y + "px";
img.style.height = img.offsetHeight + x + "px";
document.getElementById(id).style.width = y;
document.getElementById(id).style.height = x;
}
window.onload = init;
</script>
</head>
<body>
<header><h1>CTEC 4350 DHTML Exercise: Change Image Size</h1></header>
<nav>
<span id="small">50%</span>
<span id="medium">100%</span>
<span id="large">150%</span>
</nav>
<main>
<p> This image is displayed at 150% of its orignal size. (The number of % changes based on the size option picked by the user.)</p>
<div id="div1">
<img src="http://omega.uta.edu/~cyjang/ctec4350/labex/dhtml/alice28a.gif" height="400px" width="400px">
</div>
</main>
</body>
</html>