Script for depressible buttons?

[Brett]

Is there a script for depressible buttons that work in Mozilla and IE?

This works nice but only in IE:
http://www.dynamicdrive.com/dynamici...ressbutton.htm.

Thanks,
Brett

[RobG]

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

This works nice but only in IE:
http://www.dynamicdrive.com/dynamici...ressbutton.htm.

Thanks,
Brett

"Easy to install and degrades well with all other browsers."

Rubbish, they don't work at all in Firefox. The effect is a "button"
that doesn't look like a button or a link, but if you click on it, off
you go to the new location. All that happens (in IE) is that the
borders are changed to simulate the "button" being depressed. The
author couldn't even write cross-browser JS to do it - what quality.

I'm sure someone here can do a better version in 10 minutes. Right now
I gotta do work...

Rob.

[RobG]

RobG wrote:

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

[snip] I'm sure someone here can do a better version in 10 minutes. Right now
I gotta do work...

The functions are compatible with more browsers if the following:

function makeRaised(el) {
with (el.style) {
borderLeft = "1px solid buttonhighlight";
borderRight = "1px solid buttonshadow";
borderTop = "1px solid buttonhighlight";
borderBottom = "1px solid buttonshadow";
padding = "1px";
}
}

is rewritten as:

function makeRaised(el) {
el.style.borderLeft = "1px solid buttonhighlight";
el.style.borderRight = "1px solid buttonshadow";
el.style.borderTop = "1px solid buttonhighlight";
el.style.borderBottom = "1px solid buttonshadow";
el.style.padding = "1px";
}

and similarly for makePressed().

I've only performed minimal testing (IE and Firefox) so there is a lot
more work to do to make it robust, but it shows how trivial it is to
make IE-specific code into cross-browser code.

Cheers, Rob.

[Randy Webb]

RobG wrote:

RobG wrote:

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

[snip]

I'm sure someone here can do a better version in 10 minutes. Right now
I gotta do work...

The functions are compatible with more browsers if the following:

function makeRaised(el) {
with (el.style) {
borderLeft = "1px solid buttonhighlight";
borderRight = "1px solid buttonshadow";
borderTop = "1px solid buttonhighlight";
borderBottom = "1px solid buttonshadow";
padding = "1px";
}
}

is rewritten as:

function makeRaised(el) {
el.style.borderLeft = "1px solid buttonhighlight";
el.style.borderRight = "1px solid buttonshadow";
el.style.borderTop = "1px solid buttonhighlight";
el.style.borderBottom = "1px solid buttonshadow";
el.style.padding = "1px";
}

and similarly for makePressed().

I've only performed minimal testing (IE and Firefox) so there is a lot
more work to do to make it robust, but it shows how trivial it is to
make IE-specific code into cross-browser code.

It also shows, pretty well, how badly people can write code and have it
"published" on the web. Sad state of affairs.
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

[Brett]

"RobG" <rg***@iinet.net.auau> wrote in message
news:o3*****************@news.optus.net.au...

RobG wrote:

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

[snip]

I'm sure someone here can do a better version in 10 minutes. Right now
I gotta do work...

The functions are compatible with more browsers if the following:

function makeRaised(el) {
with (el.style) {
borderLeft = "1px solid buttonhighlight";
borderRight = "1px solid buttonshadow";
borderTop = "1px solid buttonhighlight";
borderBottom = "1px solid buttonshadow";
padding = "1px";
}
}

is rewritten as:

function makeRaised(el) {
el.style.borderLeft = "1px solid buttonhighlight";
el.style.borderRight = "1px solid buttonshadow";
el.style.borderTop = "1px solid buttonhighlight";
el.style.borderBottom = "1px solid buttonshadow";
el.style.padding = "1px";
}

and similarly for makePressed().

I've only performed minimal testing (IE and Firefox) so there is a lot
more work to do to make it robust, but it shows how trivial it is to
make IE-specific code into cross-browser code.

Cheers, Rob.

Rob,

Thanks. I'm particularly interested in example 2, this code:

<div class="coolBar" style="width:100px">
<span class="coolButton" style="width:100px"
onClick="window.location='http://dynamicdrive.com'"><img src="home.gif">
<b>Back Home</b></span>
</div>

I've tried the changes you mentioned but still get no effect in Netscape
7,.2 or Firefox. Any ideas how to get the above working for those?

Thanks again,
Brett

[Philip Ronan]

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

This works nice but only in IE:
http://www.dynamicdrive.com/dynamici...ressbutton.htm.

It doesn't look too good in IE either.

Anyway, you shouldn't be using Javascript to do this kind of thing if you
can avoid it.

Try this for example:

<STYLE type="text/css">
A {
position: relative;
top: 0px;
left: 0px;
color: #00f;
font-weight: bold;
background-color: #eef;
padding: 1px 3px 1px 3px;
border: 2px outset #aad;
}

A:active {
top: 1px;
left: 1px;
color: #000;
padding: 2px 2px 0px 4px;
border: 2px inset #aad;
}
</STYLE>
--
Philip Ronan
ph***********@virgin.net
(Please remove the "z"s if replying by email)

[Fred Oz]

Brett wrote:
[snip]

Thanks. I'm particularly interested in example 2, this code:

