Hdeya team blog » jQuery http://www.hdeya.com/blog We can make IT Sun, 28 Mar 2010 11:28:27 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Sorting items on the fly (AJAX) using jQuery UI Sortable, PHP & MySQL. http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/ http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/#comments Sun, 03 May 2009 17:50:32 +0000 Mahmoud M. Abdel-Fattah http://www.hdeya.com/blog/?p=162 While we were working on http://www.duettographics.com 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.

  1. Create a new MySQL Database called `test_db` and a new table called `menu 
    CREATE TABLE IF NOT EXISTS `menu` (
  `id` int(11) NOT NULL auto_increment,
  `title` int(11) NOT NULL,
  `sort` int(2) NOT NULL,
  PRIMARY KEY  (`id`)
)
  2. Create new php file called “menu_list.php”, this file will be our main file to sort the menu items . 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sorting Items on the fly using jQuery UI, PHP & MySQL</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(
function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>
</head>
<body>
<h1>Menu List</h1>

<ul id="sortme">
<?php
// Connecting to Database
mysql_connect($hostname, $user_name, $password) or die ('Cant Connceto to MySQL');

// Selecting Database
mysql_select_db($db_name) or die ('Cant select Database');

// Getting menu items from DB
$result = mysql_query("SELECT * FROM `menu` ORDER BY `sort` ASC") or die(mysql_error());
while($row = mysql_fetch_array($result)) {
echo '<li id="menu_' . $row['id'] . '">' . $row['title_en'] . "</li>\n";
}
?>
</ul>
</body>
</html>
  3. Create a new file for AJAX purpose to update sorting called “sort_menu.php” 
    <?php
// Connecting to Database
mysql_connect($hostname, $user_name, $password) or die ('Cant Connceto to MySQL');

// Selecting Database
mysql_select_db($db_name) or die ('Cant select Database');

$menu = $_POST['menu'];
for ($i = 0; $i < count($menu); $i++) {
mysql_query("UPDATE `menu` SET `sort`=" . $i . " WHERE `id`='" . $menu[$i] . "'") or die(mysql_error());
}
?>

Finally, this should works fine with you, but If you faced any problem, leave ur comment !

]]> http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/feed/ 18 Generates lightbox on the fly using jQuery http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/ http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/#comments Sat, 02 May 2009 15:22:03 +0000 Mahmoud M. Abdel-Fattah http://www.hdeya.com/blog/?p=140 jQuery & jQuery Light Box Plugin. then add the following javascript code to you <head>: $(document).ready(function(){     $("img").each(function() {         var src_file = $(this).attr("src").split("/");         var src_file_name = src_file.pop();         var patt1 = /_thumb.jpg/;         var original_file_name = "";         if(src_file_name.search(patt1) != -1) {             original_file_name = src_file_name.replace(/_thumb/gi, "");             $(this).wrap("&lt;a href=\"/uploads/"+original_file_name+"\" rel=\"lightbox\"&gt;&lt;/a&gt;");         }     });     $("a[rel*=lightbox]").lightBox(); }); ]]> This method requires you to have  2 copies of each image, the original size & thumbnail one. thumbnails MUST BE named as filename_thumb.jpg & stored in /thumbs.  you must have the latest versions of jQuery & jQuery Light Box Plugin.

then add the following javascript code to you <head>:

$(document).ready(function(){
    $("img").each(function() {
        var src_file = $(this).attr("src").split("/");
        var src_file_name = src_file.pop();
        var patt1 = /_thumb.jpg/;
        var original_file_name = "";
        if(src_file_name.search(patt1) != -1) {
            original_file_name = src_file_name.replace(/_thumb/gi, "");
            $(this).wrap("&lt;a href=\"/uploads/"+original_file_name+"\" rel=\"lightbox\"&gt;&lt;/a&gt;");
        }
    });
    $("a[rel*=lightbox]").lightBox();
});
]]> http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/feed/ 0 5 CSS3 Techniques For Major Browsers using the Power of jQuery http://feedproxy.google.com/~r/Noupe/~3/2Nkzok34EgY/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html http://feedproxy.google.com/~r/Noupe/~3/2Nkzok34EgY/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html#comments Sat, 28 Feb 2009 23:19:01 +0000 tag:google.com,2005:reader/item/ef73c90950d1090f Many exciting new functions and features are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image, etc… CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Not all current browsers support CSS3, but it is however possible to create equivalent effects and serve it with the power of jQuery. This article presents 5 CSS3 techniques which can dramatically get you a stunning user interfaces and how to achieve almost the same effects using jQuery for browsers that are not compatible yet with CSS3 new features.]]> http://feedproxy.google.com/~r/Noupe/~3/2Nkzok34EgY/5-css3-techniques-for-major-browsers-using-the-power-of-jquery.html/feed/ 0