resizing image while dragging and dropping in javascript - javascript

We're trying to make a school project like an online delivery system.. but it will have a little tweak like drag and drop system and food customization. Like when you drag a sauce to the main image which is a bowl of rice. it would automatically change the image to a rice with sauce. sane as protein veggies and more.
I'm trying to figure out how to change image or adopting it to the main image while i drag and drop it also.. changing some of its attributes in CSS.
Also maybe there's a function that when I drag a specific image it would change the main image to a different image not the dragged one.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
leftbox = document.getElementById("mainbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/image1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/image2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/image4.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/image5.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
var code = '<img id="centerimg" src="images/center.png">';
ondrop
}
function drop(event){
event.preventDefault();
var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);
#centerimg{
width:500px;
height: 500px;
}
#img2, #img1, #img3, #img4{
width:150px;
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center><div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div></center>
</div>
</body>
</html>

Related

Hide/Show Buttons

I am trying to make a button for each picture that will hide the other two. For example if I click the button for the left image, the left image will show and it will hide the middle and right pictures. HTML needs to stay the same, any suggestions?
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
</div>
<script>
var hideShowButton = document.getElementById("hideShowButton");
hideShowButton.onclick = function() {
var allImages = { left: "left", center: "middle", right: "right" };
if(document.getElementById("michelangelo").style.visibility == 'visible') {
for (var image in allImages) {
document.getElementById(allImages[image]).style.visibility = 'hidden';
}
document.getElementById("hideShowButton").innerHTML = "Hide";
}
}
</script>
When the button inside div controls is clicked, he execute the function showImage().
This function get all figure elements and set a display as none.
Then we get the attribute data-artist of the element that trigger the function, that is the same as the figure, and add a display style as block on the figure that has the same attribute data-artist that the element.
function showImage(event){
var objClass = event.getAttribute("data-artist");
var elems = document.getElementsByTagName("figure");
for (var i=0;i<elems.length;i++)
elems[i].style.display = 'none';
var element = document.querySelector('figure[data-artist='+objClass+']');
element.style.display = 'block';
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" alt>
<figcaption>left image</figcaption>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" alt>
<figcaption>middle image</figcaption>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" alt>
<figcaption>Right image</figcaption>
</figure>
</div>
<div id="controls">
<button data-artist="left" onclick="showImage(this);">left</button>
<button data-artist="middle" onclick="showImage(this);">center</button>
<button data-artist="right" onclick="showImage(this);">right</button>
</div>
</body>
</html>
<div id="works">
<figure data-artist="left">
<img src="david.jpg" id="image1" alt>
<figcaption>left image</figcaption>
<button onclick="hideshow('1');">Choose</button>
</figure>
<figure data-artist="middle">
<img src="david-plaster.jpg" id="image2" alt>
<figcaption>middle image</figcaption>
<button onclick="hideshow('2');">Choose</button>
</figure>
<figure data-artist="right">
<img src="florence-cathedral.jpg" id="image3" alt>
<figcaption>Right image</figcaption>
<button onclick="hideshow('3');">Choose</button>
</figure>
</div>
<div id="controls">
</div>
<script>
function hideshow(buttonpressed) {
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");
var img3 = document.getElementById("image3");
if(buttonpressed==1) {
img1.style.visibility == 'visible';
img2.style.visibility == 'hidden';
img3.style.visibility == 'hidden';
}
if(buttonpressed==2) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'visible';
img3.style.visibility == 'hidden';
}
if(buttonpressed==3) {
img1.style.visibility == 'hidden';
img2.style.visibility == 'hidden';
img3.style.visibility == 'visible';
}
}
</script>
If there will be many buttons (not 3), approach would be different than this
Hope this helps

Javascript adopting image size when dropped

