Solved

Table TD "background-color" opacity

Posted on 2009-05-14
16
2,820 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

708 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

12 Experts available now in Live!

Get 1:1 Help Now