Solved

Table TD "background-color" opacity

Posted on 2009-05-14
16
2,823 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

911 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now