Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old February 20th, 2006, 01:26 PM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default table retains borderTop and borderLeft properties

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
__________________
_______________________
Ayrshire Minis - a Mini E-Community
http://www.ayrshireminis.com
http://www.crmpicco.co.uk
  #2 (permalink)  
Old February 21st, 2006, 02:13 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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
  #3 (permalink)  
Old February 21st, 2006, 05:24 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
  #4 (permalink)  
Old February 21st, 2006, 05:40 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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
  #5 (permalink)  
Old February 21st, 2006, 05:57 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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="&nbsp;";
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;&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="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">&nbsp;
              </td>
            </tr>
            <tr>
              <td align="center" onmouseover="message_help('message')" onmouseout="message_out()">
                  MouseoverEvent
              </td>
            </tr>
          </table>



Cheers :)

vinod
  #6 (permalink)  
Old February 21st, 2006, 09:03 AM
Friend of Wrox
Points: 8,019, Level: 38
Points: 8,019, Level: 38 Points: 8,019, Level: 38 Points: 8,019, Level: 38
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jan 2005
Location: Mauchline, East Ayrshire, Scotland
Posts: 1,525
Thanks: 0
Thanked 0 Times in 0 Posts
Send a message via ICQ to crmpicco Send a message via AIM to crmpicco Send a message via MSN to crmpicco Send a message via Yahoo to crmpicco
Default

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

www.crmpicco.co.uk
  #7 (permalink)  
Old February 22nd, 2006, 06:21 AM
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Modify field properties in linked table RickD Access 1 September 8th, 2006 06:58 AM
properties aadz5 C# 3 December 29th, 2003 11:38 AM
size of table (type table is table of number) MikoMax Oracle 1 November 19th, 2003 03:11 AM
Properties robert_83 .NET Web Services 0 July 30th, 2003 07:27 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.