Which tool does this?

Karim <karim3411.TakeThisOut@yahoo.moc> wrote in
news:1j1iuvhzdod28$.1255uvmtkjruh.dlg@40tude.net:

<font color=purple> > <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
 >
 > On this page when you click on a feature, it open a new panel
 > underneath with more info. I suspect a tool was used to create such as
 > effect. I also like the ? that shows up when you hover on a feature. I
 > suspect the same tool can produce other effects to so I am interested
 > in checking it out.

It's really quite simple, and has nothing to do
with which tool was used.

The cursor is done using CSS:
tr.inforow {
cursor: help;
}
and the info appearing below the feature when
you click on the feature(or disappearing when you
click again) is done by using the OnClick event
handler of the table rows to call the toggleTable()
javascript function(which of course doesn't work if
javascript is disabled).

Take a look at the page's source code, and you'll see
what I mean.

--
Dave Patton
Canadian Coordinator, Degree Confluence Project
<a style='text-decoration: underline;' href="http://www.confluence.org/" target="_blank">http://www.confluence.org/</a>
My website: <a style='text-decoration: underline;' href="http://members.shaw.ca/davepatton/" target="_blank">http://members.shaw.ca/davepatton/</a><!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Fri, 29 Oct 2004 22:33:09 GMT, Dave Patton wrote:

 > Karim <karim3411.DeleteThis@yahoo.moc> wrote in
 > news:1j1iuvhzdod28$.1255uvmtkjruh.dlg@40tude.net:
 >
<font color=green>  >> <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
  >>
  >> On this page when you click on a feature, it open a new panel
  >> underneath with more info. I suspect a tool was used to create such as
  >> effect. I also like the ? that shows up when you hover on a feature. I
  >> suspect the same tool can produce other effects to so I am interested
  >> in checking it out.
 >
 > It's really quite simple, and has nothing to do
 > with which tool was used.
 >
 > The cursor is done using CSS:
 > tr.inforow {
 > cursor: help;
 > }
 > and the info appearing below the feature when
 > you click on the feature(or disappearing when you
 > click again) is done by using the OnClick event
 > handler of the table rows to call the toggleTable()
 > javascript function(which of course doesn't work if
 > javascript is disabled).
 >
 > Take a look at the page's source code, and you'll see
 > what I mean.


Technically I know how all this stuff works but I don't want to hand code
everything. There are tools out there that create panelbars, treeviews,
menus, dropdown menus, sidemenus, Outlook bars.. etc. that create the
visual layout and all you have to do pick a template, enter the text and
links and its all done for you. I will be more productive this way where a
tool creates all the plumbing for me but where I can hand edit if I want to
do more customization.
I am looking for something similar for what I saw. I am good at programming
but clean visual layout is not my strong area.



Karim<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Fri, 29 Oct 2004 15:11:09 -0700, Karim <karim3411.RemoveThis@yahoo.moc> wrote:

 > On this page when you click on a feature, it open a new panel underneath
 > with more info. I suspect a tool was used to create such as effect.

Possible, but it certainly isn't necessary as the effect is fairly simple.
I must say that it wasn't implemented very well though: the only way for
"scriptless" users to view the descriptions is to override the author's
CSS, and the script involved uses no feature detection. The text should
have only been hidden if it would be possible to unhide it again.

It's also a shame that the page is virtually one giant table.

 > I also like the ? that shows up when you hover on a feature.

I actually think that's somewhat confusing. Certainly not as intuitive as
it's supposed to be, but in any case, it's very simple CSS:

<selector> {
cursor: help;
}

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

Karim wrote:

<font color=purple> > <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
 >
 > On this page when you click on a feature, it open a new panel underneath
 > with more info. I suspect a tool was used to create such as effect.

A text editor is all you need for that (and the JS looks to be hand
crafted). A quick glance looks like it just toggles the display property of
the element.

The JavaScript, however, doesn't perform any feature testing and the page
seems to default to the closed position. This is bad design and renders
some content inaccessible to user agents with sufficient CSS support but
more limited JS support (or with JS turned off). A better solution would be
to default to being open and toggle the display property to 'none' onload
(and, of course, add feature detection so as not to throw JS errors in
older browsers).

 > I also like the ? that shows up when you hover on a feature.

<a style='text-decoration: underline;' href="http://w3.org/TR/CSS2/ui.html#cursor-props" target="_blank">http://w3.org/TR/CSS2/ui.html#cursor-props</a>

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Fri, 29 Oct 2004 15:11:09 -0700, Karim <karim3411 RemoveThis @yahoo.moc> wrote:

 >http://www.mediatemple.net/services/webhosting/as/linux/index.php
 >
 >On this page when you click on a feature, it open a new panel underneath
 >with more info.

Doesn't work for me.

 > I suspect a tool was used to create such as effect.

JavaScript. It's all in the page source.

 > I also like the ? that shows up when you hover on a feature. I suspect the same
 >tool can produce other effects to so I am interested in checking it out.

CSS. The cursor property.

  Steve<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

Karim wrote:

<font color=purple> > <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
 >
 > On this page when you click on a feature, it open a new panel underneath
 > with more info. I suspect a tool was used to create such as effect. I also
 > like the ? that shows up when you hover on a feature. I suspect the same
 > tool can produce other effects to so I am interested in checking it out.
 >
 > So if anyone knows what was used or any tool that has a load of similar
 > effects, please let me know which site(s) offer these type of tools.
 >
 > TIA.
 >
 >
 > Karim

