phoenixheart - portfolio & more » jQuery http://www.phoenixheart.net phoenixheart - portfolio & more Wed, 25 Aug 2010 03:02:03 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Deal with browser incompliance using jQueryhttp://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/ http://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/#comments Mon, 27 Apr 2009 07:34:51 +0000 phoenix.heart http://www.phoenixheart.net/?p=256 Without a doubt, being a serious web guy you want your new site to look perfect on web browsers. Yes, mission would be simple – or sound simple – if there wasn’t something called browser wars for such a long time without any glorious winner (yet). The stupid result is, we poor web designers and programmers are still hopelessly struggling to keep our sites look the same on Internet Explorer (DIE PIG, DIE!!!), Firefox, Opera, Safari, just to find out that the oh so cool banner suddenly disappears from that new boy Chrome. FYI (psst) that was when I decided to stick with web that I started to learn cursing and swearing.

I am so proud to say that I decided to stop supporting IE 6 to save myself some precious life years and keep my head from getting bald long ago. But still, those guys in Microsoft they have IE 7 and 8 to haunt us. And despite of the so-called W3C standards, each of the remaining major browsers renders the pages differently here and there – margins, paddings, form elements, and so on. To deal with them, we use “hacks”. Perhaps the most well known hack is one below, called “conditional comments”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!--[if IE]>
Stuffs for Internet Explorer all versions
<![endif]-->
<!--[if IE 5]>
Stuffs for Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
Stuffs for Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
Stuffs for Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
Stuffs for Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
Stuffs for Internet Explorer 7
<![endif]-->
<!--[if IE 8]>
Stuffs for Internet Explorer 8
<![endif]-->
<!--[if gte IE 5]>
Stuffs for Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
Stuffs for Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
Stuffs for Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
Stuffs for Internet Explorer greater than 6
<![endif]-->

When this technique is great, it has two limitations. First, only IE is taken into account. When most of the time dealing with IE takes the majority, there are still cases when your sites looks different on Firefox, Safari, Opera etc. Second, the HTML code looks very ugly and unprofessional – just like we are humbly telling: sorry this is beyond my control… I must use a hack here… and here… sorry again…

Then today when looking for a better solution, I stumbled upon a much better method that overcomes all of our current problems – well, sort of. The idea behind it is using jQuery to detect the browser and its version, then add the corresponding class names into the <body> tag. For instance, if the visitor uses Internet Explorer 7, then “.browserIE” and “.browserIE7″ are added. Then, in our CSS we specify the styles for this browser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#aPainInThe4ssElement
{
    /* generic styles for this pain */
}
 
.browserIE7 #aPainInThe4ssElement
{
    /* styles for this element on IE 7 */
}
 
.browserFirefox #aPainInThe4ssElement
{
    /* styles for this element on all Firefox browsers */
}
 
.browserSafari2 #aPainInThe4ssElement
{
    /* styles for this element on Safari 2 */
}

My hat off to Jon for this brilliant idea. Now dealing with different browsers is just a piece of cake!

Now the only thing I regret of is what took me so long to find out this solution.

]]> http://www.phoenixheart.net/2009/04/deal-with-browser-incompliance-using-jquery/feed/ 5 phpQueryhttp://www.phoenixheart.net/2009/03/phpquery/ http://www.phoenixheart.net/2009/03/phpquery/#comments Mon, 09 Mar 2009 18:09:36 +0000 phoenix.heart http://www.phoenixheart.net/?p=252 It’s been quite a while I don’t have any update on this blog (sorry my *ten* RSS subscribers…). If there is any excuse, then it should be the fact that I’ve just left Gameloft to join a start up, and you know it, the work load is just a bit heavier than what I expected. To make my life somewhat more difficult, one day I realized that the current theme of this blog was just too messy and not so flexible, so I decided to redesign it somehow. Well, the new theme is under development now, and all I can promise is it will be much easier for the eye.

Ok cut the chit-chat, today I have this new thing to share.

Here is one line of the oh-so-familiar code:

$("div.old").replaceWith($("div.new").clone()).appendTo(".trash").prepend("Deleted");

