?
Solved

Table TD "background-color" opacity

Posted on 2009-05-14
16
Medium Priority
?
2,868 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 1500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 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