Hdeya team blog » Quick Tip / Trick 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 Simple jQuery Dropdowns http://www.hdeya.com/blog/2009/02/simple-jquery-dropdowns/ http://www.hdeya.com/blog/2009/02/simple-jquery-dropdowns/#comments Wed, 25 Feb 2009 12:45:46 +0000 tag:google.com,2005:reader/item/0e27e3f3d721b99f

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features:

  • Cross-browser compatible (even IE 6)
  • Multi-level and retains “trail”
  • Very minimal styling (easy to adapt)
  • Very minimal JavaScript (short bit of jQuery)

View Demo Download Files

I think it worked out pretty well. All my testing shows them working pretty well. Please let me know if you find any problems and we can try to address them. There was only really one CSS tweak needed for IE, which was to use inline-block on the submenu list items to prevent the weird spacing pseduo-line-break IE likes to do.

Each “level” is clearly marked in the CSS file, so it should be pretty easy to identify what is what and apply your own custom styling.

hoverIntent

The demo and download comes with two “versions”, one with hoverIntent and one without. I couldn’t decide which one I liked better so I just left both in. On one hand, hoverIntent is nice because it prevents the menus from opening if you just quickly mouse over them (like the mouse just happened to cross them but you clearly weren’t intending to use the menu at that time). On the other hand, it makes the menu feel a bit sluggish.

ORIGINAL POST :

http://feedproxy.google.com/~r/CssTricks/~3/fVqY51k1GEQ/

]]> http://www.hdeya.com/blog/2009/02/simple-jquery-dropdowns/feed/ 0 Common Sense SEO Checklist http://www.hdeya.com/blog/2009/02/common-sense-seo-checklist/ http://www.hdeya.com/blog/2009/02/common-sense-seo-checklist/#comments Mon, 23 Feb 2009 12:45:26 +0000 tag:google.com,2005:reader/item/609e497495026148 DISCLAIMER: I don’t “really” know anything about SEO. What I do know is the folks at Google and other big search engines are just human beings like us who have created and constantly tweak the search algorithms. Their goal is to give us what we want when searching, the best possible websites relevant to what we are searching for.

So let’s set aside all the fancy technical stuff and just use some good ol’ common sense.

1. Does this page have a good amount of honest information on it about the subject?

This is, by far, the most important one by my standards. I deal with businesses all the time that want to rank higher in search engines but then don’t provide any content. If you want to be the #1 search result for “ergonomic loafers”, you better start working on a bunch of written content about ergonomic loafers. Good, honest content. Not bullsh*t marketing mumbo jumbo and not keyword-soup. You need research, what they are, why they are good, where you can buy them, every last bit of expert knowledge about ergonomic loafers you can squeeze.

2. Is the information on this page well structured in the markup?

Let’s not get too technical here, but just focus on the common sense. When you “view source”, is the good content stuff right up near the top, or is it buried way down below a bunch of other non-related stuff? Are the important headers in <h1> tags? Is the title for the page something that makes sense?

3. There aren’t any stupid cheap “tricks”

Did your buddy tell you that you should put “paris hilton boobs” in white text on a white background at the bottom of the page so you could get people searching for that? Did you buy some service that promised to submit your sites to 3,253,313 search engines for ONLY $99.99! Did you put 500 keyword variations in your meta tags?

Don’t. Search engines are smarter than you. They are looking for dumb “tricks” like that and may even penalize you for them.

4. Is the URL for this page clean and relevant?

You are going to have a heck of an easier time ranking higher for “ergonomic loafers” if you own ergonomicloafers.com. If your page about them is at http://aligatorarmpits.com/2453/234bps.asp?stink=true – it’s going to be a lot harder. Common sense.

5. If you were researching this subject, would you find this page helpful? Would YOU link to it?

Take a step back, read the content, think about it. Put yourself in the mindset of a totally random visitor. Is this page useful? Did I learn something about the subject? If my mom emailed and wanted to know something about ergonomic loafers, would I send her this link or would I sent here somewhere better? If I was writing an article about ergonomic loafers, would I link to this?

6. Is the website a reliable source of quality information?

You might notice when googling, uhm, any major subject, Wikipedia articles tend to be around the top. Clearly Wikipedia has established them selves as a high quality source of information.

SEO compounds on itself. You will have an easier time ranking highly for a term if your site is an established and trustworthy source of information.

But I did all this stuff and I still don’t rank highly?!?!

Them is the knocks, kid. SEO doesn’t happen overnight. It takes a long time. Much of it is based on other sites that link back to your page, and you have no direct control over that. You just need to focus on what you do have control over, which is making your page as compelling as it can be and encourage those links.

ORIGINAL POST :

http://feedproxy.google.com/~r/CssTricks/~3/71HJaswHnbc/

]]> http://www.hdeya.com/blog/2009/02/common-sense-seo-checklist/feed/ 0