Develop Reference

Trello Drag And Drop Cards Using Scrolling Containers whith PHP MYSQL AJAX

I need to create a Trello-like frame with 4 lists and cards on which I want to drag and drop cards between those lists, however, I would like to know how can I update the database in Mysql when I drag and drop the elements?
I'm not able to identify how to update ajax and php.
script.js
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;
// Define the column grids so we can drag those
// items around.
itemContainers.forEach(function (container) {
// Instantiate column grid.
var grid = new Muuri(container, {
items: '.board-item',
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragSortInterval: 0,
dragContainer: document.body,
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
})
.on('dragStart', function (item) {
// Let's set fixed widht/height to the dragged item
// so that it does not stretch unwillingly when
// it's appended to the document body for the
// duration of the drag.
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
// Let's remove the fixed width/height from the
// dragged item now that it is back in a grid
// column and can freely adjust to it's
// surroundings.
item.getElement().style.width = '';
item.getElement().style.height = '';
// Just in case, let's refresh the dimensions of all items
// in case dragging the item caused some other items to
// be different size.
columnGrids.forEach(function (grid) {
grid.refreshItems();
});
})
.on('layoutStart', function () {
// Let's keep the board grid up to date with the
// dimensions changes of column grids.
boardGrid.refreshItems().layout();
});
// Add the column grid reference to the column grids
// array, so we can access it later on.
columnGrids.push(grid);
});
// Instantiate the board grid so we can drag those
// columns around.
boardGrid = new Muuri('.board', {
layoutDuration: 400,
layoutEasing: 'ease',
dragEnabled: true,
dragSortInterval: 0,
dragStartPredicate: {
handle: '.board-column-header'
},
dragReleaseDuration: 400,
dragReleaseEasing: 'ease'
});

I would like to suggest you to use this jKanban boards
In this you can find all events very easily and let me know if you face any issue in this
https://www.riccardotartaglia.it/jkanban/

Trigger mouseover event on a Raphael map

I am using the Raphael plugin for the first time and so far I managed to create a map of Germany and to outline all different regions inside. I found out how to bind mouse-over effects, so when I hover over a region its color changes. Everything looks fine until the moment when I want to trigger the same mouse-over effect from outside the map. There is a list of links to all the regions and each link should color its respective geographical position (path) on the map when hovered. The problem is that I don't know how to trigger the mouse-over effect from outside.
This is the reference guide I used for my code: Clickable France regions map
This is my map initialization:
var regions = [];
var style = {
fill: "#f2f2f2",
stroke: "#aaaaaa",
"stroke-width": 1,
"stroke-linejoin": "round",
cursor: "pointer",
class: "svgclass"
};
var animationSpeed = 500;
var hoverStyle = {
fill: "#dddddd"
}
var map = Raphael("svggroup", "100%", "auto");
map.setViewBox(0, 0, 585.5141, 792.66785, true);
// declaration of all regions (states)
....
var bayern = map.path("M266.49486,..,483.2201999999994Z");
bayern.attr(style).data({ 'href': '/bayern', 'id': 'bayern', 'name': 'Bayern' }).node.setAttribute('data-id', 'bayern');
regions.push(bayern);
This is where my "normal" mouse effects take place:
for (var regionName in regions) {
(function (region) {
region[0].addEventListener("mouseover", function () {
if (region.data('href')) {
region.animate(hoverStyle, animationSpeed);
}
}, true);
region[0].addEventListener("mouseout", function () {
if (region.data('href')) {
region.animate(style, animationSpeed);
}
}, true);
region[0].addEventListener("click", function () {
var url = region.data('href');
if (url){
location.href = url;
}
}, true);
})(regions[regionName]);
}
I have a menu with links and I want to bind each of them to the respective region, so that I can apply the animations, too.
$("ul.menu__navigation li a").on("mouseenter", function (e) {
// this function displays my pop-ups
showLandName($(this).data("id"));
// $(this).data("id") returns the correct ID of the region
});
I would appreciate any ideas! Thanks in advance!

I figured out a way to do it. It surely isn't the most optimal one, especially in terms of performance, but at least it gave me the desired output. I would still value a better answer, but as of right now a new loop inside the mouse-over event does the job.
$("ul.menu__navigation li a").on("mouseenter", function (e) {
// this function displays my pop-ups
showLandName($(this).data("id"));
// animate only the one hovered on the link list
var test = '/' + $(this).data("id");
for (var regionName in regions) {
(function (region) {
if (region.data('href') === test) {
region.animate(hoverStyle, animationSpeed);
}
})(regions[regionName]);
}
});

