Solved

Table TD "background-color" opacity

Posted on 2009-05-14
16
2,832 Views
Last Modified: 2012-05-07
Hi.
I have a table that some of the cells (TD) background-color is set.
I have a javascript code that online highlights the row where the mouse is.
Only the cells that do not have BG color are highlighted.
I want also the cells that are colored to change their color in "opacity manner".
I couldn't figure how to make it work. (using filter:alpha(opacity=x);)...
Please advice.
Browser is Explorer only.
Thanks, Aryeh.
the colors are set like this:
TD_cell.style.backgroundColor = col;
TR_cell.style.backgroundColor = col;

Open in new window

0
Comment
Question by:tuchfeld
  • 9
  • 7
16 Comments
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24392434
Hi tuchfeld,
Try this:
 var v=4;//adjust this value according, you can pass it as parameter inside the javascript function.
 TD_cell.style.opacity = v/10;
 TD_cell.style.filter = 'alpha(opacity=' + v*10 + ')';

Further details on opacity setting:
http://www.quirksmode.org/js/opacity.html
0
 

Author Comment

by:tuchfeld
ID: 24392502
No, it doesn't work. (I tried something similar.
please look at the 2 attached animated gifs.
one is before and the second is after your opacity suggestion.
Thanks, Aryeh.
before-opacity-animated.gif
after-opacity-animated.gif
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24392543
Hi tuchfeld,
I see the obvious changes after opacity settings. Please clarify anything that not work? Perhaps post some code if needed.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:tuchfeld
ID: 24392733
Hi.
As you can see in the gif examples that I sent.
after applying the opacity, the TD cells color are changed everywhere.
but it is just like a change of color.
when I go with the cursor over that row (second gif),
the cell color is not changed at all.
take a look at the site:
http://www.faithbit.org.il/TH/
I want the line brown-mark to infect the color of the marked cell in that line
and change it's color to be more "browny".
Thanks, Aryeh.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24392788
Hi tuchfeld,
>>after applying the opacity, the TD cells color are changed everywhere.
It depend how you apply the changes in any event that you prefer.

>>but it is just like a change of color.
You can reduce the opacity settings if you're looking for more blur effect.

>>when I go with the cursor over that row (second gif),
the cell color is not changed at all.
...
I want the line brown-mark to infect the color of the marked cell in that line
and change it's color to be more "browny".
Can you post the related code that mentioned instead of rendered HTML source?

0
 

Author Comment

by:tuchfeld
ID: 24392895
The code to mark a TD table cell is:
<TD style="background-color: #123456;" ...>
(note that some cells do not have this property and in that case it works).

The code to mark a TR line is:
<TR id="1234" onMouseover="onMouseOverTableRow('1234')" ...>

where:
function onMouseOverTableRow(id)
{
  //...
  document.getElementById(id).style.backgroundColor='#654321';
  //...
}
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24392916
Hi tuchfeld,

Ok, i've copied your existing JS code here:

Your original code
======================
function onMouseOverTableRow(chap_verse)
{
  try {
      if (is_line_mark_checked())
      {
          var elm_v = parent.VRS.document.getElementById(chap_verse);
          elm_v.last_color = '#747D98'; //elm_v.style.backgroundColor;
          var mark_bg_color = '#889874'; // '#899FE1';
          elm_v.style.backgroundColor='#9FA662';
          var elm_t = parent.TBL.document.getElementById(chap_verse);
          elm_t.last_color = 'Aqua'; //elm_t.style.backgroundColor;
          elm_t.style.backgroundColor='#88BB70';
      }
  } catch(e) {}
}

I'm not sure any specified reason not refer object via  document.getElementById() instead of parent.TBL.document.getElementById()?
Try amend something like this:
 var elm_t = document.getElementById(chap_verse);
         
0
 

Author Comment

by:tuchfeld
ID: 24393020
Hi x_com,
I'm using frames. as you can see as I refere to TBL and VRS that independantly use same id.
but do not bother, it Works!
You did not refere to my question.
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24393038
Hi tuchfeld,
I need to understand your question.

>>The code to mark a TD table cell is:
<TD style="background-color: #123456;" ...>
(note that some cells do not have this property and in that case it works).
- Do you mean if the TD not specify the style property in design time, the opacity setting is working fine? Please clarify.

The code to mark a TR line is:
<TR id="1234" onMouseover="onMouseOverTableRow('1234')" ...>

