Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
| FAQ | Members List | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
  #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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 07:41 AM.


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