jquery css problem in chrome

Question

First of all, have a look at my div.

<div data-category="news" class="element news isotope-item loadimg" style="position: absolute; opacity: 1; -moz-transform: scale(1); left: 20px; top: 20px; height: auto; overflow: visible; width: auto; background-color: rgb(0, 0, 0);">
            <div id="1" class="load_cont"></div>
            <p class="number">1</p>
            <div class="element_content">
                  <div class="thumb">
                      <img src="assets/website/news2.jpg" id="myImage">        
                      <img style="display: none;" src="assets/ajax-loader.gif" id="prg1">
                      <div class="date_entry"> 14 may 2011</div>
                      <div class="title news">TEST 1</div>
                  </div>
            </div>
      </div>

When I hover over the div, the img, inside thumb, is supposed to disappear and reveal the div's background.

.element_content .thumb:hover img {
opacity:.0; /*FF/OPERA/Chrome*/
filter: alpha(opacity=0); /*IE 5-7*/
  -webkit-transition-duration: 0.1s;
     -moz-transition-duration: 0.1s;
          transition-duration: 0.1s;
}

Now comes the jquery part, which is basically, if I click on the div, it would load-in content via ajax.The thing is, the ajax preloader and css changes work pretty well in Firefox but doesn't show up at all in IE and Chrome, unless I remove the ajax part.

$('#container').find('.element').click(function(){
                if($(this).hasClass('large')){
               return ;
            }

            var url="item_detail.php?";
            var code=$(this).children().first().attr("id");





         //the portion below this point works well in FF but not in IE or Chrome
            $("#"+code).append("<img style='background-color:transparent;' src='assets/ajax-loader.gif'>"); 
            $("#"+code).css({
            "position":"absolute",
            "top":""+(($("#"+code).parent().height()/2)-27)+"px",
            "left":""+(($("#"+code).parent().width()/2)-27)+"px",
            "z-index":"2",
            });
            var e_code = $("#"+code);
            var e_cont = $('.element_content',this);
            e_cont.css({"opacity":"0.3","filter":"alpha(opacity = 30)","zoom":"1"});
            e_cont.find('.thumb img').css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});

            var url="item_detail.php?code="+code;





            //If I turn off everything below this point, the preloader appears correctly in chrome and IE, otherwise it seems, the css changes above and the preloader thing don't have any effect in browsers other than firefox.
            var httpRequest = new XMLHttpRequest();

            httpRequest.open('POST', url, false);

            httpRequest.send(); // this blocks as request is synchronous
            if (httpRequest.status == 200) {

                e_code.css({
                    "position":"static"
                });
                e_cont.html('');
                e_cont.css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});

                $previousLargeItem.html(oldhtml);
                $previousLargeItem.css({'height':'auto','width':'auto'});
                var res=httpRequest.responseText;
                $('#'+code).html(res);
            }


      });

Bluemagica · Accepted Answer · 2011-07-27 15:11:31Z

1

The actual problem turned out to be the asynch false thing which froze chrome but for some reason continued to run code in firefox. I solved it by using asynch true and moving the later code in a success event call.

answered Jul 27, 2011 at 15:11

Bluemagica

5,15812 gold badges50 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

czerasz · Accepted Answer · 2011-07-26 19:24:37Z

0

I don't know what You exactly want to do. But try this code, maybe it can help You out:
http://jsbin.com/iserac/11

The transition works. Just make the interval bigger.

  .element_content .thumb img {
    opacity:1;
    -webkit-transition: opacity 0.5s;
       -moz-transition: opacity 0.5s;
            transition: opacity 0.5s;
  }
  .element_content .thumb:hover img {
    opacity:0; /*FF/OPERA/Chrome*/
    filter: alpha(opacity=0); /*IE 5-7*/

  }

Try using jQuery ajax api for ajax calls.

answered Jul 26, 2011 at 19:24

czerasz

14.4k10 gold badges56 silver badges63 bronze badges

Collectives™ on Stack Overflow

jquery css problem in chrome

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related