Jquery fadeOut looking different in FF than in Chrome/Safari
        Posted  
        
            by StealthRT
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by StealthRT
        
        
        
        Published on 2010-04-26T00:03:01Z
        Indexed on 
            2010/04/26
            0:03 UTC
        
        
        Read the original article
        Hit count: 564
        
Hey all, i have a page that when a user desides to delete a company, it fades out using the jquery fadeOut() command. This works great and does as it should in FireFox but for some reason it doesn't do the same in Chrome/Safari browsers.
The problem is that i have a png image overlay on top of the company logo image that also fades out with the company logo. But if there are more than one company logo on the page, it moves the others in the place where the one got deleted.
Like i said, it works fine (and as it should) in Firefox and even IE (SHOCK!) but not in Chrome or Safari. This is the code i use to delete (fade out) the section:
 $('#moreInfoM' + theNum).fadeOut("slow");
 $('#moreInfo' + theNum).fadeOut("slow");
 $('#liNum' + theNum).fadeOut("slow");
Where moreInfoM, moreInfo & liNum are all within the code for each logo image. TheNum is just a unique number for each logo just for reference.
And the ASP code:
 For iLoop = LBound(compNames) to UBound(compNames)
theWidth = (iwidth / 2)
ImgDimension(Server.MapPath("img/company/" & compNames(iLoop) & ".jpg"))
theWidth = (iwidth / 2)
response.write "<li onClick=""$('#moreInfo" & y & "').slideToggle('slow');"" id=""liNum" & y & """>" & vbcr         
if theBrowser = "chrome" or theBrowser = "safari" then
     response.write "<img src=""img/clickMI.png"" width=""97"" height=""33"" style=""position:absolute;width:97px;height:33px;z-index:12;padding-top: 54px; padding-left:" & theWidth & "px;"">" & vbcr
else
     response.write "<img src=""img/clickMI.png"" width=""97"" height=""33"" style=""position:absolute;width:97px;height:33px;z-index:12;padding-top: 50px; padding-left:" & theWidth & "px;"">" & vbcr
end if
response.write "<img src=""img/company/" & compNames(iLoop) & ".jpg"" height=""60"" style=""border: 1px solid #4C3C1B;padding: 2px;background-color: #CCC; margin-left: 10px; margin-right: 10px; margin-bottom: 5px; margin-top: 5px;"" id=""moreInfoM" & y & """ />" & vbcr
response.write "</li>" & vbcr
y = y + 1
 Next
I have made a video of FF and Chrome to give you a better understanding.
http://www.youtube.com/watch?v=ZQaRvosvRKE
Thanks!
David
© Stack Overflow or respective owner