button stays pressed onclick? [Archive]

View Full Version : button stays pressed onclick?

F.N.G.

01-10-2003, 08:17 PM

Hello,

I would like to know how to modify the following script in order to cause a button to stay depressed, until another is clicked (which will then become depressed).

This script changes the color of buttons in such a manner, but I haven't yet found a reference for keeping a clicked button down.

Thanks for any help:
-----------------------------------------------------------------------------------

<html>
<head>
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td>
<input type=text name=tex_t value=Text.>
<input type=button id=button0 value='button1' onclick="window.location.href='#"> 
<input type=button id=button1 value='button2' onclick="window.location.href='#"> 
<input type=button id=button2 value='button3' onclick="window.location.href='#"> 
<input type=reset id=button3 value='button4' onclick="window.location.href='#"> 
</td>
</tr>
</table>
<script language=JavaScript>
//Insert these lines into any place of page
//Set parameter "ID" for buttons so that it began with "butt".
//For example - "button1", "button2", "butt_shan"...
//You can use all types of buttons - "button", "submit", "reset".
//It is possible to add to them events. E.g. - onClick.
//---- Choice of variables ----\\

m_over_col="#ff9944"
m_out_col="#5555ee"
m_down_col="#90dd90"

m_over_col_tx="#4444ff"
m_out_col_tx="#ffffff"
m_down_col_tx="#000000"

//---------The description---------\\
/*
m_over_col - background of buttons at MouseOver
m_out_col - background of buttons at MouseOut and initial colors
m_down_col - background of buttons at MouseDown

m_over_col_tx - Color of text in buttons at MouseOver
m_out_col_tx - Color of text in buttons at MouseOut and initial colors
m_down_col_tx - Color of text in buttons at MouseDown
*/
//----------------------------------\\

//This and others free scripts you can find on a site: artdhtml.com

dow_key=''
window.onload=recolor_butt

function recolor_butt()
{
len_all=document.all.length
for (i=0; i<len_all; i++)
{
id=document.all[i].id
if (id.indexOf('butt')==0)
{
document.all[i].style.background=m_out_col
document.all[i].style.color=m_out_col_tx
}
}
}

function document.onmouseover()
{
id=window.event.srcElement.id
if (id.indexOf('butt')==0)
{
if(dow_key==id){return}
document.all[id].style.background=m_over_col
document.all[id].style.color=m_over_col_tx
}
}

function document.onmouseout()
{
id=window.event.srcElement.id
if (id.indexOf('butt')==0)
{
if(dow_key==id){return}
document.all[id].style.background=m_out_col
document.all[id].style.color=m_out_col_tx
}
}

function document.onmousedown()
{
id=window.event.srcElement.id
if (id.indexOf('butt')==0)
{
if(dow_key!=''){
document.all[dow_key].style.background=m_out_col
document.all[dow_key].style.color=m_out_col_tx
}
dow_key=id
document.all[id].style.background=m_down_col
document.all[id].style.color=m_down_col_tx
}
}
</script>
</body>
</html>

------------------------------------------------------------------------------------

chrismiceli

01-10-2003, 11:07 PM

there is no way that i know of to keep a button depressed, unless

setTimeOut("document.formname.buttonname.click()",1);

F.N.G.

01-11-2003, 07:46 AM

If I could somehow implement [ style="border:2px inset;" ] into the onmousedown function/variable, it would cause the button to appear pressed.

I just don't know how or where, exactly, to fit it in... :confused:

Mr J

01-11-2003, 04:07 PM

There is no way to keep a button depress ........... unless ............
You create your own.

I have adapted one of my scripts.

See what you think

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">

