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