 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / June 2006How does Yahoo make those pop up windows?
On the web page http://news.yahoo.com if you go down the page to "Top Stories", "Most Popular", or any of the other categories, and hover over the links to various articles in any of these categories, a clean info window pops up with pictures and a quick description of what is in the article. I've tried to figure out how it's done but haven't been able to. Anyone know how to create one of those pop up windows? > On the web page http://news.yahoo.com if you go down the page to "Top > Stories", "Most Popular", or any of the other categories, [quoted text clipped - 3 lines] > but haven't been able to. Anyone know how to create > one of those pop up windows? I'm guessing it's the same Javascript stuff that uses ilayers or something similar. When you over over a link, the CSS display attribute is change to show the layer. Move off the link, the layer is hidden again. Netflix uses something similar for links to it's movies.  SignatureDeeDee, don't press that button! DeeDee! NO! Dee... > On the web page http://news.yahoo.com if you go down the page to > "Top Stories", "Most Popular", or any of the other categories, and [quoted text clipped - 3 lines] > haven't been able to. Anyone know how to create one of those pop up > windows? Whatever it is, DON'T USE IT! There is rarely, if ever, a good reason for opening a new window. If I want a new window, I can tell my brower to open a link in a new window; the site should never do it. SignatureChris F.A. Johnson, author <http://cfaj.freeshell.org> Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) ===== My code in this post, if any, assumes the POSIX locale ===== and is released under the GNU General Public Licence >> On the web page http://news.yahoo.com if you go down the page to >> "Top Stories", "Most Popular", or any of the other categories, and [quoted text clipped - 9 lines] > If I want a new window, I can tell my brower to open a link in a > new window; the site should never do it. These aren't new windows, these are small pop-ups that provide extra information to the user in the same window. Jolly clever and useful if you ask me. If you don't like them, you aren't forced to hover your mouse over the link to see them. Now, as for genuine pop-ups, I agree they are a very bad idea and will be blocked by many a user and ignored by many more. Ta ra SignatureAlan Silver (anything added below this line is nothing to do with me) > On the web page http://news.yahoo.com if you go down the page to "Top > Stories", "Most Popular", or any of the other categories, [quoted text clipped - 3 lines] > but haven't been able to. Anyone know how to create > one of those pop up windows? Yahoo make most of the Javascript for that sort of expand and collapse thing available on their developer's pages. Try http://developer.yahoo.com/ypatterns/index.php and maybe http://developer.yahoo.com/ypatterns/examples/expand.html to get examples of how to do it. They have a bunch of CSS and Javascript patterns and libraries for doing certain common web page tasks. Most (maybe all) are available under Creative Commons. A lot of the developer page CSS is in HTML 4.01 Strict, not the transitional used on Yahoo's main page. Remember that no Javascript enabled, no expansion, so your navigation and everything needs to make sense without the fancy effects. About 10% of viewers will not enable Javascript (for security, or just to stop annoying effects). You may have to attempt to identify and classify browsers and present different code to older browsers if you decide to support older browsers. Yahoo seem to classify browsers as obsolete (a blacklist of known bad ones), or recent (a whitelist of the major ones that handle CSS). Anything unidentified is assumed to be recent and gets CSS (I think their terminology is C, A and X). Yahoo at least seem to check that their code works in IE6 and IE7, Firefox from 1.07 and recent Opera and Safari. IE5 (and maybe 5.5) is considered an obsolete browser for their purposes. Signaturehttp://www.ericlindsay.com HI-Liter schreef: > On the web page http://news.yahoo.com if you go down the page to "Top Stories", "Most Popular", or any of the other categories, > and hover over the links to various articles in any of these categories, a clean info window pops up with pictures and a quick > description of what is in the article. I've tried to figure out how it's done but haven't been able to. Anyone know how to create > one of those pop up windows? I don't get any popup windows when hovering over the links on the Yahoo site. But reading your description of what happens, it sounds like something like overLIB: http://www.bosrup.com/web/overlib/. This is a free javascript libary, and you can customise it a lot. > HI-Liter schreef: > [quoted text clipped - 7 lines] > something like overLIB: http://www.bosrup.com/web/overlib/. This is a > free javascript libary, and you can customise it a lot. Thanks I don't know if it uses the same technique as yahoo, but it does exactly the same thing. If you hover over the links toward the bottom of http://www.bosrup.com/web/overlib/ , a small window pops up and displays some text. I put an image in the code where the text was and that works too. Now to figure out how it works. HI-Liter schreef: > Thanks > I don't know if it uses the same technique as yahoo, but it does exactly the same thing. If you hover over the links toward the > bottom of http://www.bosrup.com/web/overlib/ , a small window pops up and displays some text. I put an image in the code where the > text was and that works too. Now to figure out how it works. Overlib is free and open source. Download it and take a look into its source code. > HI-Liter schreef: > > Thanks [quoted text clipped - 4 lines] > Overlib is free and open source. Download it and take a look into its > source code. There are 11 external files. I hope it doesn't use all of them to perform this feat lol |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.