php - Ajax image using jquery form.js -
i working piece of code. here using jquery, jquery form.js, , jqueryui. task upload image in upload folder , store path of image along position set users (jqueryui draggable used this). works fine. don't know how works.
can explain me how grabbing dragged position set users , how whole thing working together. if need see php script can share thattoo. thanks
$(document).ready(function () { /* uploading profile background image */ $('body').on('change', '#bgphotoimg', function () { $("#bgimageform").ajaxform({ target: '#timelinebackground', beforesubmit: function () {}, success: function () { $("#timelineshade").hide(); $("#bgimageform").hide(); }, error: function () { } }).submit(); }); /* banner position drag */ $("body").on('mouseover', '.headerimage', function () { var y1 = $('#timelinebackground').height(); var y2 = $('.headerimage').height(); $(this).draggable({ scroll: false, axis: "y", drag: function (event, ui) { if (ui.position.top >= 0) { ui.position.top = 0; } else if (ui.position.top <= y1 - y2) { ui.position.top = y1 - y2; } }, stop: function (event, ui) {} }); }); /* bannert position save*/ $("body").on('click', '.bgsave', function () { var id = $(this).attr("id"); var p = $("#timelinebgload").attr("style"); var y = p.split("top:"); var z = y[1].split(";"); var datastring = 'position=' + z[0]; $.ajax({ type: "post", url: "image_savebg_ajax_bg.php", data: datastring, cache: false, beforesend: function () {}, success: function (html) { if (html) { $(".bgimage").fadeout('slow'); $(".bgsave").fadeout('slow'); $("#timelineshade").fadein("slow"); $("#timelinebgload").removeclass("headerimage"); $("#timelinebgload").css({ 'margin-top': html }); return false; } } }); return false; }); });
$("body").on('click', '.bgsave', function () { var id = $(this).attr("id"); var p = $("#timelinebgload").attr("style"); var y = p.split("top:"); var z = y[1].split(";"); var datastring = 'position=' + `z`[0];
you getting position here before ajax post php script, crudely getting 'top' css attribute inline style on #timelinebgload element.
if inspect dom when dragging #timelinebgload uidraggable updates top (and left) move around
Comments
Post a Comment