Changing the Color

[mike]

I have some elements that I want to change color when I mouse over them
and them back on mouse off.

I'd like the color to remain with "#c7d0e0" when the user clicks on
them.

<td style="cursor:h and;"
onMouseOver="th is.style.backgr ound='#c7d0e0'; "
onMouseOut="thi s.style.backgro und='#ffffff';"
onClick="chg_th e_color();">
Description
</td>

Any help is appreciated.

[Ivo]

Re: Changing the Color

"mike" wrote[color=blue]
>
> I'd like the color to remain with "#c7d0e0" when the user clicks on
> them.
>
> <td style="cursor:h and;"
> onMouseOver="th is.style.backgr ound='#c7d0e0'; "
> onMouseOut="thi s.style.backgro und='#ffffff';"
> onClick="chg_th e_color();">
> Description
> </td>[/color]

Try:
onclick="this.o nmouseout=null; "

hth
--
Ivo

[Evertjan.]

Re: Changing the Color

mike wrote on 28 feb 2005 in comp.lang.javas cript:
[color=blue]
> I have some elements that I want to change color when I mouse over them
> and them back on mouse off.
>
> I'd like the color to remain with "#c7d0e0" when the user clicks on
> them.
>
> <td style="cursor:h and;"
> onMouseOver="th is.style.backgr ound='#c7d0e0'; "
> onMouseOut="thi s.style.backgro und='#ffffff';"
> onClick="chg_th e_color();">
> Description
> </td>
>
> Any help is appreciated.
>
>[/color]

<td
style="cursor:h and;background-color:#ffffff;"
onMouseOver="
this.save='#fff fff';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>


--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

Re: Changing the Color

How do I turn that back on?

[Evertjan.]

Re: Changing the Color

mike wrote on 28 feb 2005 in comp.lang.javas cript:
[color=blue]
> How do I turn that back on?[/color]

This is NOT email, but usenet.

Quote where you are talking about.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

Re: Changing the Color

Evertjan,

Good stuff. Works great.Only thing is I have many of these like:

<tr id="row1">
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>
<tr id="row2">
<td
style="cursor:h and;background-color:#ffffff;"
onMouseOver="th is.save='#fffff f';
this.style.back groundColor='#c 7d0e0'"
onMouseOut="thi s.style.backgro undColor=this.s ave"
onClick="this.s ave='#c7d0e0'">
Description
</td>
</tr>

and when I click on "row1" then of course it keeps the background
color.
when I click on "row2" it keeps the background color as well.
I'd like to turn off "row1".

Thanks for your help, Mike

[Michael Winter]

Re: Changing the Color

mike wrote:

[snip]
[color=blue]
> <td style="cursor:h and;"[/color]

The value, hand, is invalid for the cursor property. You're looking
for 'pointer':

cursor: pointer;

Rather than setting this property via an inline style attribute, use a
sensible selector and set the value in a global style sheet.
[color=blue]
> onMouseOver="th is.style.backgr ound='#c7d0e0'; "
> onMouseOut="thi s.style.backgro und='#ffffff';"
> onClick="chg_th e_color();">
> Description
> </td>[/color]

var stickyColour = (function(stick y, normal) {
var active = null;

function setBackground(e , c) {
if(e.style) {e.style.backgr oundColor = c;}
}

return {
change : function(o) {
/* If the element, o, isn't the currently active
* element, set its background colour. This check
* isn't strictly necessary, but it does prevent
* unnecessary style changes.
*/
if(o != active) {setBackground( o, sticky);}
},
persist : function(o) {
/* If there is already an active element and that
* element isn't o, restore it's background colour.
*/
if(active && (o != active)) {
setBackground(a ctive, normal);
}
/* Save a reference to the new active element. */
active = o;
},
restore : function(o, e) {
/* If the element, o, isn't active but it is the
* target of the event, e, restore its background
* colour. This prevents bubbling events from
* triggering this code.
*/
if((o != active) && (o == (e.target || e.srcElement))) {
setBackground(o , normal);
}
}
};
})('#c7d0e0', '#ffffff');

