Re: [jQuery] Re: Change opacity of item with class of selected
If you're concerned about it validating, use a conditional comment to
include an IE-only stylesheet with the filter in it. At least your non-
IE stylesheets will validate.
Also, note that for IE8, you'll need to use -ms-filter. So, in your IE
stylesheet, you'll have this:
#thumbs li.selected {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter:alpha(opacity=50);
}
They have to be in that order, too, apparently. for more information,
see:
http://www.quirksmode.org/css/opacity.html
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jan 6, 2010, at 7:17 AM, Paul Collins wrote:
That works Johan, thanks very much.
Doesn't validate, but I guess that's not the end of the world...
Thanks again.
Paul
2010/1/6 Johan Borestad johan.bores...@gmail.com
Hi Paul!
This is a case where you really don't even should use Javascript,
unless you're trying to do some fancy animations. Rely entirely on CSS
with a simple css-rule
#thumbs li.selected {
filter:alpha(opacity=50);
opacity:0.50;
}
This will also be much much faster than any other solutions.
/ Johan
On Jan 5, 7:50 pm, Paul Collins pauldcoll...@gmail.com wrote:
Sorry, the test page:http://paulcollinslondon.com/test/test.html
2010/1/5 Paul Collins pauldcoll...@gmail.com
Thanks very much for your help Brian. That works, but I think
the problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the
Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it
originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by
default and half
when you hover over. There is a selected class applied when you
click on a
thumbnail and I want to make the opacity stay at half when you
click on it.
There seems to be a default on all list items of the thumbs ul
of
opacity: 1; I want to change it to 0.5 when an item has a class
of selected,
but can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could
even give
me a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it
first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins
pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't
solve it!
I am trying to check if a list item has a class of selected,
then is so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with
putting it
in
an event?
Would appreciate any help
Re: [jQuery] Re: Change opacity of item with class of selected
That works Johan, thanks very much.
Doesn't validate, but I guess that's not the end of the world...
Thanks again.
Paul
2010/1/6 Johan Borestad johan.bores...@gmail.com
Hi Paul!
This is a case where you really don't even should use Javascript,
unless you're trying to do some fancy animations. Rely entirely on CSS
with a simple css-rule
#thumbs li.selected {
filter:alpha(opacity=50);
opacity:0.50;
}
This will also be much much faster than any other solutions.
/ Johan
On Jan 5, 7:50 pm, Paul Collins pauldcoll...@gmail.com wrote:
Sorry, the test page:http://paulcollinslondon.com/test/test.html
2010/1/5 Paul Collins pauldcoll...@gmail.com
Thanks very much for your help Brian. That works, but I think the
problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the
Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it
originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by default and
half
when you hover over. There is a selected class applied when you click
on a
thumbnail and I want to make the opacity stay at half when you click on
it.
There seems to be a default on all list items of the thumbs ul of
opacity: 1; I want to change it to 0.5 when an item has a class of
selected,
but can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could even
give
me a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is
so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with
putting it
in
an event?
Would appreciate any help
[jQuery] Re: Change opacity of item with class of selected
Hi Paul!
This is a case where you really don't even should use Javascript,
unless you're trying to do some fancy animations. Rely entirely on CSS
with a simple css-rule
#thumbs li.selected {
filter:alpha(opacity=50);
opacity:0.50;
}
This will also be much much faster than any other solutions.
/ Johan
On Jan 5, 7:50 pm, Paul Collins pauldcoll...@gmail.com wrote:
Sorry, the test page:http://paulcollinslondon.com/test/test.html
2010/1/5 Paul Collins pauldcoll...@gmail.com
Thanks very much for your help Brian. That works, but I think the problem
may go deeper than I thought! I've put up a test page.
I'm using the JQuery Opacity Rollover Script as a part of the Gallerific
plugin http://www.twospy.com/galleriffic/#1
To try and keep this simple, when you hover over a thumbnail, it originally
went from dark to light. I've reversed the order of this in
mouseOutOpacity mouseOverOpacity on the scripts.js
jquery.opacityrollover.js, so now they are full opacity by default and half
when you hover over. There is a selected class applied when you click on a
thumbnail and I want to make the opacity stay at half when you click on it.
There seems to be a default on all list items of the thumbs ul of
opacity: 1; I want to change it to 0.5 when an item has a class of selected,
but can't get it to work.
I've tried removing the inline style first using
$(#portfolio #thumbs li.selected).removeAttr(style);
But this doesn't work.
Sorry for the long windedness of this post, but if anyone could even give
me a hint of where to start looking, I would be really grateful.
Thanks
2010/1/5 brian zijn.digi...@gmail.com
Just put the class in the selector instead of testing for it first:
$(#portfolio #thumbs li.selected).css('opacity','0.5');
If the class doesn't exist, jQuery will do nothing (instead of
throwing an undefined error or similar).
On Tue, Jan 5, 2010 at 12:45 PM, Paul Collins pauldcoll...@gmail.com
wrote:
Hi all
I've been stuck on this for four hours, and I still can't solve it!
I am trying to check if a list item has a class of selected, then is so
change the opacity to 0.5. Here is my code:
if ($(#portfolio #thumbs ul li).hasClass(.selected)) {
$(this).css('opacity','0.5');
}
It seems that the this part isn't working, is it to do with putting it
in
an event?
Would appreciate any help
