table retains borderTop and borderLeft properties

crmpicco · February 20th, 2006, 01:26 PM

This is my JavaScript function called message_help:

Code:

function message_help(message)
{
    var helpTd = document.getElementById("helpTd");
    if(message!="")
    {        
        helpTd.className = "font4";
        helpTd.style.backgroundColor = "<%=minirules%>";
        helpTd.style.borderColor = "#000000";
        //helpTd.style.borderLeft = "#000000";
        //helpTd.style.borderTop="#000000";
        helpTd.innerHTML=message;
    }
    else
    {
        helpTd.innerHTML =     "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        helpTd.style.borderColor="<%=lightMain%>";
        //helpTd.style.borderLeft="<%=lightMain%>";
        //helpTd.style.borderTop="<%=lightMain%>";
        helpTd.style.backgroundColor="<%=lightMain%>";
    }
}

This is my HTML table display code:

Code:

<table width="100%" align="center" bgcolor="<%=lightMain%>" id="submit_table" border="1" bordercolor="<%=lightMain%>">
            <tr id="helpTr">
              <td colspan="2" id="helpTd">&nbsp;
              </td>
            </tr>
            <tr>
              <td align="center">
                  <input type="button" name="help" value="Submit" onClick="chkFrm();" class="font2" onMouseOver="style.cursor='pointer';" />
              </td>
            </tr>
          </table>

My problem is that when i load the page for the first time it is fine. There is a border but it is the same colour as the rest of the table.
Now, when i mouseover an image it passes a 'message' to message help and that fills the td cell.
But, i want the cell to have a BLACK border onmouseover and onmouseOUT it should go back to '<%=lightMain%>'. However, it doesnt and keeps the border as black on the top and the left???

This seems strange?? Any ideas?

Picco

www.crmpicco.co.uk

vinod_yadav1919 · February 21st, 2006, 02:13 AM

Hii Crmpicco!!

Have you tried
helpTd.style.borderColor = "black"
helpTd.style.borderColorLight = "black"
helpTd.style.borderColorDark = "black"

on mouse out set the default color of table id

hope this will help you

Cheers :)

vinod

crmpicco · February 21st, 2006, 05:24 AM

Code:

function message_help(message)
{
    var helpTd = document.getElementById("helpTd");
    var submit_table = document.getElementById("submit_table");
    if(message!="")
    {        
        helpTd.className = "font4";
        helpTd.style.backgroundColor = "<%=minirules%>";
        //helpTd.style.borderColor = "#000000";
        //helpTd.style.borderLeft = "#000000";
        //helpTd.style.borderTop="#000000";
        helpTd.style.borderColor = "black";
        helpTd.style.borderColorLight = "black";
        helpTd.style.borderColorDark = "black";    
        helpTd.innerHTML=message;
    }
    else
    {
        helpTd.innerHTML =     "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                            "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        //helpTd.style.borderColor="<%=lightMain%>";
        //helpTd.style.borderLeft="<%=lightMain%>";
        //helpTd.style.borderTop="<%=lightMain%>";
        helpTd.style.borderColor = "<%=lightMain%>";
        helpTd.style.borderColorLight = "<%=lightMain%>";
        helpTd.style.borderColorDark = "<%=lightMain%>";    
        submit_table.style.backgroundColor="<%=lightMain%>";
        helpTd.style.backgroundColor="<%=lightMain%>";
        helpTd.className = "";
    }
}

this still doesnt work?

www.crmpicco.co.uk

crmpicco · February 21st, 2006, 05:40 AM

This works though..... :-)

Code:

function message_help(message)
{
    var helpTd = document.getElementById("helpTd");
    var submit_table = document.getElementById("submit_table");
    if(message!="")
    {        
        helpTd.className = "font4";
        helpTd.style.backgroundColor = "<%=minirules%>";
        if(helpTd.style.border=="white 0px")
        {
            helpTd.style.border="1px solid black";
        }
        helpTd.style.borderColor = "black";
        helpTd.innerHTML=message;
    }
    else
    {
        helpTd.innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                           "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                           "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
                           "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
        helpTd.style.border="0px";
        helpTd.style.borderColor = "white";
        helpTd.style.backgroundColor="<%=lightMain%>";
    }
}

the complete function

www.crmpicco.co.uk

vinod_yadav1919 · February 21st, 2006, 05:57 AM

Hii Crmpicco!!
Please try this as by saving as html file :) .it's working fine.
Move the cursor on MouseoverEvent <td> tag

Hope this will help you
<script>
function message_out()
{
    var tableId = document.getElementById("submit_table");

       tableId.style.borderColor = "pink"
           var helpTd = document.getElementById("helpTd");
               helpTd.style.borderColor = "pink"
       helpTd.style.borderColorLight = "pink"
        helpTd.style.borderColorDark = "pink"
        helpTd.style.borderWidth = "0px"
        helpTd.innerHTML=" ";
helpTd.style.backgroundColor = "pink";
}
function message_help(message)
{
    var helpTd = document.getElementById("helpTd");
    if(message!="")
    {
        helpTd.className = "font4";
        helpTd.style.backgroundColor = "white";
         helpTd.style.borderColor = "black"
        helpTd.style.borderColorDark = "black"
        helpTd.style.borderWidth = "3px"
        helpTd.innerHTML=message;
    }
    else
    {
        helpTd.innerHTML = "     "+
                            "        & nbsp;"+
                            "        & nbsp;   "+
                            "        & nbsp;   ";
        helpTd.style.borderColor="red";
        helpTd.style.backgroundColor="black";
    }
}
</script>

<table width="100%" align="center" bgcolor="pink" cellspacing=1 id="submit_table" border="1"

bordercolor="pink">
            <tr id="helpTr">
              <td colspan="2" id="helpTd"> 
              </td>
            </tr>
            <tr>
              <td align="center" onmouseover="message_help('message')" onmouseout="message_out()">
                  MouseoverEvent
              </td>
            </tr>
          </table>

Cheers :)

vinod

crmpicco · February 21st, 2006, 09:03 AM

thanks for that vinod, but if you check the function above - it works OK. not sure what it was though??

www.crmpicco.co.uk

vinod_yadav1919 · February 22nd, 2006, 06:21 AM

Hii Crmpicco!!

The cell border color takes precedence over the table border color.
on mouseout function
var tableId = document.getElementById("submit_table");
      tableId.style.borderColor = "pink"
   var helpTd = document.getElementById("helpTd");
   helpTd.style.borderWidth = "0px"

Plz find more details on :-
http://msdn.microsoft.com/library/de...pertypages.asp

http://www.webbasedprogramming.com/H...L-3.2/ch15.htm
http://sunsite.iisc.ernet.in/virlib/html/howto/ch15.htm
http://www.hitmill.com/html/tables/two_c.html

Hope this will help you

Cheers :)

vinod