|
Posted by maya on January 18, 2007, 9:24 am
Please log in for more thread options
http://www.msnbc.msn.com/id/16673873/site/newsweek/
pls scroll down, on the left, near the middle, there is a select object
above which it says "Newsweek Business Directory".. how do they get the
alternate background colors on the list?
(I looked @ src code, couldn't find "<select" )
thank you..
|
|
Posted by Harlan Messinger on January 18, 2007, 11:08 am
Please log in for more thread options
maya wrote:
> http://www.msnbc.msn.com/id/16673873/site/newsweek/
>
> pls scroll down, on the left, near the middle, there is a select object
> above which it says "Newsweek Business Directory".. how do they get the
> alternate background colors on the list?
>
> (I looked @ src code, couldn't find "<select" )
Firefox's DOM Inspector shows a SELECT in the DOM tree, so some script
must be putting it there.
|
|
Posted by maya on January 18, 2007, 11:22 am
Please log in for more thread options
Harlan Messinger wrote:
> maya wrote:
>> http://www.msnbc.msn.com/id/16673873/site/newsweek/
>>
>> pls scroll down, on the left, near the middle, there is a select
>> object above which it says "Newsweek Business Directory".. how do
>> they get the alternate background colors on the list?
>>
>> (I looked @ src code, couldn't find "<select" )
>
> Firefox's DOM Inspector shows a SELECT in the DOM tree, so some script
> must be putting it there.
this means what?? is there a way of finding out how it's done? I've
seen it on other websites too..
thank you..
|
|
Posted by Chris Beall on January 21, 2007, 4:36 pm
Please log in for more thread options
maya wrote:
> http://www.msnbc.msn.com/id/16673873/site/newsweek/
>
> pls scroll down, on the left, near the middle, there is a select object
> above which it says "Newsweek Business Directory".. how do they get the
> alternate background colors on the list?
>
> (I looked @ src code, couldn't find "<select" )
>
> thank you..
maya,
Go to
http://cache.directorym.com/creative/module/loader.aspx?af=1246&group=3
which will display just the list you are interested in (the main page
embeds it in an iframe).
View the source. Search for 'baselist' which is the id of a select
statement generated by JavaScript.
The JavaScript opens a div, inserts an H2 (empty), opens a select list,
adds an end-option tag, closes the select list, and closes the div.
This creates a totally empty select list.
Next in the source you will see another script called (<script
src="script.aspx?affiliate=1246&b=True&bp=18&source=89"
type="text/javascript">)
If you overlap-splice the src= value to the URL you are looking at, you
get
http://cache.directorym.com/creative/module/TypeF/script.aspx?affiliate=1246&b=True&bp=18&source=89
Go there. You are looking at the JavaScript source. [I did all this
with Firefox 2...]
Scroll to the bottom, past all of the x = y stuff, and you will see the
code that does the work, adding options to the empty select list. I
didn't examine it in detail, but the result is that odd numbered options
retain the background-color inherited from the cascade (transparent),
while even numbered options are given a different background-color via a
style= attribute inserted into the document.
In case the user has JavaScript turned off, there's a <noscript> version
which skips the select list and just displays the links, without the
odd-even highlighting.
But, if you are patient, CSS3 will apparently be adding selectors for
odd and even children (see
http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#nth-child-pseudo)
so that this can be done without JavaScript.
Chris Beall
|
| Similar Threads | Posted | | Micro-pump is cool idea for future computer chips | July 13, 2006, 6:16 am |
| Free Video that show how to beat the Google sandbox with White Hat SEO so cool | January 20, 2008, 2:46 am |
| No effect on selection | April 15, 2006, 5:38 am |
| Very strange error effect with | March 13, 2005, 8:50 pm |
| what is the effect of leading slash in URL? | September 15, 2006, 6:41 am |
| How to achieve the effect of this website? | July 7, 2007, 3:34 am |
| Preview Window and Moiré Effect | October 8, 2004, 7:48 am |
| Deactivate the effect of back button | November 15, 2005, 8:48 am |
| nice hover-effect for images | March 30, 2007, 9:00 am |
| ISO torn ripped frayed edge effect | June 30, 2005, 6:51 am |
|
XML Sitemap