[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2013-11-12
8
Medium Priority
?
241 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 44

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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Suggested Courses

649 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