Solved

Table Cell as  onmouseup Anchor/ TabIndex

Posted on 2006-06-21
8
751 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
Comment Utility

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
Comment Utility
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
Comment Utility

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
 

Author Comment

by:cipiWeb
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 7

Expert Comment

by:geordie007
Comment Utility


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
Comment Utility
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
Comment Utility

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
Comment Utility
Thank you. so much. That will do for this subject.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

743 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

16 Experts available now in Live!

Get 1:1 Help Now