<td onmouseover="st ickyColour.chan ge(this);"
onmouseout="sti ckyColour.resto re(this, event);"
onclick="sticky Colour.persist( this);"[color=blue]
>Description</td>[/color]

Feel free to shorten the object (stickyColour) and method identifiers.

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Evertjan.]

Re: Changing the Color

mike wrote on 01 mrt 2005 in comp.lang.javas cript:
[color=blue]
> Evertjan,
>
> Good stuff. Works great.Only thing is I have many of these like:
>
> <tr id="row1">
> style="cursor:h and;background-color:#ffffff;"
> onMouseOver="th is.save='#fffff f';
> this.style.back groundColor='#c 7d0e0'"
> onMouseOut="thi s.style.backgro undColor=this.s ave"
> onClick="this.s ave='#c7d0e0'">
> Description
> </td>
> </tr>
> <tr id="row2">
> <td
> style="cursor:h and;background-color:#ffffff;"
> onMouseOver="th is.save='#fffff f';
> this.style.back groundColor='#c 7d0e0'"
> onMouseOut="thi s.style.backgro undColor=this.s ave"
> onClick="this.s ave='#c7d0e0'">
> Description
> </td>
> </tr>
>
> and when I click on "row1" then of course it keeps the background
> color.
> when I click on "row2" it keeps the background color as well.
> I'd like to turn off "row1".[/color]

[please always quote relevant parts. this is not email, but usenet.
others want to follow the conversation and news servers are not always
obliging]
[color=blue]
> I'd like to turn off "row1".[/color]

I thought we were talking about individual cells

Try this:

<table><tr><t d
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td><td
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td></tr><tr><td
style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this)'
onMouseOut='myO ut(this)'
onClick='myClic k(this)'>
Description
</td></tr></table>

<script type='text/javascript'>
var myCellSave=fals e;
function myClick(myThis) {
if (myCellSave==my This){
myCellSave=fals e
myThis.style.ba ckgroundColor=' #ff0000'
return
}
if (myCellSave){
myCellSave.styl e.backgroundCol or='#ffffff'
}
myCellSave=myTh is
myThis.style.ba ckgroundColor=' #c7d0e0'
}
function myOver(myThis){
if (myCellSave!=my This){
myThis.style.ba ckgroundColor=' #ff0000'
}
}
function myOut(myThis){
if (myCellSave!=my This){
myThis.style.ba ckgroundColor=' #ffffff'
}
}
</script>


--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[mike]

Re: Changing the Color

That works great. I am now trying to add some other columns to that
functionality. I'd like the first column to stay highlited when I go to
the next column I tried this, but it does not isolate the column. Still
working on it. Any suggestions?

<td id="td_1">
<table>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 1
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 2
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_1 ')'
onMouseOut='myO ut(this,'td_1') '
onClick='myClic k(this,'td_1')' >
Col 1, Row 3
</td>
</tr>
</table>
</td>
<td id="td_2">
<table>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 1
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 2
</td>
</tr>
<tr>
<td style='cursor:h and;background-color:#ffffff;'
onMouseOver='my Over(this,'td_2 ')'
onMouseOut='myO ut(this,'td_2') '
onClick='myClic k(this,'td_2')' >
Col 2, Row 3
</td>
</tr>
</table>
</td>

<script language="JavaS cript">
var myCellSave=fals e;
var myColSave=false ;
function myClick(myThis, myCol)
{
alert( "cellsave: " + myCellSave + " " +myThis+" colsave:"+
myColSave+" "+myCol);
if (myCellSave==my This && myColSave==myCo l)
{
myCellSave=fals e;
myColSave=false ;
myThis.style.ba ckgroundColor=' #c7d0e0';
return;
}
if (myCellSave && myColSave)
{
myCellSave.styl e.backgroundCol or='#ffffff';
}
myCellSave=myTh is;
myColSave=myCol ;
myThis.style.ba ckgroundColor=' #c7d0e0';
}
function myOver(myThis,m yCol)
{
if (myCellSave!=my This && myColSave!=myCo l)
{
myThis.style.ba ckgroundColor=' #c7d0e0';
}
}
function myOut(myThis,my Col)
{
if (myCellSave!=my This && myColSave!=myCo l)
{
myThis.style.ba ckgroundColor=' #ffffff';
}
}
</script>