</script>
<style>
.butta{width:100; height:20;text-align:center;font-size:10;color:#ffffff;vertical-align:center;border-top:2px solid #eeeeee; border-left:2px solid #bbbbbb; border-right:2px solid #dddddd; border-bottom:2px solid #cccccc; background:#b0bbce}
.buttovera{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb; background:#b0bbce}
.buttdowna{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#b0bbce;border-top:2px solid #dce1e9; border-left:2px solid #dce1e9; border-right:2px solid #dce1e9; border-bottom:2px solid #dce1e9; background:#718099}
</style>

</HEAD><BODY>

<div style="position:absolute; top:100; left:20;cursor:hand">
<div id="button1" class="butta" onmouseover="on('button1','buttovera')" onMouseOut="off('button1','butta')" onmousedown="active('button1','buttdowna')">BUTTON 1</div>

<div id="button2" class="butta" onmouseover="on('button2','buttovera')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')">BUTTON 2</div>

<div id="button3" class="butta" onmouseover="on('button3','buttovera')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')">BUTTON 3</div>

<div id="button4" class="butta" onmouseover="on('button4','buttovera')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')">BUTTON 4</div>
</div>
</BODY></HTML>

F.N.G.

01-11-2003, 06:18 PM

That looks good.

Along those lines, I don't see why a regular button couldn't have its border attributes alternated, along with the background color, in the script I referred to.

For example, these buttons appear either up or down:

-------------------------------------------------------------------------
<html>
<body bgcolor="#31465c">

<input type="button" style="border:3px inset #496383; width:55px;height:55px;background-color:#31465c;color:#B5DAF0" value="01" name="bt1">

<input type="button" style="border:3px ridge #496383; width:55px;height:55px;background-color:#31465c;color:#B5DAF0" value="02" name="bt2">

</body>
</html>
----------------------------------------------------------------------------

Therefore, if the following style could be applied to the onmouseover & onmouseout sections of that script: "border:3px ridge"

... and this style applied onmousedown: "border:3px inset"

the button should appear to be clicked on and off.

I don't know how to put these styles in with the javascript, however.

Mr J

01-11-2003, 06:34 PM

Hows this?

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">

</script>
<style>
.butta{width:100; height:20;text-align:center;font-size:10;color:#ffffff;vertical-align:center;border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce}
.buttovera{width:100; height:20;text-align:center;font-size:10;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb; background:#b0bbce}
.buttdowna{width:100; height:20;text-align:center;font-size:9;vertical-align:center;color:#b0bbce;border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099}
</style>

</HEAD><BODY>

<form>
<input type="button" value="button 1" id="button1" class="butta" onmouseover="on('button1','buttovera')" onMouseOut="off('button1','butta')" onmousedown="active('button1','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button2" class="butta" onmouseover="on('button2','buttovera')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button3" class="butta" onmouseover="on('button3','buttovera')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button4" class="butta" onmouseover="on('button4','buttovera')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')" onclick="this.blur()">
</form>
</BODY></HTML>

Mr J

01-11-2003, 07:12 PM

Or this maybe?

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script language="JavaScript">

</script>
<style>
.butta{width:70;text-align:center;font-size:14;color:#000000;vertical-align:center;border-top:2px outset #eeeeee; border-left:2px outset #bbbbbb; border-right:2px outset #dddddd; border-bottom:2px outset #cccccc; background:#b0bbce}
.buttovera{width:70; text-align:center;font-size:14;vertical-align:center;color:#93a2bb;border-top:2px solid #93a2bb; border-left:2px solid #93a2bb; border-right:2px solid #93a2bb; border-bottom:2px solid #93a2bb;background:#b0bbce}
.buttdowna{width:70; text-align:center;font-size:12;vertical-align:center;color:#000000;border-top:2px inset #dce1e9; border-left:2px inset #dce1e9; border-right:2px inset #dce1e9; border-bottom:2px inset #dce1e9; background:#718099}
</style>

</HEAD><BODY>

<form>
<input type="button" value="button 1" id="button1" class="butta" onmouseover="on('button1','butta')" onMouseup="off('button1','buttovera')" onmousedown="active('button1','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button2" class="butta" onmouseover="on('button2','butta')" onMouseOut="off('button2','butta')" onmousedown="active('button2','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button3" class="butta" onmouseover="on('button3','butta')" onMouseOut="off('button3','butta')" onmousedown="active('button3','buttdowna')" onclick="this.blur()">

<input type="button" value="button 4" id="button4" class="butta" onmouseover="on('button4','butta')" onMouseOut="off('button4','butta')" onmousedown="active('button4','buttdowna')" onclick="this.blur()">
</form>
</BODY></HTML>

F.N.G.

01-11-2003, 08:09 PM

Those are both outstanding.

T H A N K S !