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
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 wrote:
> Sorry, the test page:http://paulcollinslondon.com/test/test.html
>
> 2010/1/5 Paul Collins
>
> > 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
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
>
> > 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
> >> 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
> 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 wrote:
> > Sorry, the test page:http://paulcollinslondon.com/test/test.html
> >
> > 2010/1/5 Paul Collins
> >
> > > 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 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
> >
> > > 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 >
> > >> 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 wrote:
> Sorry, the test page:http://paulcollinslondon.com/test/test.html
>
> 2010/1/5 Paul Collins
>
> > 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 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
>
> > 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
> >> 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
