SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Is there another way in JS?

    Hello to All!
    I have three questions: (code attached: murat_test_1.txt)
    1.) The test code is something I have been working on. In order to create the highlighted scroll bar, I had to create it into a table element. For the highlighted scroll bar to appear on each line, is making each line a <tr> the only solution in javascript?
    2.) The next issue is when I scroll down to the bottom and change keycode directions (case 38 / case 40 ) the page does not make a smooth transition to the next line (top or below) without making a weird jump. What I have been trying to figure out is how to create a smooth direction transition.
    3.) In addition, when the last line is highlighted before it goes to the next line...the only one line appears at a time. I want more lines to appear ahead of the highlighted line. Does this make sense? I have tried changing the direction code, but didn't exactly solve the issue,yet. Sorry for all of the information. I hope this helps. Thanks in advance for your help.
    Attached Files Attached Files

  2. #2
    SitePoint Guru Ruben K.'s Avatar
    Join Date
    Jun 2005
    Location
    Alkmaar, The Netherlands
    Posts
    693
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Posting to remind myself to look after attachment cleared

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The code doesn't appear to do anything, but when I click on a line, Firefox gives me an error of "this.removeSelections is not a function"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the attached txt file has fixed that issue. Thanks for your help.
    Attached Files Attached Files

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    There is now no error, but still there is no highlight in Firefox
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about that. I do not use Firefox. What can I do to have it shown in Firefox? Thanks

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I'm having a hard time understanding the code, so if I was to help further it would be in rewriting it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe that is why i am receiving trouble, due to the way it is coded. I thought I the only way to get a highlighted bar to scroll up and down is to create an element. Therefore, it is coded to each line is <tr> with an idea. Maybe this is not the most useful way to code to receive the highlighted option. Am I on the right track with creating an element to create this function? Thanks

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is some excellent code to hilight tables, from a presentation by Joe Marini.

    It shouldn't be that hard to include keyboard navigation to this as well.

    Code javascript:
    var currentTR = null; // if the user clicks on a row, we store it aside so we can unhilite it later.
     
    function createAutoHiliteTableRows(idArray)
    {
    	// check for DOM-capable browser. If this method isn't available, don't do anything.
    	if (document.getElementById != null)
    	{
    		for (var indx = 0; indx < idArray.length; indx++) {
    			var id = idArray[indx];
     
    			// get each table that has the ID that we were given
    			var oTable=document.getElementById(id);
    			if (oTable != null)
    			{
    				// get all the TR tags in the table.
    				var aTRs=oTable.getElementsByTagName('tr');
    				for(var j=0;j<aTRs.length;j++)
    				{
    					// only highlight those TRs that are children of the TBODY.
    					// remove this "if" statement if you want to highlight ALL rows.
    					if(aTRs[j].parentNode.nodeName=='TBODY')
    					{
    						// add event handlers for each TR to handle mouseover, mouseout,
    						// and mousedown events. For each event, set the inline style
    						// of the tag to whatever you want to happen when that event occurs.
    						// Using inline styles instead of classes makes it easy to combine
    						// this code with other functions, like the table striping example,
    						// since when the inline style is removed, the class applied by
    						// the striping code won't be affected.
    						aTRs[j].onmouseover=function() {
    							if (currentTR == this) return false;
    							this.style.backgroundColor="#FFCC00";
    							this.style.fontWeight="bold";
    							return false;}
    						aTRs[j].onmouseout=function(){
    							if (currentTR == this) return false;
    							this.style.backgroundColor="";
    							this.style.fontWeight="";
    							return false;}
    						aTRs[j].onmousedown=function(){
    							// if there is already another row that the user clicked on,
    							// remove its style before highlighting the one that was clicked.
    							if (currentTR != null) {
    								currentTR.style.backgroundColor="";
    								currentTR.style.fontWeight="";
    								// if the row the user clicked on was already highlighted, then
    								// just remove the styling and return.
    								if (currentTR == this) {
    									currentTR = null;
    									return false;
    								}
    							}
    							currentTR = this; // remember which row was clicked
    							// highlight the row
    							this.style.backgroundColor="#a5cdf0";
    							this.style.fontWeight="bold";
    							return false;}
    					}
    				}
    			}
    		}
    	}
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Feb 2008
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. That was very helpful. Thanks again.


Bookmarks

Posting Permissions

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