Solved

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

Posted on 2013-11-12
8
227 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 42

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 42

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

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

758 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

22 Experts available now in Live!

Get 1:1 Help Now