Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    getElementsByTag?

    I've got my page working right now so when you mouseover certain tds in a table it will "highlight" them. I thought there was a way to use id and getElementsByTag to do this though, without putting the actual code into every td you want it to do this to. Is there a way to do this? Or did I not make sense at all?

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The javascript method (the targeted table has the id dataTable)…
    Code:
    function setTRhighlight() { // this function targets the rows and set the event and behaviour
    	var rows = document.getElementById('dataTable').getElementsByTagName('tr');
    	for (i=0; i<rows.length; i++) {
    		rows[i].onmouseover = function() { hiLight(this,'#fc3'); }
    	}
    }
    
    function hiLight(el, color) { // this function describes the higlighting behaviour
    	var rows = document.getElementById('dataTable').getElementsByTagName('tr');
    	for (i=0; i<rows.length; i++) {
    		rows[i].style.background = "transparent";
    		}
    		el.style.background = color;
    }
    
    function clearTable() { // this function clears all highlights when exiting the table
    	var myTable = document.getElementById('dataTable');
    	myTable.onmouseout = function() {
    		var rows = myTable.getElementsByTagName('tr');
    		for (i=0; i<rows.length; i++) {
    			rows[i].style.background = "transparent";
    		}
    	}
    }
    
    window.onload = function() {
    	setTRhighlight();
    	clearTable();
    }
    Or…

    The CSS method (for compliant browsers)…
    Code:
    #dataTable tr:hover {
    background: #fc3;
    }
    Daft, ain't it.
    Last edited by Bill Posters; 08-17-2005 at 08:22 AM.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm.. ok, thats what I was looking for, the only thing is it doesn't seem possible to do this with the td and not the tr. Is there a way to use the css method to do it to the td?

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    You can change instances of tr for td in either example and it should work for table cells.

    e.g.
    Code:
    var rows = myTable.getElementsByTagName('td');
    …though you might want to also change the var name from rows to something more appropriate, like cells.
    Remember to change rows to cells wherever it appears in the javascript.

    With the css, a straight swap (tr:hover >> td:hover) is all it takes.
    Last edited by Bill Posters; 08-17-2005 at 09:53 PM.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    var rows myTable.getElementsByTagName('td'); 
    I don't get what I need that for.

    to get it to highlight a row all I did was type this in the css file

    PHP Code:
    #dataTable tr:hover
    {
        
    background#EEF;

    and then whenever I wanted a tr to be highlightable made its id="dataTable" I don't get why I can't just make td id="dataTable" and change the css file from #dataTable tr:hover to #dataTable td:hover.

    Anyways I added the var rows thing to my page, but I don't see where I use that.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    As I understood it, you wanted to have all the cells within a certain table highlight when you mouseover/rollover them.
    The code examples previously posted will do that for you.


    To recap, if IE6 was any good, you would be able to reliably use the css method, but IE6 isn't much good at this sort of thing, so the css-based highlighting method won't work for any of your visitors using any version of IE/Win.
    The alternative is to use javascript to reproduce the highlighting effect.

    Code:
    function setTDhighlight() { // this function targets the cells and set the events and behaviour
    	var cells = document.getElementById('dataTable').getElementsByTagName('td');
    	for (i=0; i<cells.length; i++) {
    			cells[i].onmouseover = function() { hiLight(this,'#fc3'); }
    			cells[i].onmouseout = function() { hiLight(this,'transparent'); }
    	}
    }
    
    function hiLight(el, color) { // this function describes the higlighting behaviour
    	var cells = document.getElementById('dataTable').getElementsByTagName('td');
    	for (i=0; i<cells.length; i++) {
    		cells[i].style.background = "transparent";
    		}
    		el.style.background = color;
    }
    
    window.onload = function() {
    	setTDhighlight();
    }
    If you want to target the cells within a specific table, then use the code as it appears above and add id="dataTable" to the <table> element of the target table.

    However, if you want all cells on all tables on a page to be highlighted, then replace this…
    Code:
    var cells = document.getElementById('dataTable').getElementsByTagName('td');
    …with this…
    Code:
    var cells = document.getElementsByTagName('td');
    …in the code above. (It appears twice, once in each of the two top functions.)



    If you wish to use the css method (and IE/Win users be damned), then…
    Code:
    td:hover {
    background: #fc3;
    }
    This will highlight every cell of every table on the page.

    However, if you wish to highlight only the cells within a certain table…
    Code:
    table#dataTable td:hover {
    background: #fc3;
    }
    …remembering to add id="dataTable" to the opening <table> tag of the table you wish to target.

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    isn't there a way i can make each td I want to highlight have an id and use that instead of using the whole table? Thats what I've been trying to do.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Can you supply a link to an online version of what you currently have? It might enable me to get a better understanding of what you're hoping to achieve and help me offer up a more suitable solution.
    There are several possible ways to achieve what you're after, some of them based on the same method used in the code that I've already posted.
    Depending on whether you're targeting every cell (td) within one or more rows (tr) or only some cells with one or more rows, the solution changes.
    What is the best solution depends on where the cells are (in relation to the surrounding rows and tables) and how many there are, if they are in a row or if they are scattered randomly throughout the site, etc…

    All this is bearing in mind that it's still presumably an aim of yours to do this without actually adding anything to the markup manually.
    If you're willing and able to manually add a class attribute to each of the target cells, then things become alot simpler whether you're using the javascript method or the css method.

  • #9
    New Coder
    Join Date
    Aug 2005
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll add a class to each of the cells. I only want to do it to some cells in some tables in some rows, so I really don't see any other way. The problem is that some of the cells allready have a class. I could just add another class or whatever but thats not really what I wanted to do. Anyways my website is www.yahn.org I updated it a little bit ago but it doesn't seem to be working. Anyways I want the td's at the head below yahn.org to highlight and the links in the navigation to highlight.
    Last edited by yahn; 08-18-2005 at 08:18 PM.

  • #10
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Right, now that I've finally seen your code, it's clear that you're thinking about things in a less than ideal way.
    The table cells you mention contain only links. It is the table cells which contain those links which you said that you wished to have highlighted.

    But, …
    Instead of using javascript to highlight the table cells themselves, it is far simpler to use CSS to make the links fill the table cells and then use a little more CSS to add the highlighting effect.

    First, add a custom id to each of the menu link tables.
    e.g. add id="mainnav" to the first nav table and id="sidenav" to the other.

    Then simply add the following declarations to your external CSS file…
    Code:
    #mainnav a,
    #sidenav a {
    display: block;
    height: 100%;
    text-align: center;
    }
    
    #mainnav a:hover,
    #sidenav a:hover {
    background-color: #fc3;
    }
    You should now be able to ditch all the earlier javascript I posted.

    -

    The fact that it took so long to get to the final solution will hopefully show you that it's extremely useful for people trying to help you have access to the code you're using, preferably by viewing the problem page directly online.
    All this fuss and javascript shenanigans could have been avoided if I'd been able to see your page first-hand, so that I could see what you're actually after, rather than what you thought you were after.


    As a side note (writ' large), you're use of tables to layout the page has lead to the markup being extremely bad and far, far more complex than it really needs to be.
    I highly recommend that you start looking at using proper markup and CSS to build your sites (i.e. not using tables for layouts).
    It's presumably admirable that you appear to be looking at using web standards to some extent. (I see you're using an XHTML 1.0 Transitional DTD, though your markup shows some fundamental misunderstandings about markup that will stop the site from validating and may even stop the site from working properly in decent browsers.

    I'd also recommend against using javascript to navigate around the site - as you do in the side menu - as this means that users without javascript enabled*, including search engine bots, cannot use those links, so cannot get to all the important parts of your website.


    * Yes, there are a significant number out there without js, either by choice or by necessity. That number may be likely to rise due to the increasing popularity of (non-javascript) mobile internet devices (e.g. mobile phones, PDAs, etc…) as a means to browse the web.


    Some recommended reading:
    http://www.alistapart.com/articles/practicalcss/
    http://glish.com/css/
    http://stopdesign.com/articles/throwing_tables/
    http://www.hotdesign.com/seybold/
    http://www.stopdesign.com/present/20...eattle/tables/
    http://www.alistapart.com/articles/journey/
    http://www.oreillynet.com/pub/a/java...ss_layout.html

    There's plenty more reading out there, but these should give the outline of the whys and hows of switching from using tables to layout your page to using proper markup and CSS.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,074
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Even without links in the cells, you can still use CSS to highlight the cells or rows. Modern browsers (except IE) supports :hover and :active pseudo-classes in any element. You can fix it in IE with little scripting.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •