• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

Changing background color in a table cell -- update from previous EE question

Hello all,

I am looking for a modification to thisLink to earlier EE question previously solved EE question

Please look at this page in Firefox or IE:  Link to development site

You will see a calendar with yellow background on certain dates (fyi they are dates that an event has taken place in the past, take place today or will take place in the future).

Right now they are showing for in these types of table cells:  

td.extcal_daycell activeCalDay         a.extcal_busylink  (Example Nov 13, Nov 15, Nov 16)  

I need the yellow background to also show in:
td.extcal_daycell         a.extcal_busylink   (Example December 4, October 10)
   
and
td.extcal_todaycell      a.extcal_busylink  (Example Nov 12)

The previous EE solution incorporated jquery.   I put it in an external js file:  
jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').addClass('activeCalDay');
}); 

Open in new window


It references this css in my custom.css file  (I may have some duplication in my css, but here it is:
.activeCalDay { background-color: yellow; }

#extcal_minical table td.activeCalDay {
   background-color: yellow;
   border: 1px solid red !important;
}
#extcal_daycell table td.activeCalDay {
   background-color: yellow;
   border: 1px solid red !important;
} 

Open in new window


Looking forward to your solutions!

P.S.
And if possible, can we change the above so the background color only shows when the date is hovered over, per this example  The number of the date shows one color and switches to another color as the background color chantges.....   Example of hover version of background color  
If not, then it can be left as is.
Thanks!

Rowby
0
Rowby Goren
Asked:
Rowby Goren
  • 5
  • 3
1 Solution
 
Chris StanyonCommented:
To add the class to each of your relevant TD, just list them in the jQuery selector, seperated by commas:

$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parents('td').addClass('activeCalDay');

Open in new window

The problem you have using that jQuery is that it's fired when you first load the page, and by clicking to a new month, it doesn't get fired again. When you change month, a javascript function called callNavigation() gets fired, so you may have to edit that function to fire the jQuery bit (the bit inside the document ready)
0
 
Rowby GorenAuthor Commented:
Hi

Did I do the jquery correctly?   I tried both versions.  Not able to get it to work.....

jQuery(document).ready(function($) {
$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parents('td').addClass('activeCalDay');

Open in new window


Your original version had an extra bracket at the end:
jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').addClass('activeCalDay');
}); 

Open in new window


Just to be sure, I tried yesterday's code, from prev question, and it worked as expected.

I have put today's code back in, with the "missing?" final bracket:

Open in new window


Do I need to change anything in the css?


Open in new window

0
 
Rowby GorenAuthor Commented:
Hi

Did I do the jquery correctly?   I tried both versions.  Not able to get it to work.....

jQuery(document).ready(function($) {
$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parents('td').addClass('activeCalDay');

Open in new window


Your original version had an extra bracket at the end:
jQuery(document).ready(function($) {
   $('td.extcal_daycell .extcal_busylink').parents('td.extcal_daycell').addClass('activeCalDay');
}); 

Open in new window


Just to be sure, I tried yesterday's code, from prev question, and it worked as expected.

I have put today's code back in, with the "missing?" final bracket:
jQuery(document).ready(function($) {
$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parents('td').addClass('activeCalDay');

Open in new window


Do I need to change anything in the css?  Again, I may have some duplicate css in here:
.activeCalDay { background-color: yellow; }

#extcal_minical table td.activeCalDay {
   background-color: yellow;
   border: 1px solid red !important;
}
#extcal_daycell table td.activeCalDay {
   background-color: yellow;
   border: 1px solid red !important;
}

.extcal_navbar td:nth-child(1) { width: 10%; text-align:left; }
.extcal_navbar td:nth-child(2) { width: 80%; }
.extcal_navbar td:nth-child(3) { width: 10%; text-align:right; }

Open in new window


P.S.
And if possible, can we change the above so the background color only shows when the date is hovered over, per this example  The number of the date shows one color and switches to another color as the background color chantges.....   Example of hover version of background color  
If not, then it can be left as is.  Or we can reserve the P.S. for a separate question.
Thanks!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Chris StanyonCommented:
Right - my code didn't have an extra bracket at the end - it's needed. Your code now has a bracket missing from the end!! The brackets at the end are the closing brackets for the opening document ready line. Without them, the code won't work.

Having just tried it on your site, you need to change parents() to parent() - i.e drop the 's'. Your whole code will look like this - exactly:

jQuery(document).ready(function($) {
$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parent('td').addClass('activeCalDay');
});

Open in new window

As for hovering, your CSS needs to look like this instead of what you already have:

#extcal_minical td.activeCalDay:hover a {
    /* Changes the color of the Test, when the TD is hovered */
    color: #FF0000;
}

#extcal_minical td.activeCalDay:hover {
    /* Change the background-color and border of the TD when hovered */
    background-color: #FFFF00;
    border: 1px solid #FF0000 !important;
}

Open in new window

0
 
Rowby GorenAuthor Commented:
Thanks so much, Chris.  I appreciate your help.  I will be testing the code a little later today.

I am on road at moment.

Thanks

Rowby
0
 
Rowby GorenAuthor Commented:
Hi

This is what I currently have in the custom.css file (end of file):

Open in new window

#extcal_minical td.activeCalDay:hover a {
    /* Changes the color of the Test, when the TD is hovered */
    color: #FF0000;
}

#extcal_minical td.activeCalDay:hover {
    /* Change the background-color and border of the TD when hovered */
    background-color: #FFFF00;
    border: 1px solid #FF0000 !important;
}

And this is in the js file
jQuery(document).ready(function($) {
$('td.extcal_daycell .extcal_busylink, td.extcal_todaycell .extcal_busylink').parent('td').addClass('activeCalDay');
});

Open in new window


On the development page: development page  all looks good when first there.  However if going to December 14 the background doesn't change to yellow.  And when returning back to November the hovers don't work anymore.

Any thoughts?

Thanks!

Rowby
0
 
Chris StanyonCommented:
Have another read of my first comment and it'll explain why it's not working when you change month
0
 
Rowby GorenAuthor Commented:
Thanks !  Sorry for the delay in awarding points!

Rowby
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now