I'm working on a scheduling widget concept. The basic idea is to have a row of DIVs for each day of the week. Each row has a fixed number of time periods represented by DIVs. I want to be able to resize each DIV by dragging a handle on the left hand side. The leftmost DIV cannot be dragged, but it resizes depending on the resizing of the DIV to its right. This continues down the row, i.e., the DIV to the left is resized automatically when the DIV to the right is resized. I'm using the Resizable widget in jQuery UI for the basic resize function.
I have prepared an example fiddle at: https://jsfiddle.net/profnimrod/rpzyv0nd/4/
For some reason the draggable handle on the left hand side of each DIV (other than the first one) is not moving as I would expect.
The Fontawesome icon inside each DIV (other than the first one), which I'd like to use as the resize handle is also not displaying.
Any ideas on how to fix these two issues.
Note that the there is a canvas element behind the DIV containing the row. The intent here is that I will be adding graphical elements behind the rows at somepoint (the row DIVs will be transparent).
The code I'm starting with (available at the Fiddle) is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-6jHF7Z3XI3fF4XZixAuSu0gGKrXwoX/w3uFPxC56OtjChio7wtTGJWRW53Nhx6Ev" crossorigin="anonymous">
<style>
#container { width: 600px; height: 300px; }
#resizable1 { width: 150px; height: 50px; display:inline; float:left;}
#resizable2 { width: 150px; height: 50px; display:inline; float:left;}
#resizable3 { width: 150px; height: 50px; display:inline; float:left;}
#resizable4 { width: 142px; height: 50px; display:inline; float:left;}
#resizable1, #resizable2, #resizable3, #resizable4, #container { padding: 0em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#resizable2" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable1").width($("#resizable1").width() + 50);
}
else {
$("#resizable1").width($("#resizable1").width() - 50);
}
}
});
$( "#resizable3" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable2").width($("#resizable2").width() + 50);
}
else {
$("#resizable2").width($("#resizable2").width() - 50);
}
}
});
$( "#resizable4" ).resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
//var change = ui.size.width - ui.originalSize.width;
if(ui.originalSize.width > ui.size.width)
{
$("#resizable3").width($("#resizable3").width() + 50);
}
else {
$("#resizable3").width($("#resizable3").width() - 50);
}
}
});
});
</script>
</head>
<body>
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active">
</div>
<div id="resizable2" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fa fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
</body>
</html>
Consider the following Fiddle: https://jsfiddle.net/Twisty/0r8v47yL/29/
JavaScript
$(function() {
$(".re-size").resizable({
grid: 50,
handles: "w",
maxHeight: 50,
minHeight: 50,
containment: "#container",
resize: function(e, ui) {
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
}
});
});
I added classes to your DIV elements to make it easier to assign. First thing to know about resizing on w is that both left and width of the element will be adjusted. For example if you have:
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
This being set in CSS to 150px width and 50px height, when we drag the handle over, the left will be updated to say 45px and width will be changed to 105px. From a UI perspective this is what the user is expecting the action to do, the left hand side is moved. For your project, this does not work well.
Another issue that this does not address is that widening the element becomes more difficult. You can look at the event and review mouse movement to see if the user is trying to move the mouse closer to the left edge.
More complete example: https://jsfiddle.net/Twisty/0r8v47yL/61/
HTML
<div class="scheduleWrapper">
<div id="canvasOverlay" style="position:absolute; width:600px !important; display:block; z-index:9999">
<div id="container" class="ui-widget-content">
<div id="resizable1" class="ui-state-active no-re-size item">
</div>
<div id="resizable2" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable3" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
<div id="resizable4" class="ui-state-active re-size item">
<div class="ui-resizable-handle ui-resizable-w">
<span class="fas fa-cogs fa-fw"></span>
</div>
</div>
</div>
</div>
<canvas style="width: 600px; height: 300px;"></canvas>
</div>
JavaScript
$(function() {
$(".re-size").resizable({
handles: "w",
containment: "#container",
resize: function(e, ui) {
//console.log(e);
var x = e.originalEvent.originalEvent.movementX;
ui.position.top = 0;
ui.position.left = 0;
ui.size.height = 50;
if (x < 0) {
console.log(ui.size.width + Math.abs(x));
ui.element.width(ui.size.width + 50);
} else {
ui.size.width = ui.size.width - 50;
}
}
});
});
Hope this helps.
Related
I am working with my Portfolio and I am stuck in animated skill bar. I am using JQuery and I have followed different tutorials but none of them isn't working in my project. I have calculate section scroll position and window scroll position. I changed Parent div and child div, but the result are same. Here is My Code
$(document).ready(function() {
var skillBar = $('.skill-body');
$(window).scroll(function() {
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();
skillBar.each(function() {
if (SkillLocation <= scrollLocation) {
$(this).find('.inner-skill-bar').animate({
width: $(this).attr('data-percent')
}, 2000);
}
});
});
});
.outer-skill-bar {
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar {
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="Education-Skill">
<div class="row">
<div class="col-md-6 skill" id="skill">
<div class="all-skill">
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-html5 fa-lg"></i>
<p>HTML5</p>
</div>
<div class="skill-body d-flex" data-percent="90%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">90%</p>
</div>
</div>
</div>
<!--my-skill-->
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-css3-alt fa-lg"></i>
<p>CSS3</p>
</div>
<div class="skill-body d-flex" data-percent="80%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">80%</p>
</div>
</div>
</div>
<!--my-skill-->
</div>
<!--all skill-->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--Container-->
You just have to decrease the skillPosition variable a bit, so that it starts the animation when it appears on your screen. For this example I just used - 100, but you can tailor it any way you want:
$(document).ready(function(){
var skillBar = $('.skill-body');
$(window).scroll(function(){
var SkillLocation = $("#Education-Skill").offset().top;
var scrollLocation = $(this).scrollTop();
skillBar.each(function(){
if(SkillLocation - 100 <= scrollLocation)
{
$(this).find('.inner-skill-bar').animate({width:$(this).attr('data-percent')}, 2000);
}
});
});
});
.vertical-offset {
width: 100%;
height: 250px;
}
.outer-skill-bar{
height: 26px;
width: 100%;
border: 1px solid black;
}
.inner-skill-bar{
height: 100%;
width: 0%;
background: lightcoral;
border-right: 0.5px solid rgb(146, 136, 136);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="vertical-offset">Scroll down...</div>
<div class="container" id="Education-Skill">
<div class="row">
<div class="col-md-6 skill" id="skill">
<div class="all-skill">
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-html5 fa-lg"></i>
<p>HTML5</p>
</div>
<div class="skill-body d-flex" data-percent="90%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">90%</p>
</div>
</div>
</div> <!--my-skill-->
<div class="my-skill">
<div class="skill-head d-flex">
<i class="fab fa-css3-alt fa-lg"></i>
<p>CSS3</p>
</div>
<div class="skill-body d-flex" data-percent="80%">
<div class="outer-skill-bar">
<div class="inner-skill-bar"></div>
</div>
<div class="percent">
<p class="skill-value">80%</p>
</div>
</div>
</div> <!--my-skill-->
</div><!--all skill-->
</div> <!--col-->
</div> <!--row-->
</div> <!--Container-->
<div class="vertical-offset"></div>
Don't use scroll event listener for this kind of stuff, it's bad for browser performance.
You should rather use Intersection Observer (IO) for this, this was designed for such problems. With IO you can react whenever an HTML element intersects with another one (or with the viewport)
Check this page, it shows you how to animate an element once it comes into viewport (scroll all the way down)
Short recap on what you have to do:
First you have to create a new observer:
var options = {
rootMargin: '0px',
threshold: 1.0
}
var observer = new IntersectionObserver(callback, options);
Here we define that once your target Element is 100% visible in the viewport (threshold of 1) your callback Function is getting executed. Here you can define another percentage, 0.5 would mean that the function would be executed once your element is 50% visible.
Then you have to define which elements to watch, in your case this would be the counter elements:
var target = document.querySelector('.counter');
observer.observe(target);
Last you need to specify what should happen once the element is visible in your viewport by defining the callback function:
var callback = function(entries, observer) {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// here you animate the skill bar
});
};
If you need to support older browsers, use the official polyfill from w3c.
If you don't want to trigger the animation again when the elements are scrolled again into view a second time then you can also unobserve an element once it's animated.
you can copy only one image to the droppable area with the bind method and url with javascript but you can not change any image,
i tried sourceImage = new Image() but the plugin only works with url
<div class="draggable">
<img src='team.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div class="draggable">
<img src='foto11.jpg' class="resizable ui-resizable draggable" style="width:300px"/>
</div>
<div id="vanilla-demo" class='droppable' style="width:356px;height:286px;position:absolute;top:29.1em;left:73px;background-color: yellow">
</div>
<script>
$(".draggable").draggable({cursor:"grabbing",helper:"clone",opacity:0.8,grid:[20,20]});
$( ".droppable" ).droppable({
op: function(event,ui) {
vanilla.bind({
url: 'team.jpg',
orientation: 4
});
}
});
var el = document.getElementById('vanilla-demo');
var vanilla = new Croppie(el, {
viewport: { width: 300, height: 250 },
boundary: { width: 300, height: 250 },
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
</script>
I hope the url shows the image when drope the image,
When you drag an item to a droppable, you can use the ui.draggable passed into drop.
drop( event, ui )
Triggered when an accepted draggable is dropped on the droppable (based on the tolerance option).
event
ui
draggable Type: jQuery A jQuery object representing the draggable element.
Consider the following code.
$(function() {
var el = $('#vanilla-demo');
var vanilla = new Croppie(el[0], {
viewport: {
width: 300,
height: 250
},
boundary: {
width: 300,
height: 250
},
showZoomer: true,
enableOrientation: false
});
vanilla.bind({
url: '',
orientation: 4
});
$(".draggable").draggable({
cursor: "grabbing",
helper: "clone",
opacity: 0.8,
grid: [20, 20],
zIndex: 1002
});
$(".droppable").droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
var newImage = ui.draggable;
vanilla.bind({
url: newImage.attr("src"),
orientation: 4
});
}
});
});
.droppable {
width: 356px;
height: 286px;
position: absolute;
top: 29.1em;
left: 73px;
background-color: #cccccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.4/croppie.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="draggable">
<img src='https://i.imgur.com/WDds7On.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div class="draggable">
<img src='https://i.imgur.com/p77MNQh.jpg' class="resizable ui-resizable draggable" style="width:300px" />
</div>
<div id="vanilla-demo" class='droppable'></div>
When the new item is dropped, the Binding is updated for Croppie.
Hope that helps.
i am trying to figure out how to make draggable and scollable work simulatnoeusuly:
http://159.8.132.20/alldevice/
when u try to drag image on either side draggable action also starts, i want that area to be easily scrollable, means when i am scrolling draggble event should not be there
var $drop = $('#canvas-drop-area,#canvas-drop-area1'),
$gallery = $('#image-list li'),
$draggedImage = null,
$canvasp1old = null,
$canvasp2old = null;
$gallery.draggable({
//refreshPositions: true,
scroll: false,
start: function(e) {
$draggedImage = event.target;
$drop.css({
'display': 'block'
});
},
helper: function(e) {
return $('<img src="' + $(this).find('img').attr("src") + '" width="'+imgwidth+'">');
},
stop: function() {
$draggedImage = null;
},
revert: true
});
This might help you.
HTML
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
.draggable {
width: 90px;
height: 80px;
padding: 5px;
float: left;
margin: 0 10px 10px 0;
font-size: .9em;
}
.ui-widget-header p,
.ui-widget-content p {
margin: 0;
}
#snaptarget {
height: 600px;
width: 200px;
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table>
<tr>
<td>
<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>I only snap to the big box</p>
</div>
</td>
<td>
<div id="snaptarget" class="ui-widget-header">
<p>I'm a snap target</p>
</div>
</td>
<td>
<div id="draggable3" class="draggable ui-widget-content">
<p>I only snap to the outer edges of the big box</p>
</div>
<div id="draggable4" class="draggable ui-widget-content">
<p>I snap to a 20 x 20 grid</p>
</div>
<div id="draggable5" class="draggable ui-widget-content">
<p>I snap to a 80 x 80 grid</p>
</div>
</td>
</tr>
</table>
javascript
$(function() {
$("#draggable").draggable({
snap: true
});
$("#draggable2").draggable({
snap: ".ui-widget-header"
});
$("#draggable3").draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});
$("#draggable4").draggable({
grid: [20, 20]
});
$("#draggable5").draggable({
grid: [80, 80]
});
});
For Mobile you can use jquery ui touch punch it will help you and best solution is here
as per my knowledge jquery and jquery-ui is working awesome on 159.8.132.20/alldevice/.
So in the html I am using bootstrap's jumbotron styled divs. A page is displayed then when you click a button an Onclick action calls the function flipPage({switch from page #},{switch to page #}), and then theres the flipBack({switch from page #},{switch to page #}).
My problem is the animation gets screwed up , it'll repeat or switch to the wrong page and I don't know enough about jQuery animation to see if I'm doing something wrong. any tips or help would be much appreciated! I believe it is calling the wrong function? is that possible? It might be switching up the buttons?
For the error if you get the code running it, usually occurs when you go from page 1->2 , 2->3, 3->2, 2->1. It'll load page 3 instead of going back to 1.
Link to DropBox Full of working code : https://www.dropbox.com/sh/xtc2jj8m39k3ax3/AAApy9zwjgV5eVBPMktF_ehTa
CSS: (using twitters bootstrap.css)
.jumbotron.page1{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 25%;
}
.jumbotron.page2{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
.jumbotron.page3{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
HTML:
<div class="container">
<div id="page1" class="jumbotron page1" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(1,2)"> Next Page</button>
</div>
<div id="page2" class="jumbotron page2" style="">
<h1 style="text-align:center; width:564px">Welcome to page 2</h1>
<button class="btn btn-primary" type="button" onClick="flipPage(2,3)">Next Page ></button>
<button class="btn btn-primary" type="button" onClick="flipBack(2,1)"> Back</button>
</div>
<div id="page3" class="jumbotron page3" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary" type="button" onClick="flipBack(3,2)"> Back</button>
</div>
</div>
Javascript/jQuery:
$('#page2').hide();
$('#page3').hide();
function flipPage(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '-150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});
});
});
});
}
function flipBack(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(document).ready(function() {
$(fromPage).click(function() {
$(fromPage).animate({left: '150%'}, 500, function() {
$(fromPage).hide();
$(toPage).show().animate({left: '25%'},200, function(){
});;
});
});
});
}
Give this a try. Hopefully, it's the functionality you are after:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="css/favicon.ico">
<title>DeskOS</title>
<link rel="icon" type="image/x-icon" href="css/favicon.ico" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- JavaScript -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<style>
.jumbotron.page1{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 25%;
}
.jumbotron.page2{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
.jumbotron.page3{
position: absolute;
width: 750px;
height: 500px;
top: 100px;
left: 150%;
}
</style>
<!-- Custom styles for this template -->
</head>
<div class="container">
<div id="page1" class="jumbotron page1" style="">
<h1 style="text-align:center; width:564px">Welcome to page1</h1>
<button class="btn btn-primary forward" type="button" data-next="2" data-current="1"> Next Page</button>
</div>
<div id="page2" class="jumbotron page2" style="">
<h1 style="text-align:center; width:564px">Welcome to page 2</h1>
<button class="btn btn-primary forward" type="button" data-next="3" data-current="2">Next Page ></button>
<button class="btn btn-primary back" type="button" data-back="1" data-current="2"> Back</button>
</div>
<div id="page3" class="jumbotron page3" style="">
<h1 style="text-align:center; width:564px">Welcome to page 3</h1>
<button class="btn btn-primary back" type="button" data-back="2" data-current="3"> Back</button>
</div>
</div>
<!-- /container -->
<script>
$(document).ready(function() {
$('#page2').hide();
$('#page3').hide();
$('.forward').click(function() {
$this = $(this);
flipPage($this.data('current'), $this.data('next'));
});
$('.back').click(function() {
$this = $(this);
flipBack($this.data('current'), $this.data('back'));
});
function flipPage(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(fromPage).animate({left: '-150%'}, 500, function() {
$(fromPage).hide();
$(toPage).animate({left: '25%'},200, function(){}).show();
});
}
function flipBack(fromPage,toPage)
{
var fromPage = "#page"+ fromPage;
var toPage = "#page"+ toPage;
$(fromPage).animate({left: '150%'}, 500, function() {
$(fromPage).hide();
$(toPage).animate({left: '25%'},200, function(){}).show();
});
}
});
</script>
</html>
so:
http://jsfiddle.net/R6qwX/22/embedded/result/
Changes I made:
HTML:
<!-- the container: -->
<div id="pages-container" class="container" data-current-page="1">
<!-- each 'next' button: -->
<button class="btn btn-primary next-page-btn" type="button"> Next Page</button>
<!-- each 'back' button: -->
<button class="btn btn-primary back-page-btn" type="button"> Back</button>
CSS:
no 'left: 25%' or 150%.
body {
overflow-x:hidden; // hide the buttom scroll bar
}
js
$( document ).ready(function() {
// drop the pages to left * 10000
$('#page2').css({left: $('#page2').offset().left * 10000});
$('#page3').css({left: $('#page3').offset().left * 10000});
});
function to next page:
function nextPage(from, to) {
var currentPageLeft = $( "#page" + from ).offset().left;
$( "#page" + from ).animate({left: '-' + currentPageLeft * 10000}, 500);
var nextPageLeft = $( "#page" + to ).offset().left;
$( "#page" + to ).animate({left: nextPageLeft / 10000}, 300, function() {
$( "#page" + to ).css({left: 'auto'});
});
}
function to back page:
function backPage(from, to) {
var currentPageLeft = $( "#page" + from ).offset().left;
$( "#page" + from ).animate({left: currentPageLeft * 10000}, 500);
var backPageLeft = $( "#page" + to ).offset().left;
$( "#page" + to ).animate({left: backPageLeft / -10000}, 300, function() {
$( "#page" + to ).css({left: 'auto'});
});
}
click on 'next page':
$( ".next-page-btn" ).click(function() {
// get current page number
currentPage = parseInt($( "#pages-container" ).attr('data-current-page'));
nextPage(currentPage, currentPage + 1);
// update current page number
$( "#pages-container" ).attr('data-current-page', currentPage + 1);
});
click on 'back':
$( ".back-page-btn" ).click(function() {
// get current page number
currentPage = parseInt($( "#pages-container" ).attr('data-current-page'));
backPage(currentPage, currentPage - 1);
// update current page number
$( "#pages-container" ).attr('data-current-page', currentPage - 1);
});
demo: http://jsfiddle.net/R6qwX/22/
i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>