[Evertjan.]

Re: Changing the Color

mike wrote on 01 mrt 2005 in comp.lang.javas cript:
[color=blue]
> That works great. I am now trying to add some other columns to that
> functionality. I'd like the first column to stay highlited when I go to
> the next column I tried this, but it does not isolate the column. Still
> working on it. Any suggestions?
>[/color]

I leave you to it. The principles being layed out, it must be possible to
programme your own requirements.

You could give the first column cells a seperate className?

Do not make those long sequences but start programming in modules you can
test independently.

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

[Tomasz Cenian]

Re: Changing the Color

mike napisał(a):[color=blue]
> That works great.
> <tr>
> <td style='cursor:h and;background-color:#ffffff;'
> onMouseOver='my Over(this,'td_1 ')'
> onMouseOut='myO ut(this,'td_1') '
> onClick='myClic k(this,'td_1')' >
> Col 1, Row 1
> </td>
> </tr>[/color]

How many times are you going to repeat above quoted?
If you have, say, hundreds of cells this will produce lots of
unnecessary kilobytes and make the code hardly readable.
Classes are meant for something and especially useful here.

<style>
..cell {
cursor: pointer; /*cursor:hand is obsolete and IE only */
background:whit e;
}
</style>

and some tidier coder:


<table id="tbl">
<tr>
<td id="td_1">
<table>
<tr>
<td class="cell td_1">
Col 1, Row 1
</td>
</tr>
<tr>
<td class="cell td_1">
Col 1, Row 2
</td>
</tr>
<tr>
<td class="cell td_1">
Col 1, Row 3
</td>
</tr>
</table>
</td>
<td id="td_2">
<table>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
<tr>
<td class="cell td_2">
Col 2, Row 1
</td>
</tr>
</table>
</td>
<script>
table=document. getElementById( "tbl");
mc=table.getEle mentsByTagName( "td");
cur="";
for (i=0;i<mc.lengt h;i++)
if (mc[i].className.matc h("cell")) {
mc[i].onmouseover=fu nction(){mover( this)};
mc[i].onmouseout=fun ction(){mout(th is)};
mc[i].onclick=functi on(){mclick(thi s)};
}
function mover(c){
if (c.className!=c ur.className) c.style.backgro undColor="blue"
}
function mout(c){
if (c.className!=c ur.className) c.style.backgro undColor="white "
}
function mclick(c){
if(cur)cur.styl e.backgroundCol or="white";
c.style.backgro undColor="blue" ; cur=c;
}
</script>

--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::

[Dr John Stockton]

Re: Changing the Color

JRS: In article <Xns960BEC13174 C6eejj99@194.10 9.133.29>, dated Mon, 28
Feb 2005 22:12:24, seen in news:comp.lang. javascript, Evertjan.
<exjxw.hannivoo rt@interxnl.net > posted :[color=blue]
>mike wrote on 28 feb 2005 in comp.lang.javas cript:
>[color=green]
>> How do I turn that back on?[/color]
>
>This is NOT email, but usenet.
>
>Quote where you are talking about.[/color]

Proper quoting should also be used in E-mail.

IMHO, there's no point at all in telling Google users what to do unless
you also tell them how to do it. See below.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

[RobG]

Re: Changing the Color

Tomasz Cenian wrote:
[...][color=blue]
> How many times are you going to repeat above quoted?
> If you have, say, hundreds of cells this will produce lots of
> unnecessary kilobytes and make the code hardly readable.
> Classes are meant for something and especially useful here.[/color]

Good intentions.
[color=blue]
>
> <style>[/color]

<style type="text/css">

