-
Feb 3rd, 2012, 12:52 AM
#1
Thread Starter
Hyperactive Member
[RESOLVED] css opacity
Hi guys,
i have a multiple rows table, on the row mouseOver event i set opacity to 0.5 on two images (originally opacity is 0)
Code:
$("tr").live({
mouseover:function(){
$(this).find('img').css('opacity','0.5').end();
$(this).css('background-color','rgb(100%,100%,80%)')},
mouseleave:function(){
$('img').css('opacity','0');
$(this).css('background-color','rgb(100%,100%,100%)')}
});
top part works like a treat.
now on the img mouse over i want to increase opacity to 1
Code:
$("img").live({
mouseover:function(){$(this).css('border','1px solid black').css('opacity','1');},
mouseleave:function(){$(this).css('border','0px').css('opacity','0.5');}
});
the border shows up but opacity dosnt seem to change
what have i missed?????????????????????
thanks in advance
-
Feb 3rd, 2012, 02:19 AM
#2
Re: css opacity
Problem with event bubbling. The mouseover event is fired from the image and then bubbles up the DOM and fires from the tr; therefore, the change to opacity on the image's mouseover function is overridden by the change to its opacity on the tr's mouseover function (so it stays at .5).
To correct, you need to stop the bubbling after the event fires from the image:
Code:
$("img").live({
mouseover:function(e){
$(this).css('border','1px solid black').css('opacity','1');
e.stopPropagation();
},
mouseleave:function(){
$(this).css('border','0px').css('opacity','0.5');
}
});
Also, end() is unnecessary if you're not going to chain more methods after it.
-
Feb 8th, 2012, 12:53 AM
#3
Thread Starter
Hyperactive Member
Re: css opacity
you are a legend, thanks , but now i fell into another issue
i have datepicker assigned to an input on each row. if i clone before executing datepicker it works on all rows however, if i used datepicker on the first row and then cloned that row it wont work on the new row.
i also notice that class name changes from calendar to calendar hasDatepicker, i thought this mite be a work around but did not do much
Code:
$('.calendar,.calendar hasDatepicker').live('click', function() {
$(this).datepicker({showOn:'focus',dateFormat: 'dd-mm-yy'}).focus(); });
then tried this
Code:
$('tr').each(function(){
$(this).find('input:first').attr('class','calendar');
})
now, this got me going but still think i have missed something somewhere !!
Last edited by wiss.dev; Feb 8th, 2012 at 12:56 AM.
-
Feb 8th, 2012, 04:23 PM
#4
Re: css opacity
After you've cloned a row, you could probably use something like:
Code:
$('.calendar').not('.hasDatepicker').datepicker( ... );
That will initialize the date picker for any element that both has class "calendar" and not class "hasDatepicker."
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|