If you got no idea what the line means, then let us be honest to each  other: How long have you been under the rock? Man, it’s jQuery! And the code I’ve just shown is a really simple stupid example about manipulation!

Now, once you know what it is and what it does, take a look at this:

pq('div.old')->replaceWith(pq('div.new')->clone())->appendTo('.trash')->prepend('Deleted');

You must have got it right: it’s PHP – OOP PHP 5 to be precise. But what was that with those jQuery stuffs in the middle, you ask?

Well, it’s phpQuery. And it’s what I’m about to introduce here and now.

As the name calls, phpQuery is a jQuery port to PHP. Being based on the most famous Javascript library, phpQuery provides server-side, chainable, CSS3 selector driven DOM API. Many things in jQuery are available/doable in phpQuery – including but not limited to selectors, attributes, traversing, manipulation, utilities, even AJAX and events. And the syntax is just about, if not most of the time exactly the same as that in jQuery – of course if that dollar character doesn’t have a special role in PHP. Example, here is a sample selector code:

pq(".class ul > li[rel='foo']:first:has(a)");

Here is some traversing back and forth:

pq('div > p')->add('div > ul')->filter(':has(a)')->find('p:first')->nextAll()->andSelf();

With some attributes here and there:

pq('a')->attr('href', 'newVal')->removeClass('className')->html('newHtml');

Impressive, no? So what is it for? What are the benefits of using phpQuery?

A bunch!

  • From the simplest, imagine you are “stealing” some content from a website. Imagine you will need to parse the content out from that garbage of (X)HTML, Javascript and CSS tags. Imagine you suck at Regular Expression. How will you reach the goal then? No worries with phpQuery. Just load the (X)HTML content into phpQuery using phpQuery::newDocument(X)HTML(), do some basic selector parsing like pq(“div#holder :text:first:not(‘.bad-boy’)”), and then val(), and then that’s it. Well, what do you say?
  • To some server side DOM creator helpers, when you need to fully control the DOM.
  • To a jQuery plugin named jQueryServer that beautifully allows you to “1. Connect to server and make an Ajax request to somewhere (crossdomain allowed), 2. Do some manipulations, you can even trigger a server-side event, and 3. Get processed data back to the browser”. Have you imagined it? Have you? Woa, I’m excited!
  • And last but not least, to something much more advanced, a TemplatE SysteM – they do call it QueryTemplates. This time it really gets big!

No, don’t tell me you’re not impressed!

]]> http://www.phoenixheart.net/2009/03/phpquery/feed/ 0 Google Search in an AJAX’ed wayhttp://www.phoenixheart.net/2008/12/google-search-in-an-ajaxed-way/ http://www.phoenixheart.net/2008/12/google-search-in-an-ajaxed-way/#comments Thu, 25 Dec 2008 08:07:40 +0000 phoenix.heart http://www.phoenixheart.net/?p=172 I have a good news and a bad news for today. The bad news is, I got hit by a f-king drunker several days ago in a traffic accident (Saigon’s traffic is pure shit) and had to take some macro surgeries. The good news is, due to this accident I have some free time to think and do something – sense and nonsense, just for my habits.

So yesterday, this pal of mine showed (off) a web project he’s taking part in – a site called “HeyGoo“. This site uses Google’s AJAX Search API (and Yahoo’s too, I’m not sure) to find and display result in an AJAX’ed way – that is, no pagination involved, instead users have to scroll to bottom for the next results to be shown up. Rather interesting, eh?

Well, my friend he seemed to be very proud of this project and putting all his hope to its success, so I didn’t want to discourage him. But honestly, I don’t see it as any revolution. Not talking about the old design with tables everywhere, the annoying target=”_blank” anchors and the so-cliché logo, I pointed out for him some problems the site was having:

  • The search results are not so good. I searched for something on Google and it returned some hundreds of results, when HeyGoo told me it couldn’t find any. I don’t know why, hey, at least it is using Google Search API no?
  • There are certainly times that a user want to go to page, say, 3571, to see if his new forum ever reaches to Google. He can do that very easily with any “normal” search engine out there, but not with this HeyGoo where he must scroll 3570 times.
  • Biggest problem: the site currently doesn’t care about the loaded results. New results are appended, appended, appended, when old ones are still there in the top. Imagine how much memory the poor browser has to use up for this curious guy who’s scrolling over 317 pages and counting.

