Please have a look in to my code below
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
});
$("#droppable").droppable({
accept: '.drag',
activeClass: "drop-area",
drop: function(e, ui) {
if ($(ui.draggable)[0].id != "") {
$("#placeholderimg").css("visibility", "show");
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'original',
cursor: 'move',
containment: '#droppable',
tolerance: 'fit',
drop: function(event, ui) {
$(ui.draggable).remove();
}
});
}
}
});
The Process :-
User will have some images on LHS and they will grag those into rightside panel
But the problem is when I move that dragged image new position is not getting .Actually I am hoping to get new position after image is moved to some position and leave .
Please help
Related
Ok, Im trying to make a draggable CMS system, now Im stuck on the next problem.
When Im done dragging my 'div' I want to save my new left and top (x and y) variables in my MySQL database using PhP.
I get my left and top variables by the next line of codes:
$(function() {
$( "#3" ).draggable({
stop: function () {
$.post("upload.php", {
left: this.getBoundingClientRect().left,
top: this.getBoundingClientRect().top
})
},
containment: "#containment-wrapper",
scroll: false
});
my upload.php is:
<?
mysql_query("UPDATE nvt SET left='". $_POST['left'] ."'")or die(mysql_error());
mysql_query("UPDATE nvt SET top='". $_POST['top'] ."'")or die(mysql_error());
header("Location: inlogged");
?>
When I'm done dragging my div there is just no reaction?
I think you are missing }); at the end. The code should be :
$(function() {
$( "#3" ).draggable({
stop: function ( event, ui ) {
$.post("upload.php", {
left: parseInt( ui.offset.left ),
top: parseInt( ui.offset.top )
})
},
containment: "#containment-wrapper",
scroll: false
});
}); //see the change
I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined
Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}
If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/
i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});
jQuery( "#dialog" ).dialog({ width: 'auto', zIndex: 9999, height: 370, resizable: false, draggable: false,
open :function(event, ui) {
jQuery('body').addClass('black-overlay');
},
show: { effect: 'drop', direction: "up", mode: 'slow'},
close:function(event, ui) {
jQuery('body').removeClass('black-overlay');
}
});
I want Dialog Window Should be Drop From Starting of Browser window and No border to that dialog box
and also drop from top Should be slow
Currently dialog box is Drop up very fastly and not from Starting of Browser window
Can any one help me in this
reduce the default animation speed to exaggerate the effect
$.fx.speeds._default = 3000;
Put this code just before:
jQuery( "#dialog" ).dialog({...
You can add duration:1000 to the show properties
show: { effect: 'drop', direction: "up", mode: 'slow' ,duration:1000}
http://hollywoodlacewigs.netsmartz.us/
I am working on above project.
user upload pic form 'upload' button and then 'select area' and then click 'mix' button.
this will show the cropped area onto other image.
click email link will compose two images.
But before that I want to let user 'rotate', 'zoom in/out' image before cropping the image.
am using jcrop, jquery ui draggable
here's the script :
$(document).ready(function() {
$('#UploadForm').change('submit', function(e) {
e.preventDefault();
$('#SubmitButton').attr('disabled', ''); // disable upload button
$('#left-pic').hide();
$('#output').show();
//show uploading message
$("#output").html('<img style="margin:45px 0px 0px 35px; " src="images/ajax-loader.gif" alt="Please Wait"/>');
$(this).ajaxSubmit({
target: '#output',
success: afterSuccess //call function after success
});
});
});
function afterSuccess(){
$('#UploadForm').resetForm(); // reset form
$('#SubmitButton').removeAttr('disabled'); //enable submit button
$('#cropbox').Jcrop({
aspectRatio: 1,
onSelect: updateCoords,
bgOpacity: 0.5,
bgColor: 'white',
addClass: 'jcrop-dark',
setSelect: [ 34, 50, 134, 155 ]
});
}
function updateCoords(c){
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
function checkCoords(){
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
}
$(function() {
$('#draggable3').draggable({
containment: $('#draggable3').parent(),
cursor: "move", cursorAt: { top: 56, left: 56 },
drag: function(event, ui) {
// Show the current dragged position of image
var currentPos = $(this).position();
// $("#xpos").text("CURRENT: \nLeft: " + (currentPos.left-580) + "\nTop: " + (currentPos.top-82));
$('#x3').val(currentPos.left-580);
$('#y3').val(currentPos.top-82);
}
});
});
You can use http://www.cropzoom.com.ar/demo/, I used and like it.
In IE exists one bug - fix is described on Draggable element in VML get stuck when size change (height, width) in IE 8
(I want to add answer in comment, but don't have permission)