[jQuery] jQuery addClass problems
Hi folks,
This problem probably stems from my lack of CSS knowledge, but I'm sure
there's someone here who can help me.
I'm trying to use .add/removeClass() to highlight and unhighlight cells
in a calendar when hovered and change their color entirely when they're
clicked, etc.
I had this working great, but now need to add further functionality, and
decided that I should use jQuery to to the highlighting by swapping
classes in and out. It works, but not exactly as I expected. It's
swapping out the text color, but not the background color. I'm puzzled.
Is there some reason I could be seeing these sorts of results?
I've got a css file set up with classes like this:
td.Weekday{
color: #ThisOrderBoardNormalTextColor#;
background-color: #ThisOrderBoardOddRowColor#;
}
td.WeekdayHover{
background-color: #ThisOrderBoardOddRowHighlightColor#;
}
td.WeekdayClicked{
color: white;
background-color: blue;
}
...etc.
I hope someone can help me. :o)
Chris
--
http://www.cjordan.info
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Christopher Jordan schrieb:
It's
swapping out the text color, but not the background color. I'm puzzled.
Is there some reason I could be seeing these sorts of results?
Is this online, cane i see this?
Have you so in the CSS?
#tableID td{
background:#ccc;
}
this cane not overwritte with your
td.Weekday{
then must be
#tableID td.Weekday{
. you have not this in CSS!?
background-color: #ThisOrderBoardOddRowColor#;
sorry :)
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Olaf, thanks for responding.
Olaf Bosch wrote:
Christopher Jordan schrieb:
It's
swapping out the text color, but not the background color. I'm puzzled.
Is there some reason I could be seeing these sorts of results?
Is this online, cane i see this?
Unfortunately, this is not in an area of the web that I can make accessible.
Have you so in the CSS?
#tableID td{
background:#ccc;
}
No. the table itself does not have an id. The calendar is the only table
on the screen, and each of the tds have a unique id.
this cane not overwritte with your
td.Weekday{
then must be
#tableID td.Weekday{
. you have not this in CSS!?
background-color: #ThisOrderBoardOddRowColor#;
My css file is not included in the traditional way.
#ThisOrderBoardRowColor# is a ColdFusion variable. My style sheets first
get processed by the CF engine before they are included at the top of my
pages. So it's not a .css file. It's a .cfm file. I should have made
this more clear probably.
I should probably also mention, that the initial colors on the calendar
are set in-line as ColdFusion builds the page. It is this way that I
make the weekend cells a different color from the weekday cells.
Here's the template of my td cells that represent the calendar cells:
td
id = #ThisCalendarIndex#
class = EmptyMe
normalBGColor = #ThisColor#
dayType = #ThisDayType#
state =
status = off
dateValue =
style = background-color:#ThisColor#; width:#CalendarCellWidth#px;
vertical-align:top; text-align:right;
onmouseover = CalendarEvents('#ThisCalendarIndex#', 'mouseover');
onmouseout = CalendarEvents('#ThisCalendarIndex#', 'mouseout');
onclick = CalendarEvents('#ThisCalendarIndex#', 'click');
!---
onmouseover = CalendarEvents(this, 'mouseover',
'#ThisHighlightColor#', '#ThisOrderBoardNormalTextColor#');
onmouseout = CalendarEvents(this, 'mouseout');
onclick = CalendarEvents(this, 'click');
---
ondblclick = return false;
/td
Realize that this is being looped over and all of the variables between
the pound signs are being evaluated before it ever hits the browser.
Before I started trying to jQuerize this particular piece of code, I
used to call my CalendarEvents function with the code that is now
between CF comments. I would pass 'this' to the function and then I'd
use JavaScript to manipulate the DOM (obj.style.background = color;)
Does this help explain things better? What am I doing wrong?
Thanks,
Chris
--
http://www.cjordan.info
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Christopher Jordan schrieb:
I should probably also mention, that the initial colors on the calendar
are set in-line as ColdFusion builds the page. It is this way that I
make the weekend cells a different color from the weekday cells.
Now this cane also not overwrittten, you must this delete
style = background-color:#ThisColor#;
Or try this, works not in all Browsers
td.WeekdayHover{
background-color: #ThisOrderBoardOddRowHighlightColor#
!important;
}
--
Viele Grüße, Olaf
---
[EMAIL PROTECTED]
http://olaf-bosch.de
www.akitafreund.de
---
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Hi Christopher,
this is rather important due to the css cascade:
I should probably also mention, that the initial colors on the
calendar are set in-line as ColdFusion builds the page. It is this way
that I make the weekend cells a different color from the weekday cells.
Your inline css (defined within the attribute 'style', I guess) is more
dominant than the class.
Imagine the following HTML:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
html
head
titlePage title/title
style type=text/css
td {
padding: 2px;
width: 150px;
border: 1px solid #000;
background-color: #888;
}
.special-class {
background-color: yellow;
}
.add-me {
background-color: orange;
}
/style
/head
body
table
tr id=firstrow
thFIRST/td
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
tr id=secondrow
thSECOND/th
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
tr id=thirdrow
thTHIRD/th
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
/table
/body
/html
One will see three rows with each having three tds colored grey, yellow, red
(from left to right).
via:
$('#secondrow td').addClass('add-me');
the class with orange background-color is set for the tds in the second row,
but only the first two of them will change color as the inline style has more
weight.
using:
$('#thirdrow td').attr('style', '').addClass('add-me');
you'll get the expected result.
So maybe you should reset the style-attribute...
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Olaf Marc,
Thanks so much for helping me with my CSS. It hadn't occurred to me to
first empty the style like you suggest Marc. What about using the
!important command in my CSS? Which would be better? I'm gonna run out
to the web and do some reading on the use of !important.
Thanks for your help, guys!! :o)
Chris
Marc Jansen wrote:
Hi Christopher,
this is rather important due to the css cascade:
I should probably also mention, that the initial colors on the
calendar are set in-line as ColdFusion builds the page. It is this way
that I make the weekend cells a different color from the weekday cells.
Your inline css (defined within the attribute 'style', I guess) is more
dominant than the class.
Imagine the following HTML:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN
html
head
titlePage title/title
style type=text/css
td {
padding: 2px;
width: 150px;
border: 1px solid #000;
background-color: #888;
}
.special-class {
background-color: yellow;
}
.add-me {
background-color: orange;
}
/style
/head
body
table
tr id=firstrow
thFIRST/td
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
tr id=secondrow
thSECOND/th
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
tr id=thirdrow
thTHIRD/th
tdstyled via codetd/code/td
td class=special-classstyled via codeclass/code/td
td class=special-class style=background-color: red;styled via
codeclass/code and inline styles/td
/tr
/table
/body
/html
One will see three rows with each having three tds colored grey, yellow, red
(from left to right).
via:
$('#secondrow td').addClass('add-me');
the class with orange background-color is set for the tds in the second row,
but only the first two of them will change color as the inline style has more
weight.
using:
$('#thirdrow td').attr('style', '').addClass('add-me');
you'll get the expected result.
So maybe you should reset the style-attribute...
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
http://cjordan.info
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] jQuery addClass problems
Christopher Jordan schrieb: Olaf Marc, Thanks so much for helping me with my CSS. It hadn't occurred to me to first empty the style like you suggest Marc. What about using the !important command in my CSS? Which would be better? I'm gonna run out to the web and do some reading on the use of !important. Inline-styles are ever bad, see your discovery ;) The best way are you let set classes per CF and then change they per JS. What about that? td id = #ThisCalendarIndex# class = EmptyMe #ThisColor# -- Viele Grüße, Olaf --- [EMAIL PROTECTED] http://olaf-bosch.de www.akitafreund.de --- ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