With all these drawbacks vs. the only ajax advantage (personally I don’t see it as an advantage but another failure however), I doubt this site will do anything big. Anyhow as a friend I still wish it the best.

Now to the main part: despite of my skeptical thoughts, I still see the AJAX dynamic scroll content something interesting, and might be useful sometimes. So I sit down and wrote my own (very basic) version of the AJAX Search, where no pagination is involved and you must scroll for something new ;) It took me 30 minutes for the core, and some 30 more for the layout tweaks. Before getting into the code, you can see the final working result here.

It’s rather simple. The whole “trick” was done in 2 part: the client JavaScript, and the server PHP.

1. The JavaScript

As usual, jQuery is my choice. First, bind to the “submit” event of the search form to handle searching.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$("#f").submit(function(e){
    e.preventDefault(); 
 
    // don't search if there's a search in action, or the form is not valid
    if (busy || !validateForm(this)) return false;
 
    $("#result").html("");
    $("#loading").fadeIn();
    var q = $("#q").val();
 
    // indates that there's a search on the stage
    busy = true;
 
    // do an ajax call
    $.ajax({
        url: "search.php",
        data: $("#f").serialize(),
        success: function(msg){
            $("#loading").fadeOut("fast", function(){
                $("#result").html(msg);
                $(document).data("start", 0);  // the start position of result is 0, since this is the first page
                $(document).data("q", q);      // save the last used keywords
                expired = false;                    // the search has not expired (just started ;))
                busy = false;                       // not busy anymore, ready for the next search
            });
        },
        error: function(){
            $("#loading").fadeOut("fast", function(){
                // do something here?
                busy = false;
            });
        }
    });
});

With the Dimension plugin now natively integrated into jQuery version 1.2.6, it’s 4 lines of code to detect if the user has scrolled to the bottom of the page and go get the next results.

1
2
3
4
5
6

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height() - $(window).height()){
        searchMore();
    }
});
 

Now, the searchMore() function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

function searchMore()
{
    // if the site is busy with another search, or if the search has expired
    // (no more results can be found), don't search
    if (busy || expired) return;
 
    // if we don't have a previous search, don't search
    if ($(document).data("q") == "") return;
 
    // i'm working, i'm working...
    busy = true;
 
    // the start page is increased by 1
    $(document).data("start", $(document).data("start") + 1);
    $("#loading").fadeIn();
 
    // make another AJAX call
    $.ajax({
        url: "search.php",
        data: "q=" + $(document).data("q") + "&start=" + $(document).data("start") * 10, // multiplied by 10
        success: function(msg){
            $("#loading").fadeOut("fast", function(){
            	// we have the next result, perfect
            	// append it into the current result
                $("#result").append(msg);
 
                busy = false; // not so busy anymore
            });
        },
        error: function(){
            $("#loading").fadeOut("fast", function(){
                // do something here?
                busy = true;
            });
        }
    });
};

There, the JavaScript is almost done. Of course there is a “validateForm()” function, but I guess it’s not necessary to include it into this post…

2. The server stuff

In order to retrieve the search results from Google, there are at least 2 ways:

  1. Using its AJAX API. Unfortunately, for some mysterious reasons, this didn’t work so well with me, as only 8 first pages can be retrieved. Any attempt to get the remaining results were answered with a 400 bad request error. I guess I missed something, maybe API or ATM ;) but hell with it.
  2. Making use of the traditional and very powerful cURL. My choice :)

Here is the entire content of my search.php page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$url = 'http://www.google.com/search?hl=en&q=' . urlencode($_GET['q']) . '&start=' . intval($_GET['start']);
 
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, $_SERVER['REQUEST_URI']);
$body = curl_exec($ch);
curl_close($ch);
 