As you can see in the code below I would like to drag an image to the id "centerimg". I've hidden several images cause that's the images who would adopt to the center image. The problem is it doesn't adopt to the size of the center image. It takes the size of the image being dragged. I've tried manipulating its CSS through DOM elements and the only image that changed it's size is the initial image that was dragged.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text');
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2, #img1, #img3, #img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>
Possible solution: in the dropped function force the new img tag to get the 500px width and height. In this solution I put width and height hardcoded, but I think there is also the possibility to overcome this.
function doFirst() {
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
centerbox = document.getElementById("mainbox");
centerbox.addEventListener("dragenter", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("dragover", function(e) {
e.preventDefault();
}, false);
centerbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
var code = '<img id="img1" src="images/ph1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e) {
var code = '<img id="img2" src="images/ph2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e) {
var code = '<img id="img2" src="images/ph3.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e) {
var code = '<img id="img2" src="images/ph4.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e) {
e.preventDefault();
centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox);
centerbox.getElementsByTagName("img")[0].style.width = "500px";
centerbox.getElementsByTagName("img")[0].style.height = "500px";
}
function drop(event) {
}
window.addEventListener("load", doFirst, false);
#centerimg {
width: 500px;
height: 500px;
}
#img2,
#img1,
#img3,
#img4 {
width: 150px;
height: 150px;
}
#img5 {
visibility: hidden;
}
.changeimagesize {
height: 500px;
width: 500px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center>
<div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div>
</center>
</div>
<!-- hidden images here-->
<img id="img5" class="img5" src="images/ph1.jpg">
<img id="img5" class="img5" src="images/ph2.jpg">
<img id="img5" class="img5" src="images/ph3.jpg">
<img id="img5" class="img5" src="images/ph4.jpg">
<img id="img5" class="img5" src="images/ph5.jpg">
<!--end of hidden images-->
</body>
</html>

change thumbnail image for main image

do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">

jquery Missing Manual tutorial: replaceWith() into hover() not working

I'm dealing with the jquery Missing Manual (O'Reilly) tutorial of page 215.
Given this HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rollover Images</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#gallery img {
display: inline-block;
margin: 10px;
border: 1px solid rgb(0,0,0);
}
</style>
<script src="../_js/jquery.min.js"></script>
<script src="my_scripts/rollover.js"></script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>Rollover Images</h1>
<p>Mouse over the images below</p>
<div id="gallery"> <img src="../_images/small/blue.jpg" width="70" height="70" alt="blue"> <img src="../_images/small/green.jpg" width="70" height="70" alt="green"> <img src="../_images/small/orange.jpg" width="70" height="70" alt="orange"> <img src="../_images/small/purple.jpg" width="70" height="70" alt="purple"> <img src="../_images/small/red.jpg" width="70" height="70" alt="red"> <img src="../_images/small/yellow.jpg" width="70" height="70" alt="yellow"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
The tutorial is asking me to rollover the "large" images onto the small ones shown when the page initially loads.
The book proceeds in completing the forementioned task using a regular expression trick.
I don't want to complete this tutorial in the suggested way and I tried to figure out how I can perform the image rollover correctly by only using the replaceWith function inside the hover function.
I came up to this script (rollover.js):
$(document).ready(function() {
$('#gallery a').each(function(){
if ("$(this)[href*='large']" ){
$('<img>').attr('src',$(this).attr('href'));
}
});
$('#gallery img').each(function(){
var $oldimage = 0;
$(this).hover(
function(){
$oldimage = $(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
console.log('old image' + $oldimage);
}
,
function(){
$(this).replaceWith('$oldimage');
console.log('comeback' + $oldimage);
});
});
}); // end ready
The result is that the first part (mousenter) of the hover function is correctly performed, but the second part (mouseleave) of the hover function seems to not be executed at all, even the console.log.
The problem is caused by what you're doing in the first handler. In using replaceWith, you are altering the DOM (specifically the img element you have bound the hover event to) and affecting the event bindings in place.
Instead of using replaceWith, you should use the attr function to update the image src attribute.
EDIT
Try this, for example: http://jsfiddle.net/3dr7n8b7/1/
try this:
$(document).ready(function() {
$('#gallery a').each(function(){
if ("$(this)[href*='large']" ){
$('<img>').attr('src',$(this).attr('href'));
}
});
$('#gallery img').each(function(){
var $oldimage = 0;
$(this).on('mouseover',
function(){
console.log($(this));
$oldimage = $(this).attr('src');
$(this).replaceWith('<img src=' + $(this).parent().attr('href') + '>');
// $('#gallery img').each(function(){
$(this).on( "mouseleave", function(){
$(this).replaceWith('<img src=' + $oldimage + '>');
console.log('comeback' + $oldimage);
});
// });
console.log('old image' + $oldimage);
});
});
}); // end ready

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources