Solved

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

Posted on 2013-11-12
8
233 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
[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
  • 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
Independent Software Vendors: 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!

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

690 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