ExtJS 4 - Printing Forms Programatically sometimes gives "Print Preview Failed" in Chrome

Good day. I am developing a Web Application and there's a part where I print the form on button click. To achieve this, I overrode the definition of my Form Panel so that I can call form.print() anywhere in my code when I need to. Here is how I overrode my form:
Ext.define('my_app_name.override.form.Panel', {
override: 'Ext.form.Panel',
print: function(pnl) {
if (!pnl) {
pnl = this;
}
// instantiate hidden iframe
var iFrameId = "printerFrame";
var printFrame = Ext.get(iFrameId);
if (printFrame === null) {
printFrame = Ext.getBody().appendChild({
id: iFrameId,
tag: 'iframe',
cls: 'x-hidden',
style: {
display: "none"
}
});
}
var cw = printFrame.dom.contentWindow;
// instantiate application stylesheets in the hidden iframe
var stylesheets = "";
for (var i = 0; i < document.styleSheets.length; i++) {
stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
}
// various style overrides
stylesheets += ''.concat(
"<style>",
".x-panel-body {overflow: visible !important;}",
// experimental - page break after embedded panels
// .x-panel {page-break-after: always; margin-top: 10px}",
"</style>"
);
// get the contents of the panel and remove hardcoded overflow properties
var markup = pnl.getEl().dom.innerHTML;
while (markup.indexOf('overflow: auto;') >= 0) {
markup = markup.replace('overflow: auto;', '');
}
var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);
// output to the iframe
cw.document.open();
cw.document.write(str);
cw.document.close();
// remove style attrib that has hardcoded height property
cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
// print the iframe
cw.print();
// destroy the iframe
Ext.fly(iFrameId).destroy();
}
});
Then on a click of a button in my Web App, I do something like:
var form = Ext.getCmp('formIDHere');
form.print();
However, this code is rather inconsistent at times. There are times that I can print the form no problem and there are times that it gives the "Print Preview Error" message. I can't replicate the issue consistently and the logs aren't showing anything so I'm in the dark.
What I've noticed however, is that when I save my project (I'm using Sencha Architect), preview it (or refresh the current window where I'm previewing my Web App), stay with the web app all throughout the process (meaning I don't shift tabs or windows), hit the print button, the print preview appears and I don't have problems with it.
So far I haven't tested in other Web Browsers. Any ideas anyone? I'll be really thankful for anyone who can point out what I'm doing wrong. Thanks in advance.

Sorry I forgot to update this. Thanks to whoever upvoted my question.
The concept is simple. Since ExtJS4 is asynchronous, I placed my code in "blocks" and then I delayed my calls to those functions to ensure that they finish constructing what they need to construct before moving on to the next part.
print: function(pnl) {
if (!pnl) {
pnl = this;
}
// instantiate hidden iframe
var iFrameId = "printerFrame";
var printFrame = Ext.get(iFrameId);
if (printFrame === null) {
printFrame = Ext.getBody().appendChild({
id: iFrameId,
tag: 'iframe',
cls: 'x-hidden',
style: {
display: "none"
}
});
}
var cw = printFrame.dom.contentWindow;
var stylesheets = "";
var markup;
// instantiate application stylesheets in the hidden iframe
var printTask = new Ext.util.DelayedTask(function(){
// print the iframe
cw.print();
// destroy the iframe
Ext.fly(iFrameId).destroy();
});
var strTask = new Ext.util.DelayedTask(function(){
var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);
// output to the iframe
cw.document.open();
cw.document.write(str);
cw.document.close();
// remove style attrib that has hardcoded height property
// cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
printTask.delay(500);
});
var markUpTask = new Ext.util.DelayedTask(function(){
// get the contents of the panel and remove hardcoded overflow properties
markup = pnl.getEl().dom.innerHTML;
while (markup.indexOf('overflow: auto;') >= 0) {
markup = markup.replace('overflow: auto;', '');
}
while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
}
strTask.delay(500);
});
var styleSheetConcatTask = new Ext.util.DelayedTask(function(){
// various style overrides
stylesheets += ''.concat(
"<style>",
".x-panel-body {overflow: visible !important;}",
// experimental - page break after embedded panels
// .x-panel {page-break-after: always; margin-top: 10px}",
"</style>"
);
markUpTask.delay(500);
});
var styleSheetCreateTask = new Ext.util.DelayedTask(function(){
for (var i = 0; i < document.styleSheets.length; i++) {
stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
}
styleSheetConcatTask.delay(500);
});
styleSheetCreateTask.delay(500);
}

