Results 1 to 4 of 4

Thread: [RESOLVED] css opacity

  1. #1

    Thread Starter
    Hyperactive Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    265

    Resolved [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

  2. #2
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    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.

  3. #3

    Thread Starter
    Hyperactive Member
    Join Date
    Dec 2009
    Location
    sydney
    Posts
    265

    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.

  4. #4
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    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
  •  



Click Here to Expand Forum to Full Width