How to code the Yahoo! pop-up search box?

[irock]

Hi, I would like to see how Yahoo did this on their site.

[news.yahoo.com...]

If you go to this page and then click on 'President Bush', a pop-up search box will appear. I would really like to know where to get some sample codes.

Thanks for your help.

[MichaelBluejay]

You can see HTML and Javascript code for any page by going to the View menu of your browser and choosing "Source". In this case we get:

Pakistani provincial authorities said Tuesday four or five foreign terrorists were killed in the purported U.S. missile strike that has severely strained relations with this Muslim nation, a key ally in <span class="yqlink">
<form class="yqin" action="http://yq.search.yahoo.com/search" method="post">
<input type="hidden" name="p" value="&quot;President Bush&quot;" />
<input type="hidden" name="sourceOrder" value="c1,i,yn,c3" />
<input type="hidden" name="c1" value="<p style=&quot;font-family:arial,sans-serif;font-weight:bold;font-size:13px;padding:0;margin-top:1em;margin-bottom:.5em;&quot;>President Bush</p>" />
<input type="hidden" name="c3" value="&lt;p&gt;&lt;strong&gt;SEARCH&lt;/strong&gt;&lt;br /&gt;&lt;a href=&quot;http://search.news.yahoo.com/search/news/?p=%22President+Bush%22&amp;fr=yqovly1&quot;&gt;News&lt;/a&gt; ¦ &lt;a href=&quot;http://search.news.yahoo.com/search/news/?p=%22President+Bush%22&amp;c=news_photos&amp;fr=yqovly2&quot;&gt;News Photos&lt;/a&gt; ¦ &lt;a href=&quot;http://images.search.yahoo.com/search/images?p=%22President+Bush%22&amp;fr=yqovly3&quot;&gt;Images&lt;/a&gt; ¦ &lt;a href=&quot;http://search.yahoo.com/search?p=%22President+Bush%22&amp;fr=yqovly4&quot;&gt;Web&lt;/a&gt;&lt;/p&gt;" />
</form>
<a href="http://search.news.yahoo.com/search/news/?p=President+Bush" onClick="activateYQinl(this);return false;" class="yqimgins" title="Related information on President Bush">President Bush</a></span>'s war on terror.

The crucial bit is onClick="activateYQinl(this);return false;" in the link, which calls a JavaScript function called "activateYQinl". That particular function doesn't appear on the page, but at the top of the page we see this:

<script type="text/javascript" language="javascript" src="http://us.js1.yimg.com/news.yahoo.com/v10/us/news/includes/ynrater.js?v=1135901281&akamaize=1"></script>
<script type="text/javascript" language="javascript" src="http://us.js1.yimg.com/news.yahoo.com/v10/us/news/includes/ynim.js?v=1135901281&akamaize=1"></script>

That's code to call in those JavaScript files from the server. I haven't checked out those urls, but that should be where the JavaScript functions are.

Okay, so you can see how to hunt down the code that's on a page, even if part of it is hidden in other files. This is an extraordinarily useful skill to have. But to just program something to pop up within the page, you'll probably want to start with some simple inline Javascript:

<p>Here's an <a href='#' onclick="document.getElementById('popup').style.visibility='visible'; return false">on-page</a> popup.

<div id=popup style="width:100; position:absolute; top:100; left:500; visibility:hidden" onclick="this.style.visibility='hidden'">Blah blah blah</div>

[irock]

Thanks much for your help.

Your tip actually helps but I want to start an iframe inside the pop-up layer. Will this work as well?

[MichaelBluejay]

I'm afraid I don't know anything about iframes. Why not just try it and see if it works?