where:
function onMouseOverTableRow(id)
{
  //...
  document.getElementById(id).style.backgroundColor='#654321';
  //...
}
- I've tried search the mentioned code, but didn't found. Anything you need to mention for this onMouseOverTableRow() event?

Note: Can you post those related code that need further inspection? I'm not understand Thai language and i'm harder to access your site correctly since i'm not able to install the language pack lately.



0
 

Author Comment

by:tuchfeld
ID: 24393094
1) TD is ALWAYS created and has a style. Not all TDs have background-color: #123456;
for those who do not specify the background-color it "works: i.e. when I go over the cell it is marked.
2) the function onMouseOverTableRow that I posted is a simplified example of what you just extrcted yourself: 05/15/09 10:22 AM, ID: 24392916
0
 
LVL 29

Expert Comment

by:David H.H.Lee
ID: 24393246
Hi tuchfeld,
Ok, i've checked again the rendered HTML source code. The onmouseover event should invoke "context_menuitem_highlight" function,right?
eg:
<LI id="m7" onclick="update_gif(7)" onmouseout="context_menuitem_unhighlight(this)"
        onmouseover="context_menuitem_highlight(this)" style="padding-bottom: 2;">
        <IMG src="../../TH/images/vi_blue_mark.gif" style="margin-right: 0pt; background-color: #6ED3D3;
          vertical-align: middle;">&nbspSure</LI>

>>..I want the line brown-mark to infect the color of the marked cell in that line
and change it's color to be more "browny".
     
You need to load another "highlighted browny" mark image instead of specify the image's background color.
eg:
<LI id="m7" onclick="update_gif(7)" onmouseout="context_menuitem_unhighlight(this)"
        onmouseover="context_menuitem_highlight(this,'IMG1')" style="padding-bottom: 2;">
        <IMG src="../../TH/images/vi_blue_mark.gif" ID="IMG1" style="margin-right: 0pt; background-color: #6ED3D3;
          vertical-align: middle;">&nbspSure</LI>

function context_menuitem_highlight(id,imgID)
{
  //...
  document.getElementById(id).style.backgroundColor='#654321';
  document.getElementById(imgID).src='../../TH/images/vi_browny_mark.gif'; //change image instead
//...
}


0
 

Author Comment

by:tuchfeld
ID: 24393440
I made a simple example to illustrate the issue.
I could not load it here so I put it in:
http://www.faithbit.org.il/downloads/highlight_Table_Row_Example.zip
I hope this explains it.
Thanks, Aryeh.
0
 

Author Comment

by:tuchfeld
ID: 24405784
any idea? *-)
0
 
LVL 29

Accepted Solution

by:
David H.H.Lee earned 500 total points
ID: 24409043
Hi tuchfeld,
It is working fine under Google Chrome. The initial idea'll be iterate table and revert the image to other blurred effect during onMouseover event, then switch back to original normal image after onMouseout event. That should trick that trick to make it work under i.e version.

0
 

Author Comment

by:tuchfeld
ID: 24410141
Hi x_com, let me understand.
Your suggestion has no relation to blurency / transparency which in my opinion should be simpler & faster to code assuming there are "many" IMGs TD_GBs to transform in "photoshop".
You suggest that I should change the color of the IMG and TD_BG when I onMouseover the cell.
So it's not actually using the Html blur effect... as I understand it should work theoretically.
Thanks, Aryeh.
0
 

Author Comment

by:tuchfeld
ID: 24413706
OK... I don't know about the IMGs but about the TD_BG (which is more significant) I did as you adviced. and it's accaptable solution for now. Thx.
BTW, attached the code. Aryeh.
function change_row(tr, blur)
{
  var cn = tr.childNodes;
  var res = "";
  for (var i=0; i<cn.length; i++)
  {
    var td = cn[i];
    var td_col = td.style.backgroundColor;
    if (td.orig_col==undefined)
      td.orig_col = td_col;
    if (td_col!="")
    {
      if (blur)
        td.style.backgroundColor = "#" + change_brightness(td.orig_col.substring(1), 1.3);
      else
        td.style.backgroundColor = td.orig_col;
    }
  }
}
 
function onMouseOverTableRow(chap_verse)
{
  var elm_t = parent.TBL.document.getElementById(chap_verse);
  change_row(elm_t, true);
}
 
function onMouseOutOfTableRow(chap_verse)
{
  var elm_t = parent.TBL.document.getElementById(chap_verse);
  change_row(elm_t, false);
}

Open in new window

0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

828 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