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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with onmouseover SetPointer function

    Hello all,

    I have a script, which uses the below mentioned function, which should change the color of the row when onmouseover. However this script is only working in IE and Opera, but not in Firefox. Could anyone please help to modify this code so that it would work also in Mozilla Firefox.

    The javascript function:
    Code:
    var marked_row=new Array;function setPointer(theRow,theRowNum,theAction,theDefaultColor,thePointerColor,theMarkColor){var theCells=null;if((thePointerColor==''&&theMarkColor=='')||typeof(theRow.style)=='undefined'){return false;}if(typeof(document.getElementsByTagName)!='undefined'){theCells=theRow.getElementsByTagName('td');}else if(typeof(theRow.cells)!='undefined'){theCells=theRow.cells;}else{return false;}var rowCellsCnt=theCells.length;var domDetect=null;var currentColor=null;var newColor=null;if(typeof(window.opera)=='undefined'&&typeof(theCells[0].getAttribute)!='undefined'){currentColor=theCells[0].getAttribute('bgcolor');domDetect=true;}else{currentColor=theCells[0].style.backgroundColor;domDetect=false;}if(currentColor==''||currentColor.toLowerCase()==theDefaultColor.toLowerCase()){if(theAction=='over'&&thePointerColor!=''){newColor=thePointerColor;}else if(theAction=='click'&&theMarkColor!=''){newColor=theMarkColor;marked_row[theRowNum]=true;}}else if(currentColor.toLowerCase()==thePointerColor.toLowerCase()&&(typeof(marked_row[theRowNum])=='undefined'||!marked_row[theRowNum])){if(theAction=='out'){newColor=theDefaultColor;}else if(theAction=='click'&&theMarkColor!=''){newColor=theMarkColor;marked_row[theRowNum]=true;}}else if(currentColor.toLowerCase()==theMarkColor.toLowerCase()){if(theAction=='click'){newColor=(thePointerColor!='')?thePointerColor:theDefaultColor;marked_row[theRowNum]=(typeof(marked_row[theRowNum])=='undefined'||!marked_row[theRowNum])?true:null;}}if(newColor){var c=null;if(domDetect){for(c=0;c<rowCellsCnt;c++){theCells[c].setAttribute('bgcolor',newColor,0);}}else{for(c=0;c<rowCellsCnt;c++){theCells[c].style.backgroundColor=newColor;}}}return true;}
    and this is how its used in html:
    <tr bgcolor=<?=$bgcolor?> onmouseover="setPointer(this, <?=$idx?>, 'over', '<?=$bgcolor?>', '#E7E8E7', '#CEA5B2')" onmouseout="setPointer(this, <?=$idx?>, 'out', '<?=$bgcolor?>', '#E7E8E7', '#CEA5B2')" >

    Thank you in advance for your help.

    Martin

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Can you make the code readable? It is one long line in that textbox.

    Also it is better to post what rendered output looks like rather than the serverside code.

    Also with Firefox, install the Firbug extension. [http://www.getFirebug.com]

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry about the nonreadability. Here is the code again:
    Code:
    var marked_row=new Array;
    
    function setPointer(theRow,theRowNum,theAction,theDefaultColor,thePointerColor,theMarkColor)
    {
    var theCells=null;
    if((thePointerColor==''&&theMarkColor=='')||typeof(theRow.style)=='undefined')
    {
    return false;
    }
    if(typeof(document.getElementsByTagName)!='undefined')
    {
    theCells=theRow.getElementsByTagName('td');
    }
    else if(typeof(theRow.cells)!='undefined')
    {
    theCells=theRow.cells;
    }
    else
    {
    return false;
    }
    var rowCellsCnt=theCells.length;
    var domDetect=null;
    var currentColor=null;
    var newColor=null;
    
    if(typeof(window.opera)=='undefined'&&typeof(theCells[0].getAttribute)!='undefined')
    {
    currentColor=theCells[0].getAttribute('bgcolor');domDetect=true;
    }
    else
    {
    currentColor=theCells[0].style.backgroundColor;domDetect=false;
    }
    if(currentColor==''||currentColor.toLowerCase()==theDefaultColor.toLowerCase())
    {
    	if(theAction=='over'&&thePointerColor!='')
    {
    newColor=thePointerColor;
    }
    	else if(theAction=='click'&&theMarkColor!='')
    {
    newColor=theMarkColor;marked_row[theRowNum]=true;
    }
    }
    else if(currentColor.toLowerCase()==thePointerColor.toLowerCase()&&(typeof(marked_row[theRowNum])=='undefined'||!marked_row[theRowNum]))
    {
    	if(theAction=='out')
    {
    newColor=theDefaultColor;
    }
    	else if(theAction=='click'&&theMarkColor!='')
    {
    newColor=theMarkColor;marked_row[theRowNum]=true;
    }
    }
    else if(currentColor.toLowerCase()==theMarkColor.toLowerCase())
    {
    	if(theAction=='click')
    {
    newColor=(thePointerColor!='')?thePointerColor:theDefaultColor;marked_row[theRowNum]=(typeof(marked_row[theRowNum])=='undefined'||!marked_row[theRowNum])?true:null;
    }
    }
    if(newColor)
    {
    var c=null;
    	if(domDetect)
    {
    	for(c=0;c<rowCellsCnt;c++)
    {
    theCells[c].setAttribute('bgcolor',newColor,0);
    }
    }
    else
    {
    for(c=0;c<rowCellsCnt;c++)
    {
    theCells[c].style.backgroundColor=newColor;
    }
    }
    }
    return true;
    }
    and here is the rendered output:

    Code:
    <tr bgcolor=#f8f8f8 onmouseover="setPointer(this, 1, 'over', '#f8f8f8', '#E7E8E7', '#CEA5B2')" onmouseout="setPointer(this, 1, 'out', '#f8f8f8', '#E7E8E7', '#CEA5B2')" >
    	<td style="text-align:center;">some text 1</td>
    </tr>
    <tr bgcolor=#ffffff onmouseover="setPointer(this, 2, 'over', '#ffffff', '#E7E8E7', '#CEA5B2')" onmouseout="setPointer(this, 2, 'out', '#ffffff', '#E7E8E7', '#CEA5B2')" >
    	<td style="text-align:center;">some text 2</td>
    </tr>
    I have just installed the getFireBug and will try to examine the code also with that.

  • #4
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The getFireBug in Firefox says:

    currentColor has no properties
    setPointer(tr, 1, "over", "#f8f8f8", "#E7E8E7", "#CEA5B2")script.js (line 1)
    onmouseover(mouseover clientX=0, clientY=0)

    currentColor has no properties
    setPointer(tr, 2, "out", "#ffffff", "#E7E8E7", "#CEA5B2")script.js (line 1)
    onmouseout(mouseout clientX=0, clientY=0)

    Hope someone will be able to help me with this.
    Thanks in advance.

  • #5
    Regular Coder
    Join Date
    Feb 2005
    Posts
    679
    Thanks
    0
    Thanked 16 Times in 15 Posts
    Your td's do not have the attribute 'bgcolor' in them, so FF and IE fail, it is just fatal for FF.
    Code:
    theCells[0].getAttribute('bgcolor')
    Later in the code IE recovers because you give the tds the attribute 'bgcolor':
    Code:
    theCells[c].setAttribute('bgcolor',newColor,0);
    IE7 doesn't fail because theCells[0].getAttribute('bgcolor') returns an empty string, whereas FF returns false
    Last edited by rwedge; 08-11-2007 at 02:29 AM. Reason: why IE doesn't fail

  • #6
    New to the CF scene
    Join Date
    Aug 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I defined the bgcolor attribute in td's and everything works perfectly now.
    Thank you very much rwedge.

    Martin

  • #7
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    how defined the bgcolor attribute in td's?


  •  

    Posting Permissions

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