How do they do it in Hotmail ? 4

Deadline · Aug 2, 2001

Hello.. How are you?

If you have noticed the new Hotmail screen, they have a pretty cool feature.

It is in their mailbox view. When you check the checkbox adjacent to a message, the entire row changes color. and when you uncheck it, it goes back to the original color.

How could it be done ? I need to incorporate the same technique in my project also. Can you help ?

I have a fair idea that it may be done with <TBODY> and bodies/rows collection(s).

But how ?

Thank you...
RR

TheInsider · Aug 2, 2001

Hi,
This may or may not be what you are looking for:

Code:

<HTML>
<HEAD>
<META NAME=&quot;GENERATOR&quot; Content=&quot;Microsoft Visual Studio 6.0&quot;>
<TITLE></TITLE>
<script language=javascript>
	function test()
	{
		if (document.all.check1.checked == true) 
		{
			document.getElementById(&quot;idABC&quot;).style.backgroundColor=&quot;blue&quot;
		}
		else
		{
			document.getElementById(&quot;idABC&quot;).style.backgroundColor=&quot;white&quot;
		}
	}
</script>
</HEAD>
<BODY>

<P>
<TABLE cellSpacing=1 cellPadding=1 width=&quot;75%&quot; border=1>
  
  <TR>
    <TD id=&quot;idABC&quot;><input type=&quot;checkbox&quot; name=&quot;check1&quot; onclick=&quot;test()&quot;> </TD>
    <TD> </TD></TR>
  <TR>
    <TD> </TD>
    <TD> </TD></TR>
  <TR>
    <TD> </TD>
    <TD> </TD></TR></TABLE></P>

</BODY>
</HTML>

Rob Marriott
rob@career-connections.net

Deadline · Aug 2, 2001

Hi Rob,
Thank you very much..
But I have a check box adjacent to all rows. And all of them have the same ID.

In this situation, how to go about ?
Thank you...
RR

TheInsider · Aug 2, 2001

Hi,
I'm not sure how to do this if the rows all have the same ID. I'm still pretty new to javascript... but I know that the <tr> and <td> tags only have an ID property, no Name, and if you give them all the same ID value, I'm not sure how you would be able to tell them apart. I suppose that you could use the collection, as you suggested, but it would be easiest to referrence them by ID.
Rob Marriott
rob@career-connections.net

baad · Aug 3, 2001

DesperateCoder, i havent a look on hotmail, but i think it might be nested table:
<td> <--- here u change background
<table>
... <------- here is all ur content u want 2 change bg..
</table>
</td>

just an idea regards, vic

Deadline · Aug 3, 2001

Thanks Vic, Thanks CCTC1.

"But I have a check box adjacent to all rows. And all of them have the same ID. "

CCTC1 > By them I meant the checkboxes, not the rows.

And Vic, if you can explain a bit more....

Thank you...
RR

baad · Aug 3, 2001

i ment smth like this:
<HTML>
<HEAD>
<TITLE></TITLE>
<script language=javascript>
function test() {
var flag=false
var o=document.forms.myne.elements
for (var ii=0; ii<o.length; ii++){
if (o[ii].name=='check1' && o[ii].checked==true)
flag=true
}
if (flag) { document.getElementById("idABC&quot

.style.backgroundColor="blue" }
else { document.getElementById("idABC&quot

.style.backgroundColor="white" }
}
</script>
</HEAD>
<BODY>
<form name=myne>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border="0">
<TR>
<TD id="idABC">
<table>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
<tr><td><input type="checkbox" name="check1" onclick="test()"></td></tr>
</table>
</TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD></TR></TABLE>
</form>

</BODY>
</HTML>

is it similar with what u need? regards, vic

mithrilhall · Aug 3, 2001

I'm not sure how to do what you want with out an idividual id for each checkbox.

<script language=javascript>
function test()
{
var flag=false
var o=document.forms.myne.elements

for (var ii=0; ii<o.length; ii++)
{
//It seems that everytime one box is checked
//the ones after the checked one think they
//are checked.
//Possibly add "flag = false;" inside the loop
flag = false;
if (o[ii].name=='check1' && o[ii].checked==true)
flag = true;
}

if (flag)
{
document.getElementById("idABC&quot

.style.backgroundColor="blue"
}
else
{
document.getElementById("idABC&quot

.style.backgroundColor="white"
}
}
</script>

mithrilhall · Aug 3, 2001

Well, I got it to color the row if the checkbox is checked. You need to add code to make the color change back if it is unchecked. Also, I was trying to make it so you could just click anywhere in the row and the color changes and the checkbox gets checked but I am still working on that part. Here is what I have so far.

<HTML>
<HEAD>
<TITLE></TITLE>
<script language=javascript>
function test(IDName)
{
var flag = false;
var o = document.forms.myne.elements;
var myArray = new Array(7);

for (var ii=0; ii<o.length; ii++)
{
flag = false;
if (o[ii].name=='check1' && o[ii].checked==true)
{
flag = true;
myArray[ii] = "checked";
//alert(flag);
}
else
myArray[ii] = "unchecked";

//alert(flag);
}
for (ii = 0;ii < o.length;ii++)
{
if (myArray[ii] = "checked&quot

{
document.getElementById(IDName).style.backgroundColor = "blue";
}
}
}
</script>
</HEAD>
<BODY>
<form name=myne>
<TABLE cellSpacing=1 cellPadding=1 width="75%" border="0">
<TR>
<TD id="idABC">
<table border="1">
<tr><td width="180px" id=0><input type="checkbox" name="check1" onClick="test(0)">Blah blah blah</td></tr>
<tr><td width="180px" id=1><input type="checkbox" name="check1" onclick="test(1)"></td></tr>
<tr><td width="180px" id=2><input type="checkbox" name="check1" onclick="test(2)"></td></tr>
<tr><td width="180px" id=3><input type="checkbox" name="check1" onclick="test(3)"></td></tr>
<tr><td width="180px" id=4><input type="checkbox" name="check1" onclick="test(4)"></td></tr>
<tr><td width="180px" id=5><input type="checkbox" name="check1" onclick="test(5)"></td></tr>
<tr><td width="180px" id=6><input type="checkbox" name="check1" onclick="test(6)"></td></tr>
</table>
</TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD></TR>
<TR>
<TD> </TD>
<TD> </TD></TR></TABLE>
</form>

</BODY>
</HTML>

glancep · Aug 3, 2001

I'm not trying to be rude or anything, but did you consider checking the source on Hotmail? I bet it would be there

Gideon

Deadline · Aug 3, 2001

I tried Gideon...

But they use a function called CCA(this) for onclick of the check box. And there ain't any definition of that function in that page..

So how ? Thank you...
RR

glancep · Aug 3, 2001

I just looked myself... the CCA function is in an external .js file. Here it is:

function CCA(CB){
if (CB.checked)
hL(CB);
else
dL(CB);
var TB=TO=0;
for (var i=0;i<frm.elements.length;i++)
{
var e = frm.elements;
if ((e.name != 'allbox') && (e.type=='checkbox'))
{
TB++;
if (e.checked)
TO++;
}
}
if (TO==TB)
frm.allbox.checked=true;
else
frm.allbox.checked=false;
}

... and it uses the functions hL and dL (hilight and dehilight?). Anyways... here they are:

function hL(E){
if (ie)
{
while (E.tagName!="TR&quot
{E=E.parentElement;}
}
else
{
while (E.tagName!="TR&quot
{E=E.parentNode;}
}
E.className = "H";
}
function dL(E){
if (ie)
{
while (E.tagName!="TR&quot
{E=E.parentElement;}
}
else
{
while (E.tagName!="TR&quot
{E=E.parentNode;}
}
E.className = "";
}

... that should be all you need. The .js file has a lot more stuff, though. If you want the file, you can get it from:

http://lw11fd.law11.hotmail.msn.com/cgi-bin/dasp/EN/hotmail___6.js
(you may have to be logged in first?)

Gideon

Deadline · Aug 14, 2001

Gideon,
Did you try experimenting with that piece of code ? Were you successful ? Thank you...
RR

Deadline · Aug 14, 2001

I made it...

Please read faq216-997

For all your help and assistance.. Thank you...
RR

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do they do it in Hotmail ? 4

Deadline

Programmer

TheInsider

Programmer

Deadline

Programmer

TheInsider

Programmer

baad

Programmer

Deadline

Programmer

baad

Programmer

mithrilhall

Programmer

mithrilhall

Programmer

glancep

Programmer

Deadline

Programmer

glancep

Programmer

Deadline

Programmer

Deadline

Programmer

Similar threads

Part and Inventory Search

Sponsor