jQuery 'drop' function is not being called, overridden by 'over' function - javascript

I am dragging the drag to container1 and container2.
When it is dropped, drag either turns dark purple if in container1 or dark orange if in container2.
When drag is passing through container1, it should turn green, and when it is passing through container2, it should turn yellow (essentially drag can change to 4 different colors).
This is what I have, this changes drag when it hovers over container1 and container2, but it does not change color when it is dropped.
It seems the over function, which handles the hovering, overrides whatever I define my drop function to be.
Does anyone know what is going on?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
width: 50px;
height: 50px;
background: #e9559a;
padding: 13px;
margin: 0 5px 5px 0;
}
.bdrag {
height: 100px;
width: 100px;
background: grey;
padding: 5px;
}
.dark-purple {
background: #8b0000;
}
.dark-orange {
background: #000080
}
.drop-green {
background: #38a53a;
}
.drop-yellow {
background: #fbff23;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="shape-container">
<div id="origin-container" class="container">
<div id="dragbox" class="bdrag text-dark">
<p>Draggable Box</p>
</div>
</div>
<div id="dcontainer2" class="container">
<p>Can drop in here #1</p>
</div>
<div id="dcontainer1" class="container">
<p>Can drop in here #2</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(function() {
$("#drag-container").draggable({
revert: function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top: 0,
left: 0
};
return !event;
}
});
$("#dcontainer1").droppable({
accept: '#dragbox'
});
$("#dcontainer2").droppable({
accept: '#dragbox'
});
$( "#dcontainer2" ).droppable({
over: function() { $("#dragbox").addClass("drop-yellow").removeClass("drop-green"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-orange").removeClass("drop-purple").find("p"); }
});
$( "#dcontainer1" ).droppable({
over: function() { $("#dragbox").addClass("drop-green").removeClass("drop-yellow"); },
<!-- THE FOLLOWING LINE DOES NOT RUN: --!>
drop: function() { $("#dragbox").addClass("drop-purple").removeClass("drop-orange").find("p"); }
});
});
});
</script>
</body>
</html>

Related

How do i reset my cat to the original size it was

