Solved

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

Posted on 2013-11-12
8
228 Views
Last Modified: 2013-11-16
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
Comment
Question by:Rowby Goren
  • 5
  • 3
8 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39641583
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39641833
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39641878
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39642412
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
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 9

Author Comment

by:Rowby Goren
ID: 39642476
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39643691
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39643891
Have another read of my first comment and it'll explain why it's not working when you change month
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39653703
Thanks !  Sorry for the delay in awarding points!

Rowby
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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

920 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

15 Experts available now in Live!

Get 1:1 Help Now