The type attribute is required.
[color=blue]
> .cell {
> cursor: pointer; /*cursor:hand is obsolete and IE only */
> background:whit e;
> }
> </style>
>
> and some tidier coder:[/color]
[...][color=blue]
> </tr>
> </table>
> </td>[/color]

But you forgot to close your last row & table.
[color=blue]
> <script>[/color]

<script type="text/javascript:>

The type attribute is required.
[color=blue]
> table=document. getElementById( "tbl");
> mc=table.getEle mentsByTagName( "td");
> cur="";[/color]

Why is everything a global? I understand your use of cur, but
everything else can be local. Why not put all this inside a
function called say 'initTable' and call it with the onload, or
in a script just after the table?

Some testing of gEBI should be done and an alternative provided
for older browsers if that is thought necessary.
[color=blue]
> for (i=0;i<mc.lengt h;i++)
> if (mc[i].className.matc h("cell")) {
> mc[i].onmouseover=fu nction(){mover( this)};
> mc[i].onmouseout=fun ction(){mout(th is)};
> mc[i].onclick=functi on(){mclick(thi s)};[/color]

These can be attached as:

mc[i].onmouseover = mover;
...

Isn't that tidier?
[color=blue]
> }
> function mover(c){
> if (c.className!=c ur.className) c.style.backgro undColor="blue"
> }[/color]

And the functions can be tidier as:

function mover(){
if (this.className != cur.className){
this.style.back groundColor = 'blue';
}
}

etc.

Here is the full script (tested in IE and Firefox):

<script type="text/javascript">

function mover(){
if (this.className != cur.className){
this.style.back groundColor = 'blue';
}
}

function mout(){
if (this.className != cur.className){
this.style.back groundColor = 'white';
}
}

function mclick(){
if(cur){
cur.style.backg roundColor = 'white';
c.style.backgro undColor = 'blue';
cur = c;
}
}

function initTable(tID) {

// No support if gEBI or gEBTN not supported
if (document.getEl ementById && document.getEle mentsByTagName) {
var t = document.getEle mentById(tID);
var c = t.getElementsBy TagName('td');
} else {
return;
}

cur=''; // global

for (var i=0, cLen=c.length; i<cLen; i++){
if (c[i].className.matc h('cell')) {
c[i].onmouseover = mover;
c[i].onmouseout = mout;
c[i].onclick = mclick;
}
}
}

initTable('tbl' ); // or call from body onload

</script>



--
Rob

[Tomasz Cenian]

Re: Changing the Color

RobG napisał(a):[color=blue]
>
> <style type="text/css">
>
> The type attribute is required.[/color]

I know that. The HTML part of what I posted was merely an outline, the
purpose of my post was to show js code working so I didn't really bother
with all the necessary atrributes.
[color=blue]
>[color=green]
>> </tr>
>> </table>
>> </td>[/color]
>
> But you forgot to close your last row & table.
> [...]
> <script type="text/javascript:>
>
> The type attribute is required.[/color]

Then again. I simply sketched it quickly and didn't really care. Valid
HTML was obviously not my goal here.

[color=blue]
>[color=green]
>> table=document. getElementById( "tbl");
>> mc=table.getEle mentsByTagName( "td");
>> cur="";[/color]
>
>
> Why is everything a global? I understand your use of cur, but
> everything else can be local. Why not put all this inside a
> function called say 'initTable' and call it with the onload, or
> in a script just after the table?[/color]

It's a matter of choice I believe.
[color=blue][color=green]
>> for (i=0;i<mc.lengt h;i++)
>> if (mc[i].className.matc h("cell")) {
>> mc[i].onmouseover=fu nction(){mover( this)};
>> mc[i].onmouseout=fun ction(){mout(th is)};
>> mc[i].onclick=functi on(){mclick(thi s)};[/color]
>
>
> These can be attached as:
>
> mc[i].onmouseover = mover;
> ...[/color]
[color=blue]
> Isn't that tidier?[/color]


Sure it is. *Good* point. Don;t know why I used this method to pass "this"



--
tomasz cenian tcenian at wa dot home dot pl
:::: :: : : http://cenian.boo.pl : : :: ::::