var click = 10;
$(document).ready(function() {
// nav bar event listeners set up
$('.navDiv').mouseenter(mouseEnterButton);
$('.navDiv').mouseleave(mouseLeaveButton);
//TODO add your code below to attach event listeners to the buttons
// We did the first one for you. You can use the `.click()` function or
// the .on('click') like we did below.
$('#fadeDiv').on('click', fadeCat());
$('#fadeDiv').on('click', hideCat());
$('#fadeDiv').on('click', animateCat());
$('#fadeDiv').on('click', resetCat());
});
// nav bar function to fade when mouse enters button
function mouseEnterButton() {
console.log('enter');
$(this).fadeTo('fast', 0.5);
}
// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
console.log('leave');
$(this).fadeTo('fast', 1);
}
// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
//TODO your function code here
// toggle catImg fade
// append '<p>fade toggle</p>' to 'clickList'
$("#fadeDiv").click(function() {
$("#catImg").fadeToggle('fast', "linear");
$("#clickList").append('<p>fade toggle</p>');
});
}
// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
//TODO your function code here
// hide catImg
// append '<p>hide toggle</p>' to 'clickList
$("#hideDiv").click(function() {
$("#catImg").toggle('slow');
$("#clickList").append('<p>hide toggle</p>');
});
}
// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
//TODO your function code here
// animate catImg
// append '<p>animate</p>' to 'clickList'
$('#animateDiv').click(function () {
$('#catImg').animate({
height:'+= 10px',
width:'+=10px'
});
$("#clickList").append("<p>animate</p>");
});
}
// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
// reset catImg
// append '<p>reset</p>' to 'clickList'
$('#resetDiv').click(function () {
$('#catImg').animate({
height:'-= 10px' ,
width:'-=10px'//solution for now untill i find out how to make it work
});
$("#clickList").append("<p>reset</p>");
});
}
body {
font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
height: 30px;
width: 120px;
border-radius: 5px;
padding-top: 10px;
margin: 5px;
text-align: center;
color: #FFFFFF;
background-color: #69D2E7;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#outPut {
height: 200px;
width: 400px;
}
img {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-2</title>
<link href='styles.css' rel='stylesheet' type='text/css'/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src='script.js' type='text/javascript' ></script>
</head>
<body>
<h1>Burrito Cat</h1>
<div class="navDiv" id="fadeDiv">Fade Me!</div>
<div class="navDiv" id="hideDiv">Hide Me!</div>
<div class="navDiv" id="animateDiv">Animate Me!</div>
<div class="navDiv" id="resetDiv">Reset Me!</div>
<div id="outPut">
<img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
</div>
<div id="clickList">
</div>
</body>
</html>
How do I make the image resize to the correct size? (I don't know how to put in the cat picture.)
You can read in the original height and width after the image loads, and either just keep it in a variable or assign it as a data- attribute to the element.
Here's an example.
$(window).on("load", function() {
var $cat = $("#catImg"),
height = $cat.height(),
width = $cat.width();
$cat.on("click", function() {
if ($(this).hasClass("big")) {
$(this).animate(
{
height: height,
width: width
},
500
);
} else {
$(this).animate(
{
height: "+=10px",
width: "+=10px"
},
500
);
}
$(this).toggleClass("big");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="catImg" src="https://d4n5pyzr6ibrc.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/4785B1C2-8734-405D-96DC23A6A32F256B/thul-90efb785-97af-5e51-94cf-503fc81b6940.jpg?response-content-disposition=inline">
find the height and width of img first, then reset to it:
var click = 10;
var imgHeight;
var imgHeight;
$(document).ready(function() {
imgHeight = $('#catImg').height();
imgWidth = $('#catImg').width();
// nav bar event listeners set up
$('.navDiv').mouseenter(mouseEnterButton);
$('.navDiv').mouseleave(mouseLeaveButton);
//TODO add your code below to attach event listeners to the buttons
// We did the first one for you. You can use the `.click()` function or
// the .on('click') like we did below.
$('#fadeDiv').on('click', fadeCat());
$('#fadeDiv').on('click', hideCat());
$('#fadeDiv').on('click', animateCat());
$('#fadeDiv').on('click', resetCat());
});
// nav bar function to fade when mouse enters button
function mouseEnterButton() {
console.log('enter');
$(this).fadeTo('fast', 0.5);
}
// nav bar function to fade when mouse enters button
function mouseLeaveButton() {
console.log('leave');
$(this).fadeTo('fast', 1);
}
// fadeCat is a function to fade cat in or out when that button is clicked
function fadeCat(e, complete) { // ignore e, use complete as the last argument to any jQuery fade functions
//TODO your function code here
// toggle catImg fade
// append '<p>fade toggle</p>' to 'clickList'
$("#fadeDiv").click(function() {
$("#catImg").fadeToggle('fast', "linear");
$("#clickList").append('<p>fade toggle</p>');
});
}
// hideCat is a function to hide and show the cat image when that button is clicked
function hideCat() {
//TODO your function code here
// hide catImg
// append '<p>hide toggle</p>' to 'clickList
$("#hideDiv").click(function() {
$("#catImg").toggle('slow');
$("#clickList").append('<p>hide toggle</p>');
});
}
// animateCat is a function to grow the cat's height and width by 10px when that button is clicked
function animateCat(e, complete) { // ignore e, use complete as the last argument to the jQuery animate function
//TODO your function code here
// animate catImg
// append '<p>animate</p>' to 'clickList'
$('#animateDiv').click(function () {
$('#catImg').animate({
height:'+= 10px',
width:'+=10px'
});
$("#clickList").append("<p>animate</p>");
});
}
// Hard Mode
// resetCat is a function to reset the cat photo to its original size
// when that button is clicked.
function resetCat() {
// reset catImg
// append '<p>reset</p>' to 'clickList'
$('#resetDiv').click(function () {
$('#catImg').animate({
height: imgHeight,
width: imgWidth//solution for now untill i find out how to make it work
});
$("#clickList").append("<p>reset</p>");
});
}
body {
font-family: Verdana, Arial, Sans-Serif;
}
.navDiv {
height: 30px;
width: 120px;
border-radius: 5px;
padding-top: 10px;
margin: 5px;
text-align: center;
color: #FFFFFF;
background-color: #69D2E7;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#outPut {
height: 200px;
width: 400px;
}
img {
margin-left: auto;
margin-right: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Assignment 6-2</title>
<link href='styles.css' rel='stylesheet' type='text/css'/>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src='script.js' type='text/javascript' ></script>
</head>
<body>
<h1>Burrito Cat</h1>
<div class="navDiv" id="fadeDiv">Fade Me!</div>
<div class="navDiv" id="hideDiv">Hide Me!</div>
<div class="navDiv" id="animateDiv">Animate Me!</div>
<div class="navDiv" id="resetDiv">Reset Me!</div>
<div id="outPut">
<img id="catImg" src="imgs/burrito-cat.png" alt="burrito cat">
</div>
<div id="clickList">
</div>
</body>
</html>

Jquery .data keeps going undefined on draggable element in droppable area

I been struggling with this all morning and I can't seem to figure out what the issue is. On my page I have a draggable text field. (It has a static ID for testing purposes when you first drag it to the canvas as "item-text-1")
When I first drag the item down in the console log you can clearly see a "1" being outputed from the $("#item-text-1").data("test") however as you continue to drag it around a few times, it will start to go to "undefined" for some reason and I have absolutely no idea how to fix this. I tried doing ui.helper.detached() then also removed that all together and I'm just lost at this point.
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$( function() {
function setDraggable(el, doClone) {
el.draggable({
helper: doClone ? 'clone' : "original"
});
}
$(".pages").droppable({
accept: ".draggable",
drop: function( event, ui ) {
cloned = ui.helper.clone();
cloned.removeClass('ui-resizable');
var applyData = false;
if (ui.draggable.hasClass('cloned') == false) {
applyData = true;
console.log("this is a clone!");
cloned.addClass('cloned');
}
cloned.find(".ui-resizable-handle").remove();
cloned.find(".ui-resizable").remove();
cloned.find("resizable").remove();
cloned.removeClass('ui-resizable');
cloned.resizable().draggable();
setDraggable(cloned, false)
cloned.attr("id", "item-text-1");
$( this )
.append(cloned)
if (applyData == true) {
$("#item-text-1").data("test", "1");
console.log($("#item-text-1").data("test"));
} else {
console.log($("#item-text-1").data("test"));
}
var newTop = $(ui.helper).offset().top - $(this).offset().top;
var newLeft = $(ui.helper).offset().left - $(this).offset().left;
cloned.css("top", newTop);
cloned.css("left", newLeft);
//ui.helper.detach();
}
});
$(".pagesWrapper").droppable({
accept: ".draggable",
drop: function( event, ui ) {
ui.helper.remove();
}
})
setDraggable($(".draggable"), true);
$( "#tab-container" ).tabs();
} );
</script>
</head>
<body style="text-align:center; margin: 0;">
<div id="template-container" style="width: 880px; height: 775px; background-color: #f3f3f3; margin: auto; border: 3px solid #636363; padding: 8px;">
<div id="roles-tabs" style="padding-left: 0px; height: 90px; width: 100%; border-bottom: 1px solid #ddd;">
<div id="button-container" style="float: left; width: 60px; height: 80px; display: block;"> </div>
<div id="tab-container" style="width: 600px; float: left; padding-right: 5px; padding-top: 5px; height: 80px;">
<ul>
<li>Data Fields</li>
</ul>
<div id="tabs-formfields">
<table>
<tbody>
<tr>
<td style="padding-right: 6px;">
<div id="item-textfield" name="item-textfield" class="items-textfield draggable draggable-item" style="width: 100px; height: 30px; cursor: pointer; background-color: black; color: white; z-index: 99999">
<div class="new-textfield-field">
<div class="fake-data">Text Field</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="showPDF" class="pdf-container pagesWrapper" style="z-index: 0; padding-top: 50px; width: 880px; padding-bottom: 50px; height: 515px; overflow-y: auto; background-color: #565656;">
<div style="margin: auto;" class="canvas">
<div id="page1" class="pages" style="position: relative; margin: auto; width: 400px; height: 500px; background-color: white;">
</div><br /><br />
</div>
</div>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Ok, so here's why the current implementation is not working:
You have two droppable areas:
$(".pages").droppable({
...
and
$(".pagesWrapper").droppable({
When you drag the element the first time, a clone is created by jquery ui and dropped into the page container. Let's say clone "no-id". Then in the page droppable, the "no-id" is again cloned by this
cloned = ui.helper.clone();
...
cloned.attr("id", "item-text-1");
Now you have on the dom two elements "no-id" and "item-text-1".
When you assign the data to the element by id "item-text-1" this data will be assigned to the single element with that id.
After this handler finishes, you have the second droppable handler, that will also perform his logic upon the "no-id" element and remove it from the dom.
ui.helper.remove();
Now you have only one clone remaining : "item-text-1".
When you drag the remaining clone the second time you will create another clone because of the page droppable handler, and you will have two elements with the id "item-text-1".
When you display now the data in the "item-text-1" element, because byId will return the first occurrence, you will see the data set before, in the first drag. The second element has no data attached to it.
When the pagesWrapper droppable will be invoked, then first element with the id "item-text-1" will be removed, and you will only have the last element available in the dom, that does not have the data anymore.
And from here on the data is lost.
In order to preserve the data, you will need to assign it to the new object after you clone the source object:
cloned = ui.helper.clone();
cloned.data('test', ui.helper.data('test'));
In this way you will always have the data with you, but be aware that your text control is always a new one, not the original clone.

How do I align text/class with the button in the <style> tag when it won't center in css or style tag?

I put margin-auto in the toggle class on my site. It sort of went it the middle but it didn't align with the button. Do I need to do something in CSS or JavaScript and what should I place there?
<style>
.toggler { width: 500px; height: 200px; position: relative; margin-top:0; margin-right:auto; margin-bottom:0;
}
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
.ui-effects-transfer { border: 2px dotted gray; }
.kiri{text-align:center;}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$( function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// Most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 50 };
} else if ( selectedEffect === "transfer" ) {
options = { to: "#button", className: "ui-effects-transfer" };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// Run the effect
$( "#effect" ).effect( selectedEffect, options, 500, callback );
};
// Callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// Set effect from select menu value
$( "#button" ).on( "click", function() {
runEffect();
return false;
});
} );
</script>
</head>
<body>
<nav>
<ul>
<li>Contact</li>
<li>JQUERY TIPS</li>
<li>JS TIPS</li>
<li>Info</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<h2>Jquery Tips</h2>
<p id="js">JavaScript/jQuery is a programming language that you can use to add interactivity to your web page.</p>
<p id="poo"> if you put your mouse over the sentence above there will be a light blue highlight the lightgray background that was made using the <span class="pink">onmouse event.</span>
<div class="footer">
<span class="flatorange">#2016-20XX &#8226 Nia Daniels &#8226 FINAL EXAM &#8226 CIST1520 </span><br>
<span class="flatblue">Scripting Technologies</span><br>
<span class="flatgreen">Mr.Cash</span><br>
</div>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">2 Jquery Effects</h3>
<p id="hmm">eres una mujer o hombre? soy una mujer. quiero una pizza. queires una pizza o no?</p>
</div>
</div>
<div class="kiri">
<select name="effects" id="effectTypes">
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
</select></div>
<div class="kiri">
<button id="button" class="ui-state-default ui-corner-all">Run Le Effect</button></div>
<script>
Add margin: 0 auto; to both .toggler and #effect and it should do the trick. Since you set a width on #effect you'll need the auto margin to handle the centering for you.

Drag and dropping images between panels

I am trying to create two panels using jQuery UI layout plugin, and then being able to drag & drop images between the two panels, on the right, the dropped image should maintain the position where it was dropped (and be able to drag it and keep the position anywhere on that right panel), then when drag & dropping from right to left panel the image should align like the originals.
This is the code im working on https://jsfiddle.net/Lwbka9ww/4/:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Layout Container</title>
<link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 1200px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="external/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="external/layout/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout({
west: { size: "20%" }
});
var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );
$( ".ui-layout-west .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
$right.droppable({
accept: ".ui-layout-west .drag",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
$(".accept").append(ui.draggable);
$(ui.draggable).css("position", "absolute");
}
});
/*$( ".ui-layout-center .drag" ).draggable({
cancel: "a.ui-icon",
revert: "invalid",
containment: "#container",
cursor: "move",
helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
});
//$( "li", $('.ui-layout-center') ).draggable();
function imageDropped( $item ) {
$item.fadeOut('fast', function() {
var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
$item.appendTo( $list ).fadeIn('fast');
});
}*/
});
</script>
<style>
.drag {
cursor: move;
clear: both;
padding-top: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="pane ui-layout-center">
<div class="accept"></div>
</div>
<div class="pane ui-layout-west">
<div class="drag">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" />
</div>
<div class="drag">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" />
</div>
<div class="drag">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
</div>
</div>
</div>
</body>
</html>
My main problem is keeping the initial position and maintaining drag changes on the left panel, I haven't worked on right to left drag & drop yet.

Next / previous arrows to cycle through divs

I want to add two arrows to the sides of the "boxes" divs (below) to cycle through the 3 divs.
Working JSFiddle: https://jsfiddle.net/HBHcC/11/
Can someone help me with this?
HTML:
<div class="container">
<div class="boxes">
<div class="one box">
</div>
<div class="two box">
</div>
<div class="three box">
</div>
</div>
</div>
CSS:
.container{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.box {
display:inline-block;
float: left;
width: 100px;
height: 100px;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:blue;
}
.boxes{
width:400px;
}
JS:
$(document).ready(function(){
$('.box').on("click", function() {
// Is this the last div, or is there a next one?
if ($(this).next().length) {
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
}
});
});
After adding arrows to the div, here is a new fiddle that should get you started:
$('.rightarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
https://jsfiddle.net/tx2yg06w/1/
Updated w/arrows moved out of divs:
$(document).ready(function(){
var animSpeed = 200;
$('.rightarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
});
https://jsfiddle.net/b56r0d72/
Errata has given you a good solution. Just wire up his code to the arrows in the snippet below.
Run snippet to view:
<html>
<body>
<style type="text/css">
.leftarrow, .rightarrow {
font-size: 48px;
color: blue;
text-decoration: none;
}
.rightarrow {
color: red;
float: right;
}
.content {
width: 200px;
padding: 4px;
border: 1px gray solid;
}
.box {
height: 200px;
border: 1px green solid;
}
</style>
<div class="content">
<div>
◀
▶
</div>
<div class="box">slide</div>
</div>
</body>
</html>

Categories

Resources