how to make picture fly into the browser window and then fade out?

how to make picture fly to the browser window and then fade out. I need that one picture fly into the browser window from left side,and then fade out. and then next picture. I have five picture. I need them do this one by one, over and over. Followed is my code: It is not work fine.
Method 1: Five pictures in five and with id as "#Slogan0", "#Slogan1", ...,etc. At the beginning, "left" is "-1000px", and the first one is "display" as "block", the others "none", so that I can change them to make them disappear."moveNext" is to change pictures.
var sloganidPre = "#Slogan";
var slogannum = 0;
sloganid = sloganidPre + slogannum;
window.onload = function(){
moveNext();
}
function moveNext(){
cf.moveTo("next");
if($(sloganid).css("display") == "block") {
slogannum = (slogannum+1)%5;
$(sloganid).css("display","none");
sloganid=sloganidPre+slogannum;
$(sloganid).css("display","block");
$(sloganid).animate({left:"30px"});
$(sloganid).css("opacity","0.2");
}
setTimeout(moveNext, 1500);
}
Method2:
Create new element to the parent node.
var sloganidPre = "Slogan";
var slogannum = 0;
var sloganid = "#"+sloganidPre + slogannum;
window.onload = function(){
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;display:block;\"\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
$(sloganid).animate({left:'30px',opacity:'0.2'});
moveNext();
}
function moveNext(){
cf.moveTo("next");
$("#sloganparent:first-child").empty();
slogannum = (slogannum+1)%5;
sloganid= "#"+sloganidPre+slogannum;
$("#sloganparent").append("<div id=\""+sloganid+"\" style=\"width:744px;height:296px;position:absolute;left:-1000px;border:1px solid #0FF;overflow:hidden;\"><img src=\"img/"+sloganidPre+slogannum+".png\" /></div>");
var i=0;
for (i=-1000; i<30; i++) {
document.getElementById(new String(sloganid)).style.left= new String("\""+i+"px\"");
}
setTimeout(moveNext, 1500);
}
Jquery seems not to get the element which is created dynamically. Two methods are not work fine. Anyway I just want to know how to deploy the pictures as the titile said. Any method is fine. tks for ur consideration.

jQuery Repeat Loop of Array To Change Tag Attributes

I am making a simple slider that works by changing the src attribute of an img tag and the attributes of anchor tags. This is what I have come up with so far:
(function($){
var slides = [
'http://placehold.it/801x350',
'http://placehold.it/802x350',
'http://placehold.it/803x350'
],
titles = [
'Title 1',
'Title 2',
'Title 3'
],
links = [
'http://test1.com',
'http://test2.com',
'http://test3.com'
],
image = $('#stretch-img'),
anchor = $('.featured-title>h2>a');
var interval = setInterval(function() {
image.attr('src', slides[0]);
anchor.attr('href', links[0]);
anchor.html(titles[0]);
}, 3000);
})(jQuery);
I want the interval to loop through the arrays continuously with a simple fade effect. What can be the best way to do this or any way to do this really, coz I've got none.
Thanks!
I appreciate all the help.

To loop through your array you can set a current-position-variable and a variable that saves the length of the array:
var current = 0,
length = slides.length,
interval = setInterval(function() {
image.attr('src', slides[current]);
anchor.attr('href', links[current]).html(titles[current]);
current++;
if (current >= length) {
current = 0;
}
}, 3000);
Then to fade you can fade-out, change the source, then fade-back-in:
image.fadeOut(500, function () {
image.attr('src', slides[current]).fadeIn(500);
anchor.attr('href', links[current]).html(titles[current]);
current++;
if (current >= length) {
current = 0;
}
});
This can lead to the image not quite being loaded when the fadeIn(500) kicks-in, which can be fixed by using an event handler attached to the load event for the image element:
var image = $('#stretch-img').on('load', function () {
image.fadeIn(500);
});
Then you can remove the fadeIn(500) from the interval function since it will fire when the image has loaded. The load event will fire whenever the source of the image changes and the new source finishes loading.
Note that .on() is new in jQuery 1.7 and is the same as .bind() in this case.