View Full Version : How do you do this...

08-03-2006, 08:26 PM
On this yahoo article, scroll down to the word 'Napster' and click the arrow button - it performs an instant yahoo search on that keyword, does anyone know how this is done. i think it is very good, and would love to know.


08-04-2006, 03:33 AM
That uses AJAX to make a second request for a web page from the server and display it within the original.

Keep in mind that some Internet users use a browser that doesn't have JavaScript enabled. (http://www.thecounter.com/stats/2006/June/javas.php)

The Importance of Degrading Gracefully (http://weblog.burningbird.net/archives/2005/03/25/the-importance-of-degrading-gracefully/)
Perpetuating the myths of JavaScript degradation. (http://domscripting.com/blog/display.php/25)

08-05-2006, 12:19 AM
seeing as yahoo are using a lot of ajax features in their redesigns it suggests they are satisfied users are able to utilise such features. I suspect yahoo have done their research in to who can and who can't view these new features sets. thats good enough for me.

What i want to know is how hard is to build that particular function, or if someone here can do it, pm me and i will move this to the paid services section.

08-05-2006, 11:01 AM
What's good for one site may not be good for another. Doing something or not doing something because one of the top 10 web sites does or doesn't do it is misguided at best.

Check out GreyBox (http://orangoo.com/labs/?page_id=5) and ThickBox (http://codylindley.com/Javascript/257/thickbox-one-box-to-rule-them-all).

08-06-2006, 05:44 PM
Thanks for those links. very interesting. however, i would like to understand yahoos function. any links or i will pay someone for an example.

08-07-2006, 06:00 AM
After looking at it again, I've determined that my original assumption was wrong -- it doesn't use AJAX.

There's a hidden form beside that link. In browsers that the script works in, when you click the link it creates a new <div> that contains among other things, an <iframe>, and positions the <div> near the link. It sets the target of the <form> to the ID of the <iframe> and submits the <form>, so the results load in the <iframe>. It's a lot more complicated than that, but that's basically what it does.

08-07-2006, 06:32 AM
well i am willing to pay for an example as i am intrigued how its done.

08-07-2006, 07:08 AM
With something like this:

<a class="search" href="http://www.google.com/search?q=napster">Napster</a>

You could do:

(function() {
function listener(event) {
var target = event.target || event.srcElement;
if (target.className == "search") {
target.parentNode.insertBefore(document.createElement("iframe"), target.nextSibling);
target.nextSibling.src = target.href;
target.nextSibling.style.cssText = "width: 400px; height: 400px;";
event.returnValue = false;
if (event.preventDefault) event.preventDefault();

if (document.addEventListener) document.addEventListener("click", listener, false);
else if (document.attachEvent) document.attachEvent("onclick", listener);

It's a little rough, and not tested, but it should get you started.

08-07-2006, 07:36 PM
thanks Jason! I am gonna have a play with this.