Solved

How do I ignore onmouseover when onclick used on td cell?

Posted on 2008-06-22
7
807 Views
Last Modified: 2010-07-27
Hi,

I'm just learning Javascript (and this DOM thing, which I guess is JScript) and try as I might, I can't figure out the following problem (and I've searched quite a bit).

I need to make my code recognize that a TD cell was clicked on, while also having the capability for the rest of the table to have onmouseover.

The onclick background color is lime.  Right now, I can't figure out how to disable the onmouseover JUST for the cell that I click on.  Any movement of my mouse cancels the onclick.

My question:  Is there a way to make the clicked cell stay lime until another cell in the table is clicked on?

My ideas have been:
1.  Use one (or several) If...else codes when determining to turn the background color off
2.  Tying into #1, I think I'd need to pass the cell's contents, when clicked, to a variable and then based on that variable, not allow that particular cell to change its background onmouseover until another cell gets clicked.

I don't know how to put this in action though.

I'm using IE7 and all the users for this page will be using it as well.  I've included the URL to the page in question if it helps.

Thanks for any help you can give!
<html><head>

<style type="text/css"> 

.regtext

{

    FONT: 16px Arial, Helvetica, sans-serif;

    COLOR: #000000

}

</style>

<script type="text/javascript">

 

function hiddenDiv() { 

document.getElementById('hideShow').style.display = 'none';

document.getElementById('hideShow2').style.display = 'none';

document.getElementById('hideShow3').style.display = 'none';

}

 

function showDiv() { 

if (document.getElementById) { // DOM3 = IE5, NS6 

document.getElementById('hideShow2').style.display = 'none';

document.getElementById('hideShow3').style.display = 'none';

document.getElementById('hideShow').style.display = 'block';

}

}

 

function showDiv2() { 

if (document.getElementById) { // DOM3 = IE5, NS6 

document.getElementById('hideShow').style.display = 'none';

document.getElementById('hideShow3').style.display = 'none';

document.getElementById('hideShow2').style.display = 'block'; 

} 

}

 

function showDiv3() { 

if (document.getElementById) { // DOM3 = IE5, NS6 

document.getElementById('hideShow').style.display = 'none';

document.getElementById('hideShow2').style.display = 'none';

document.getElementById('hideShow3').style.display = 'block'; 

} 

}

 

</script>

 

</head>

<body onload="javascript:hiddenDiv()">

<script>

function tdmouseover(el) {

el.style.color = "black"

el.style.backgroundColor = "orange"

}

 

function tdmouseout(el) {

el.style.color = "black"

el.style.backgroundColor = "white"

}

 

function tdmouseclickit(el) {

    el.style.color = "black"

    el.style.backgroundColor = "lime"

}

</script>

<br><br><br>

<table border=1 align=center width="45%" bordercolor=black cellpadding=3 width=95% cellspacing=0>

<tr height=25 class=regtext bgcolor=#ffffff>

<a href="javascript:showDiv()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Sun</td>

<a href="javascript:showDiv2()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Mon</td>

<a href="javascript:showDiv3()"><td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this)" align=center><b>Tue</td>

</tr>

</table>

<br><br><br><br><br>

<div align="center" class="regtext">

<div id="hideShow" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Sunday

</div>

<div id="hideShow2" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Monday

</div>

<div id="hideShow3" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Tuesday

</div>

</div>

</body>

</html>

Open in new window

0
Comment
Question by:Scootman78
  • 4
  • 2
7 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 21843505
Check this:
<html><head>

<style type="text/css"> 

.regtext

{

    FONT: 16px Arial, Helvetica, sans-serif;

    COLOR: #000000

}

#hideShow1 { display: none; }

#hideShow2 { display: none; }

#hideShow3 { display: none; }
 

</style>

<script >
 

var selDiv, selCell;
 

function tdmouseover(theCell) {

  if(!selDiv){

    theCell.style.backgroundColor = "orange"

  }

}

 

function tdmouseout(theCell) {

  if(!selDiv){

    theCell.style.backgroundColor = "white";

  }

}

 

function tdmouseclickit(theCell, divID) {

  if(selDiv){

    selDiv.style.display = 'none';

    selCell.style.backgroundColor = "white";

  }

  selDiv = document.getElementById(divID);

  selDiv.style.display = 'block';

  selCell = theCell;

  selCell.style.backgroundColor = "lime"

}
 

</script>

 

</head>

<body>

<br><br><br>

<table border=1 align=center width="45%" bordercolor=black cellpadding=3 width=95% cellspacing=0>

<tr height=25 class=regtext bgcolor=#ffffff>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow1')" align=center><b>Sun</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow2')" align=center><b>Mon</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow3')" align=center><b>Tue</td>

</tr>

</table>

<br><br><br><br><br>

<div align="center" class="regtext">

<div id="hideShow1" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Sunday

</div>

<div id="hideShow2" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Monday

</div>

<div id="hideShow3" style="margin-top:4px;font-weight:bold;text-decoration:underline;"> 

Tuesday

</div>

</div>

</body>

</html>

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 21843538
And here the Deselect feature:
<html>

<head>

<title>Zvonko &#42;</title>

<style type="text/css"> 

.regtext

{

    FONT: 16px Arial, Helvetica, sans-serif;

    COLOR: #000000

}

div.hideShow {

  display: none;

  margin-top:4px;

  font-weight:bold;

  text-decoration:underline;

}
 

</style>

<script >
 

var selDiv, selCell;
 

function tdmouseover(theCell) {

  if(!selDiv){

    theCell.style.backgroundColor = "orange"

  }

}

 

function tdmouseout(theCell) {

  if(!selDiv){

    theCell.style.backgroundColor = "white";

  }

}

 

function tdmouseclickit(theCell, divID) {

  if(selDiv){

    selDiv.style.display = 'none';

    selCell.style.backgroundColor = "white";

    selDiv = null;

  }

  if(selCell!=theCell){ 

    selDiv = document.getElementById(divID);

    selDiv.style.display = 'block';

    selCell = theCell;

    selCell.style.backgroundColor = "lime";

  }

}
 

</script>

 

</head>

<body>

<br><br><br>

<table border=1 align=center width="45%" bordercolor=black cellpadding=3 width=95% cellspacing=0>

<tr height=25 class=regtext bgcolor=#ffffff>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow1')" align=center><b>Sun</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow2')" align=center><b>Mon</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow3')" align=center><b>Tue</td>

</tr>

</table>

<br><br><br><br><br>

<div align="center" class="regtext">

<div id="hideShow1" class="hideShow" > 

Sunday

</div>

<div id="hideShow2" class="hideShow" > 

Monday

</div>

<div id="hideShow3" class="hideShow" > 

Tuesday

</div>

</div>

</body>

</html>

Open in new window

0
 

Author Comment

by:Scootman78
ID: 21843568
Zvonko, your first code is very very close to what I need.  The lime green background shows up on the onclick event, but the other cells no longer respond to the onmouseover event (orange background).

Your 2nd code wasn't what I was looking for though.  Sorry I forgot to mention this before, but once a cell is clicked, I don't want it to be clickable again until another cell is clicked.  In other words, if it has a lime green background, I'd like the cell to be disabled for taking any action until another cell is clicked and has a lime green background.

I don't know if any of this is possible.  I'm trying to create a calendar for a family website I'm putting together and I'm trying to reproduce results I would otherwise be able to get out of Access VBA (I wish my Javascript knowledge was just as good).
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 63

Accepted Solution

by:
Zvonko earned 300 total points
ID: 21843595
It is possible:
<html>

<head>

<title>Zvonko &#42;</title>

<style type="text/css"> 

.regtext

