469,275 Members | 1,744 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,275 developers. It's quick & easy.

button question

Hi, could anyone please tell me how to make a button look like "being clicked"?
A button picture always looks static, though a link is associated with it.
Thank you.
Jul 23 '05 #1
7 2395
Yaqian Fang wrote on 07 nov 2004 in comp.lang.javascript:
Hi, could anyone please tell me how to make a button look like "being
clicked"? A button picture always looks static, though a link is
associated with it. Thank you.


<button onclick="this.style.color='red'">
click me and stay red</button>

<button onclick="this.disabled=true">
click me once only</button>
<button onclick="this.style.borderStyle='inset';this.disab led=true">
depress me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #2
Yaqian Fang wrote:
Hi, could anyone please tell me how to make a button look like "being clicked"?
A button picture always looks static, though a link is associated with it.
Thank you.


Create a "clicked" image and onmousedown change to it. onmouseup change
back.

Fred.
Jul 23 '05 #3
Evertjan. wrote:
Yaqian Fang wrote on 07 nov 2004 in comp.lang.javascript:
Hi, could anyone please tell me how to make a button look like "being
clicked"? A button picture always looks static, though a link is
associated with it. Thank you.


<button onclick="this.style.color='red'">
click me and stay red</button>

<button onclick="this.disabled=true">
click me once only</button>

<button onclick="this.style.borderStyle='inset';this.disab led=true">
depress me once only</button>


Evertjan,

very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.disabled=true;this.value='Please Wait...';">click
me once only</button>

Mike
Jul 23 '05 #4
mscir wrote on 07 nov 2004 in comp.lang.javascript:
very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.disabled=true;this.value='Please Wait...';">click
me once only</button>


Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this.disabled=true;this.innerHTML='Please Wait...';">
click me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #5
Evertjan. wrote:
mscir wrote on 07 nov 2004 in comp.lang.javascript:
very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.disabled=true;this.value='Please Wait...';">click
me once only</button>


Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this.disabled=true;this.innerHTML='Please Wait...';">
click me once only</button>


Good point, I found this with google... it discusses both approaches and
their potential problems, and has code to handle more than one browser:

http://www.permadi.com/tutorial/jsInnerHTMLDOM/

Here's an example using that code, it works on my IE 6, Netscape 7.2,
Moz 1.7.3, Firefox 1.0 pr:

<script type="text/javascript">
function replaceButtonText(buttonId, text){
if (document.getElementById) {
var button=document.getElementById(buttonId);
if (button) {
if (button.childNodes[0]) {
button.childNodes[0].nodeValue=text;
} else if (button.value) {
button.value=text;
} else { //if (button.innerHTML)
button.innerHTML=text;
}
}
}
}
</script>

<button id="b1" onclick="replaceButtonText('b1', 'Please Wait
1...');">click me once only</button>
<br>
<button id="b2" onclick="replaceButtonText('b2', 'Please Wait
2...');">click me once only</button>

Mike
Jul 23 '05 #6
Thank you all very much!

mscir wrote on 07 nov 2004 in comp.lang.javascript:
very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.disabled=true;this.value='Please Wait...';">click
me once only</button>


Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this.disabled=true;this.innerHTML='Pleas e Wait...';">
click me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

Jul 23 '05 #7
mscir wrote:
<snip>
<script type="text/javascript">
function replaceButtonText(buttonId, text){
if (document.getElementById) {
var button=document.getElementById(buttonId);
if (button) {
if (button.childNodes[0]) {
button.childNodes[0].nodeValue=text;
} else if (button.value) {
button.value=text;
} else { //if (button.innerHTML)
button.innerHTML=text;
}
}
}
}
</script>

<button id="b1" onclick="replaceButtonText('b1', 'Please Wait
1...');">click me once only</button>


This might work on more browsers, if support for "this" is better than
for getElementById.

function replaceButtonText(btn, text){
//alert('btn.childNodes[0] '+btn.childNodes[0]+'\nbtn.value
'+btn.value+'\nbtn.innerHTML '+btn.innerHTML);
if (btn.childNodes[0]) {
btn.childNodes[0].nodeValue=text;
} else if (btn.value) {
btn.value=text;
} else { //if (button.innerHTML)
btn.innerHTML=text;
}
}

<button id="b1" onclick="replaceButtonText(this, 'Please Wait
....');">click me once only</button>

Mike
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by Samantha Smit | last post: by
2 posts views Thread by ziggs | last post: by
2 posts views Thread by Kevin Blackwell | last post: by
reply views Thread by VB Programmer | last post: by
7 posts views Thread by David T. Ashley | last post: by
reply views Thread by Rudy | last post: by
reply views Thread by Kevin Blount | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.