<div class="coolBar" style="width:100px">
<span class="coolButton" style="width:100px"
onClick="window.location='http://dynamicdrive.com'"><img src="home.gif">
<b>Back Home</b></span>
</div>

I've tried the changes you mentioned but still get no effect in Netscape
7,.2 or Firefox. Any ideas how to get the above working for those?

Why use JavaScript to follow links? Users with JS disabled will click
the "link" nothing will happen. Also, the cursor will change to an
"I" bar because it's over text, not a hand pointer for a link -
confusing users. So you need to handle the cursor too...

<a href=...> was create just for links. It uses HTML, every browser
ever created knows what it is and how to use it, and you can make it
look however you want. Consider Philip's post, I've slightly adapted
it.

Cheers, Fred.
<html><head><title> button play </title>
<STYLE type="text/css">
A {
position: relative;
top: 0px;
left: 0px;
color: #00f;
font-weight: bold;
background-color: #eef;
padding: 1px 3px 1px 3px;
border: 2px outset #aad;
}

A:active {
top: 1px;
left: 1px;
color: #000;
padding: 8px 8px 8px 8px;
border: 2px inset #aad;
text-decoration: none;
}
A:visited {
top: 0px;
left: 0px;
color: #000;
padding: 8px 8px 8px 8px;
border: 2px inset #aad;
text-decoration: none;
}
</STYLE>
</head>
<body style="margin: 20px 0px 0px 20px;">

<span><a href="http://www.apple.com">Go to Apple</a></span>

</html>

[Brett]

"Philip Ronan" <ph***********@virgin.net> wrote in message
news:BD99480E.23EF1%ph***********@virgin.net...

Brett wrote:

Is there a script for depressible buttons that work in Mozilla and IE?

This works nice but only in IE:
http://www.dynamicdrive.com/dynamici...ressbutton.htm.

It doesn't look too good in IE either.

Anyway, you shouldn't be using Javascript to do this kind of thing if you
can avoid it.

Try this for example:

<STYLE type="text/css">
A {
position: relative;
top: 0px;
left: 0px;
color: #00f;
font-weight: bold;
background-color: #eef;
padding: 1px 3px 1px 3px;
border: 2px outset #aad;
}

A:active {
top: 1px;
left: 1px;
color: #000;
padding: 2px 2px 0px 4px;
border: 2px inset #aad;
}
</STYLE>
--
Philip Ronan
ph***********@virgin.net
(Please remove the "z"s if replying by email)

Thanks. That's pretty good. Is there a way to make it pop back up once it
is depressed.

I don't really need it for the href. I'm using an image's onClick to do
something else. I'd like to have the image (Just a colored circle) depress
rather than text. Is there a way to draw a color circle using something
similar to the above and have it depress than pop back up? I would then use
the href to direct the user to some location (actually I'm making a table
row appear).

Thanks,
Brett

[Dana Cartwright]

"Brett" <[e-mail]> wrote in message
news:Ce********************@rcn.net...

I don't really need it for the href. I'm using an image's onClick to do
something else. I'd like to have the image (Just a colored circle)
depress
rather than text. Is there a way to draw a color circle using something
similar to the above and have it depress than pop back up? I would then
use
the href to direct the user to some location (actually I'm making a table
row appear).

You're running up against the most basic headache of the WWW.

The original intent (of the designers of the WWW and hence browsers) was to
handle text and links. Hence "HTML" as "Hyper Text Markup Language".

But, increasingly, people want to use the WWW and browsers to develop
on-line applications. So they are looking for an API that gives them
buttons, menus, dialogs, text areas, and so forth, that behave with all the
flexibility of a programming API.

This may happen. But meanwhile, you're forced to all sorts of strange
contortions to try to fit the richness of a programming API onto HTML
browsers.

You can put tons of JS on a page, and thereby do much of what you want.
Java applets provide some help, as do things like Flash, but you're still
trying to stretch things to fit. But the more you do this, the more your
page risks being browser-specific and platform-specific, the more work you
have to do, and the fewer people who will experience your UI as you
intended.

I keep hoping there's a way out of this box. Meanwhile, my advice (which I
keep repeating to myself and to my clients) is "don't try to use the Web as
a replacement for applications." For the time being, these are two separate
spaces. The closer you keep your web "applications" to the things that
browsers do well, the easier it will be to develop your code, and the easier
it will be for users to get full usefulness from your work. And, this
sucks, because you just can't get very creative.

[Randy Webb]

Dana Cartwright wrote:

"Brett" <[e-mail]> wrote in message
news:Ce********************@rcn.net...

I don't really need it for the href. I'm using an image's onClick to do
something else. I'd like to have the image (Just a colored circle)
depress
rather than text. Is there a way to draw a color circle using something
similar to the above and have it depress than pop back up? I would then
use
the href to direct the user to some location (actually I'm making a table
row appear).

You're running up against the most basic headache of the WWW.

The original intent (of the designers of the WWW and hence browsers) was to
handle text and links. Hence "HTML" as "Hyper Text Markup Language".

No it wasn't. The web was before HTML. The original intent of the web,
and still is today, is the sharing of information. Nothing more, nothing
less. HTML just happens to be one method used to share that information.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq