Solved

Table Cell as  onmouseup Anchor/ TabIndex

Posted on 2006-06-21
8
766 Views
Last Modified: 2012-06-27
I am using JavaScript to change the class of a tablecell when you roll over and off a cell. Essentially creating a button, only not and image. The problem created is that you only go to a new page  when you click on the text (if it were surrounded by an anchor tag) meaning if you click and where there is no text you don't go anywhere, but you still have the pointer cursor as if you were over the link. This will only frustrate users. I am looking to make a function triggered by the onmouseup event. It will essentially be a fake anchor tag (as far as I know you can not surround a TD tag with an A tag). I want it to be able to work like a basic anchor tag (href, target, tabindex)

I am not sure if you can apply a tab index to a TD, so I am willing to apply an anchor tag to the text if I have to for that, but I would prefer avoiding being redundant if I can get the Table Cell to do all the work.
I imagine the function resembling the following in setup.

I have one concern with the target function. Will _blank, _top, _self, _parent work the same when addressing a window or a frame?

function loadPage(href,target,tabindex){}

Here is my current code:
**********************************************************
<style type="text/css">
     .sideMenuLinkCell{
          background-color: #FFFFFF;
          color: #000000;
          cursor: default; /*return cursor to normal state onmouseout*/
     }
     .sideMenuLinkCellHover{
          background-color: #0000FF;
          color: #FFFFFF;
          cursor: pointer;
     }
</style>
<script type="text/javascript">
<!--
     function setClass(obj,name){
          obj.className = name;
     }
//-->
</script>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK1" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 1
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK2" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 2
          </td>
     </tr>
     <tr>
          <td class="sideMenuLinkCell" id="MENULINK3" onmouseover="setClass(this,'sideMenuLinkCellHover')" onmouseout="setClass(this,'sideMenuLinkCell')">
               Menu Link 3
          </td>
     </tr>
</table>
0
Comment
Question by:cipiWeb
  • 4
  • 4
8 Comments
 
LVL 7

Accepted Solution

by:
geordie007 earned 250 total points
ID: 16950464

do you know you can get the same result this way, and it will be far more accessible as a list of navigation links is essentially a list:

<style type="text/css">
       ul { margin: 0; padding: 0; list-style: none; }
       ul li { display: inline; }
       ul a:link,
       ul a:visited,
       ul a:active { color: #000; text-decoration: none; display: block; }
       ul a:hover { background-color: #00f; color: #fff; }
</style>

<ul>
      <li><a href="">Menu Link 1</a></li>
      <li><a href="">Menu Link 2</a></li>
      <li><a href="">Menu Link 3</a></li>
</ul>

and doing it this way, you can have the link take you wherever, as that is all it is - a link.

0
 

Author Comment

by:cipiWeb
ID: 16950574
Thank you for your input, though I am unclear to a few things. Why are we setting  the following? :

ul li { display: inline; }
ul a:active {display: block; }
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950611

Why are we setting  the following? :

ul li { display: inline; }
ul a:active {display: block; }

we make the li display inline to get over an irritating bug in internet explorer that adds unecessary space below each list item. so instead of:

Menu Link 1

Menu Link 2

we get:

Menu Link 1
Menu Link 2

it's a little bug fix that you should remember!

we make the link display block so that it fills out the whole dimensions of the list item. for example, if your list is set to 200px wide (because that's the width of your nav), and you didn't set the link to display as a block, the colour change would only happen when the user rolled over the text itself rather than rolling over aby of the link. using your example (table cells), the colour would only change when you rolled over the "Menu Link 1" text, instead of changing when the user rolled over any of that table cell/row. block makes it take up the whole area.

0
U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

 

Author Comment

by:cipiWeb
ID: 16950670
Definatley a good bug fix to remember!

Is there a particular reason display: block is being put in active? isn't that only rendered in the time between the click and the next page loading? People on faster machines wouldn't even see that.
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950741


no, this is a force of habit for browser compatibility. if you want to use all psedo classes of a link (link, visited, active, hover), some browsers will ignore one or more of them unless they are listed in the following order - link, visited, hover active (LVHA, or "LoVe?HA!"). the only link pseudo class i ever change is the hover, so you can take the over out of that order, but keep the remaining order correct. so it's just force of habit that i will always write links as:

a:link, a:visited, a:active {
  color:blue;
}
a:hover {
  color:yellow;
}

whether visited or active are required or not. it's better to be safe that sorry, so it's another good thing to remember! if you want to know more about why the order matters, you can read this:

http://www.meyerweb.com/eric/css/link-specificity.html

cheers
0
 

Author Comment

by:cipiWeb
ID: 16950773
I apologize, I should have worded my question more accuratley. I was wondering if the code would work the same if I decided to do the following:

ul a:link{display: block; },
ul a:visited{},
ul a:hover { background-color: #00f; color: #fff; }
ul a:active { color: #000; text-decoration: none;}

does it have to be in the active state for a particular reason?
0
 
LVL 7

Expert Comment

by:geordie007
ID: 16950796

no, not at all, so long as the pseudo classes that you *do* use follow the order stated above. this would be fine:

ul a:link {display: block; },
ul a:hover { background-color: #00f; color: #fff; }

as would this:

ul a {display: block; },
ul a:hover { background-color: #00f; color: #fff; }


0
 

Author Comment

by:cipiWeb
ID: 16950818
Thank you. so much. That will do for this subject.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 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