// do a simple preg_match to get the results
// let's pray that Google won't change its HTML structure for search results so soon ;)
preg_match('/<ol>(.*?)</ol>/i', $body, $matches)
 
// no match?
if (empty($matches) || empty($matches[1]))
{
    if (intval($_GET['start']))
        die('<script>expired = true;</script><li>No more results were found.</li>'); // set the "expired" JS var to true if this is called from searchMore() function
    else
        die('<li>Your search did not match any documents.</li>');
}
 
// Google uses relative path for the image sources and video links on its search pages
// so we turn them into absolute links
echo utf8_encode(str_replace('"/', '"http://www.google.com/', $matches[1]));

That’s all of the core part. Of course we must prepare the index HTML with all the form, div, ol, img and so on before getting into action, but it’s not that tricky. So you can visit the result here and do some tests. Remember, this search tool is very basic, and I don’t have any intention to turn it into anything advanced ;)

]]> http://www.phoenixheart.net/2008/12/google-search-in-an-ajaxed-way/feed/ 0 Digg This O’ Minehttp://www.phoenixheart.net/2008/10/digg-this-o-mine/ http://www.phoenixheart.net/2008/10/digg-this-o-mine/#comments Wed, 29 Oct 2008 03:44:00 +0000 phoenix.heart http://www.phoenixheart.net/?p=112 Just like most of us here, I love WordPress, and I like Digg.

And as you may know, Digg allows us to integrate the “Digg This” button into virtually any web page. Yes, this naturally includes my WordPress posts. Yay!

The integration is dead simple. To display a “Digg This” button in my post, I only need to place this code somewhere:

1
2
3
4

<script type="text/javascript">
    digg_url = "My post's permalink";
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Or, in case I want to customize the button a bit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
    digg_url     = "My post's permalink";
 
    digg_title   = "My post's title";
 
    // The background color *around* the button
    digg_bgcolor = "#ff9900";
 
    // The "skin" of the button. "Compact" means that tiny icon.
    digg_skin    = "compact";
 
    // Clicking on the button will open the Digg link in a new tab/window
    digg_window  = "new";
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Can’t be simpler right? But I’m not satisfied with this… Firstly, I’m lazy and it bores me to death to copy and paste the scripts above into every new post. Second, if I change the permalink of my post, I’ll have to edit it to update the URL or the button will be in trouble. And third, it will be hell if someday I decide to change the layout of the buttons in all posts, or if Digg changes something in its integration code.

So I was thinking about a “Digg This” plugin that can automate everything for me. And it beat me to see that there’s none, or at least I couldn’t find any.

Then I decided to write one myself. By the way, this is my first attempt to write a plugin for WordPress – I’ve hacked plenty though, like WP-Syntax, All In One SEO Pack etc. It took me one day and lot of headache, but finally I managed to get my Digg This O’ Mine working smoothly, and I’m using it right now.

1
2
3
4
5
6
7
8

/*
Plugin Name: Digg This O' Mine
Plugin URI: http://www.phoenixheart.net/2008/10/digg-this-o-mine
Description: Place a "Digg This" button at the end of your posts, pages, or anywhere at your choice.
Version: 1.0
Author: Phoenixheart
Author URI: http://www.phoenixheart.net
*/

It can be downloaded here. Just like any other plugin, just unzip and upload it into your wp-content/plugins folder, activate it through the “Plugins” panel, and it will work out of the box. If you want more power, head to Settings->Digg This O’ Mine to configure some options:

Digg This O' Mine Options

(The numbers and shading effect are added using Photoshop).

The (background) color picker was implemented using the fantastic Farbtastic jQuery plugin.

Feel free to download, use, and maybe extend this plugin, as it’s licensed under GPL. Comments and bug reports are always welcomed!

As the final line: I attempted to add this plugin into WordPress repository, but somehow I’ve not received any email from them. I would appreciate a lot if someone could guide me through the plugin adding process, as I’m now totally stuck. I’ve managed to add it to WordPress. Now it’s an “official” plugin there.

]]> http://www.phoenixheart.net/2008/10/digg-this-o-mine/feed/ 30