JQuery Sortables with PHP and MySQL | coder1.com. [img_assist|nid=10|title=|desc=|link=none|align=right|width=100|height=71]This article will show you how to order a server-side list of fruit from a database using drag and drop behavior and then save them back to the database in order. I recently worked on a project which required an unordered list to be re-ordered and then saved. I wasn't about to make users enter numbers next to each item so I looked toward JQuery's UI library.
Objective: We will display a list of fruit. The user can then drag the fruit and click a button to save the new order in the database. For this example, let's use a database table named fruit with the following fields: id, name, weight. Schema: CREATE TABLE fruit (id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,name VARCHAR(64) NOT NULL,weight TINYINT UNSIGNED NOT NULL) TYPE = MYISAM ;INSERT INTO fruit (name, weight) VALUES ('apple', 1);INSERT INTO fruit (name, weight) VALUES ('pear', 2);INSERT INTO fruit (name, weight) VALUES ('orange', 3); <?
Extending the jQuery Sortable With Ajax & MYSQL | Musings | Wil Linssen. I’ve had a lot of response to the jQuery sortable list post I wrote a while back, and a lot of them ask how to send the results to a database. I’ve often said the best thing to do would be to update it by AJAX, but I’ve never really explained how. So here it is! There was a bug a few people noticed with the new jQuery UI a short while ago that stopped the update callback working.
That bug has since been rectified and all is kosher again. I have since updated the example to the latest jQuery and UI downloads. The examples and downloads have also been updated accordingly. Step one: Create the page with the sortable, and the CSS (described on my previous post) We have however altered it slightly, so here is the updated code (without any css, the css is in the sourcecode)Include your javascript files, you’ll need jQuery and the jQuery UI files Then you’ll need to create your Javascript function. Now here’s the HTML to output the list etc. etc: You could then happily run each sql statement.
Aumento do tamanho do texto com javascript | MX Masters - Conhecimento a um clique. Making a 3D Engine in jQuery. In the previous post “3D tag cloud” I received quite a few requests for different shapes besides the ring. The problem is how the tag cloud was created it doesn’t lend itself to different shapes very well. So this post will show how to create a 3D engine in jQuery / JavaScript for those more exciting shapes. What We’re Building We’re going to create a 3D engine that will allow us to create shapes simply by creating an array of points.
This engine will have a Camera, a Scene and an Object. It’ll work pretty well the same as in real life. The closer the camera is to the object the larger it gets. Display Object The Display Object is more or less a way to give each object a set of properties and methods. Here is the JavaScript Class: If this seems a little foreign to you, you might want to check out the post Object Oriented Programming with JavaScript. Make 3d/2d Points These functions basically create objects, one meant for 3d (x,y,z) and one meant for 2d(x,y,depth). Initialization Camera Scene. Sorting items on the fly (AJAX) using jQuery UI Sortable, PHP & MySQL. | Hdeya team blog. While we were working on Administration control panel, they required the ability to sort their images in easy way, so after some googeling we find many separate tutorials for this. So, we decided to write one simple tutorial that can describe the whole thing. In this tutorial, we’ll work on sorting menu items.
Requirements : sortable jQuery UI, PHP & MySQL server support. Finally, this should works fine with you, but If you faced any problem, leave ur comment ! Pure CSS Animated Progress Bar. Here’s a simple demonstration of how you can create animated progress bar using pure css. The trick is very simple. We need 3 elements, one container and 2 nested elements. Take a look at the demo | Download zip file The Concept We’ll put a cool background image in the container and define fixed width and height. First child (SPAN) will act as a progress bar. We’ll absolutely position second child (EM) above the progress bar and shift it to the left to a desired value. Markup To keep it as meaningful as possible I used definition list (DL) to list for several values. <dd><span><em style="left:100px">50%</em></span></dd> I decided to use inline styles for left EM placement.
Animation How is it done? EM placement In my example I use 200 pixels wide progress bar. I.e. 50% will mean 100px left offset, 24% will mean 48px offset, 75% – 150px etc. Enjoyed the article?