{

    FONT: 16px Arial, Helvetica, sans-serif;

    COLOR: #000000

}

div.hideShow {

  display: none;

  margin-top:4px;

  font-weight:bold;

  text-decoration:underline;

}
 

</style>

<script >
 

var selDiv, selCell;
 

function tdmouseover(theCell) {

  if(theCell!=selCell){

    theCell.style.backgroundColor = "orange"

  }

}

 

function tdmouseout(theCell) {

  if(theCell!=selCell){

    theCell.style.backgroundColor = "white";

  }

}

 

function tdmouseclickit(theCell, divID) {

  if(selDiv){

    selDiv.style.display = 'none';

    selCell.style.backgroundColor = "white";

  }

  selDiv = document.getElementById(divID);

  selDiv.style.display = 'block';

  selCell = theCell;

  selCell.style.backgroundColor = "lime";

}
 

</script>

 

</head>

<body>

<br><br><br>

<table border=1 align=center width="45%" bordercolor=black cellpadding=3 width=95% cellspacing=0>

<tr height=25 class=regtext bgcolor=#ffffff>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow1')" align=center><b>Sun</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow2')" align=center><b>Mon</td>

<td onmouseover="tdmouseover(this)" onmouseout="tdmouseout(this)" onclick="tdmouseclickit(this,'hideShow3')" align=center><b>Tue</td>

</tr>

</table>

<br><br><br><br><br>

<div align="center" class="regtext">

<div id="hideShow1" class="hideShow" > 

Sunday

</div>

<div id="hideShow2" class="hideShow" > 

Monday

</div>

<div id="hideShow3" class="hideShow" > 

Tuesday

</div>

</div>

</body>

</html>

Open in new window

0
 

Author Closing Comment

by:Scootman78
ID: 31469614
Awesome work!  I've been looking for weeks to try to get this to work.  Thanks very much!
0
 
LVL 15

Expert Comment

by:mr_egyptian
ID: 21843621
Too late, but here's another option.  It's pretty much a total rewrite, and I don't know what your final intentions are, but here it is in case it's useful to you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

 <head>

  <title></title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <style type="text/css">

  table{

	  		width: 45%;

			margin: auto;

  }

  

  td{

	  

  }
 

  td:hover{

	  		background-color: orange;

  }

  

  .regtext{

	  		font-family: Arial, Helvetica, sans-serif;

			font-size: 16px;

			font-weight: bold;

			text-align: center;

  }

  </style>

  <script type="text/javascript">

  <!--

   /* Array of td ids */

   var days = ['sun', 'mon', 'tue'];

   

   function toggle(el){

	   /* Highlight clicked cell */

	   el.style.backgroundColor = '#00ff00';

	   /* De-highlight other cells  */

	   for(i = 0; i < days.length; i++){

		   if(days[i] != el.id){

				   document.getElementById(days[i]).style.backgroundColor='';

		   }

	   }

	   /* Set 'hidden' div contents for correct day */

	   div = document.getElementById('hideShow');

	   switch(el.id){

	   case("sun"):

		   day = 'Sunday';

		   break;

	   case("mon"):

		   day = 'Monday';

		   break;

	   case("tue"):

		   day = 'Tuesday';

		   break;

	   }

	   div.innerHTML = day;

   }

   //-->

  </script>

 </head>

<body>

 <table border="1" cellpadding="3" cellspacing="0" class="regtext" >

  <tr>

   <td id="sun" onclick="toggle(this);">Sun</td>

   <td id="mon" onclick="toggle(this);">Mon</td>

   <td id="tue" onclick="toggle(this);">Tue</td>

  </tr>

 </table>

 <div id="hideShow" class="regtext"></div>

</body>

</html>

Open in new window

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 21843623
You are welcome :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Summernote and form validation 10 44
Create a new template 9 21
Accessing data in JSON response.d 4 30
Login area of a page 4 20
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now