Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2903
  • Last Modified:

Table TD "background-color" opacity

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
tuchfeld
Asked:
tuchfeld
  • 9
  • 7
1 Solution
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
David H.H.LeeCommented:
Hi tuchfeld,
I see the obvious changes after opacity settings. Please clarify anything that not work? Perhaps post some code if needed.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
tuchfeldAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
tuchfeldAuthor Commented:
any idea? *-)
0
 
David H.H.LeeCommented:
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
 
tuchfeldAuthor Commented:
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
 
tuchfeldAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 9
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now