There really isn't a tool. Best to just write it by hand. It's really
simple stuff.

--


x theSpaceGirl (miranda)

# lead designer @ <a style='text-decoration: underline;' href="http://www.dhnewmedia.com" target="_blank">http://www.dhnewmedia.com</a> #
# remove NO SPAM to email, or use form on website #<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Sat, 30 Oct 2004 00:59:35 +0100, SpaceGirl wrote:

 > Karim wrote:
 >
<font color=green>  >> <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
  >>
  >> On this page when you click on a feature, it open a new panel underneath
  >> with more info. I suspect a tool was used to create such as effect. I also
  >> like the ? that shows up when you hover on a feature. I suspect the same
  >> tool can produce other effects to so I am interested in checking it out.
  >>
  >> So if anyone knows what was used or any tool that has a load of similar
  >> effects, please let me know which site(s) offer these type of tools.
  >>
  >> TIA.
  >>
  >>
  >> Karim
 >
 > There really isn't a tool. Best to just write it by hand. It's really
 > simple stuff.

How do you know? You know every single tool that exists?


Karim
--
<a style='text-decoration: underline;' href="http://www.cheapesthosting.com" target="_blank">http://www.cheapesthosting.com</a> - Innovative Web Hosting since 1998
Spam and Virus protected email - Online calendars with email notification
Camera phone photos automatic transfers to your photo album (RSS Enabled)<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

Karim wrote:

 > On this page when you click on a feature, it open a new panel underneath
 > with more info. I suspect a tool was used to create such as effect.

No tools required. Just some hidden <td>s made visible/invisible with a bit
of javascript in an onclick event handler.

 > I also
 > like the ? that shows up when you hover on a feature.

No tools required. Just some css to change the cursor for those table cells.

 > I suspect the same
 > tool can produce other effects to so I am interested in checking it out.

view->source, drill down to the .css and .js files.

--
Cheers
Richard.<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

In alt.www.webmaster,alt.html Karim said:

<font color=purple> > <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
 > On this page when you click on a feature, it open a new panel underneath
 > with more info. I suspect a tool was used to create such as effect.

i suspect javascript because nothing happens when i click

 > I also like the ?

CSS cursor:help;
http:www.w3.org/TR/REC-CSS2/ui.html#cursor-props

--

v o i c e s o f t h e l i t t l e<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Sat, 30 Oct 2004 08:19:06 +1000, brucie wrote:

 > In alt.www.webmaster,alt.html Karim said:
 >
<font color=green>  >> <a style='text-decoration: underline;' href="http://www.mediatemple.net/services/webhosting/as/linux/index.php</font" target="_blank">http://www.mediatemple.net/services/webhosting/as/linux/index.php</font</a>>
  >> On this page when you click on a feature, it open a new panel underneath
  >> with more info. I suspect a tool was used to create such as effect.
 >
 > i suspect javascript because nothing happens when i click
 >
  >> I also like the ?
 >
 > CSS cursor:help;
 > http:www.w3.org/TR/REC-CSS2/ui.html#cursor-props


You have your Javascript disabled? If you're not using IE, why?

Karim<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Fri, 29 Oct 2004 15:11:09 -0700, Karim wrote:

 >
 > So if anyone knows what was used or any tool that has a load of similar
 > effects, please let me know which site(s) offer these type of tools.
 >
 > TIA.
 >
 >
 > Karim

It is Javascript + CSS/DOM DHTML. Look at the source code for the page;
it is all in there.

--
Jeffrey Silverman
jeffreyPANTS DeleteThis @jhu.edu
** Drop "PANTS" to reply by email<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

In alt.www.webmaster Karim said:

  >> i suspect javascript because nothing happens when i click

 > You have your Javascript disabled?

yes.

 > If you're not using IE, why?

slow, resource hungry, lack of configurability but primarily poor
security. it cant be trusted.

--

v o i c e s o f t h e l i t t l e<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this? 

On Sat, 30 Oct 2004 09:09:13 +1000, brucie wrote:

 > In alt.www.webmaster Karim said:
 >
   >>> i suspect javascript because nothing happens when i click
 >
  >> You have your Javascript disabled?
 >
 > yes.
 >
  >> If you're not using IE, why?
 >
 > slow, resource hungry, lack of configurability but primarily poor
 > security. it cant be trusted.


My bad words. I meant if you're not using IE, why do you have Javascript
disabled? The main reason is security but if you're not using IE, I don't
find Javascript harmful.

As for resources, I just loaded IE 6 and Firefox. My task manager indicates
that Firefox is using 2Megs more ram than IE.

I emptied the cache in IE, loaded CNN in Firefox and IE and noticed IE
loaded the page faster. Your mileage may vary. When you say it's slower
are you waiting for a few seconds for a page to load vs the same page for
Firefox?



Karim
--
<a style='text-decoration: underline;' href="http://www.cheapesthosting.com" target="_blank">http://www.cheapesthosting.com</a> - Innovative Web Hosting since 1998
Spam and Virus protected email - Online calendars with email notification
Camera phone photos automatic transfers to your photo album (RSS Enabled)<!-- ~MESSAGE_AFTER~ -->
 >> Stay informed about: Which tool does this?