0

Not that it's a surprise you encounter daily problems with Internet Explorer, but when you actually do it with a browser like Opera - it kind of throws you off the chair.

I got most things working with Firefox, Chrome and IE (apart from the fact that fancybox isn't validating all the IE-fixes as green, but that's an issue for another time).

Anyway, the problem which I can't seem to figure out is best described with a screenshot!

http://patrikarvidsson.com/stuff/operaissue.jpg

Hover seems to work, lights up the images just as it is supposed to do. But it doesn't seem to correctly show the "faded out" images as it does in the rest of the browsers. As seen above only parts of the images are shown.

Opera-users can see the webpage at hxxp://www.patrikarvidsson.com/project/portfolio

I installed the latest Opera as of today to recreate this for myself, as it was reported by a friend a day ago.

// LiveQuery for Fade-Effect

$(".thumb").livequery(function(){ 
$(".thumb").css("opacity","0.6");
    $(".thumb").hover(function () {
        $(this).stop().animate({
           opacity: 1.0
        }, "fast");
},
 function () {
    $(this).stop().animate({
        opacity: 0.6
        }, "fast");
    });
});

The jQuery .load-code for one of the links;

    $("a.dartLink").click(function(){
    $('div#content').load("content/digitalart.php");
    return false;
});

The link to one of the gallery pages (surrounded by a list);

    <a href="index.php?l=digitalart" class="dartLink gallery"><span>Digital Illustrations</span></a>

The HTML for one of the thumbs;

<div class="thumbbox">
<a rel="digitalart" href="thumblink.jpg" class="thumb" title="Astralis"><img src="images/thumbs/AstralisSmall.jpg" alt="" /></a></div>

On second thought, however, this may not be related to jQuery. I added the CSS tag just in case. Although I still have no idea what is causing this. Unfortunately, since I edited this post, the image and hyperlink limit again applies as I am a new user.

Edited the post. I think I managed to include the needed code now.

arvdsn
  • 75
  • 1
  • 2
  • 7
  • 1
    Patrik, you should be splitting up these separate topics into multiple questions. The more manageable your individual questions are, the more likely they are to be answered. Also, when you've got these questions split up, it would be useful to see your code. Most of us don't want to slog through your entire javascript file to try to figure out what's going on. – treeface Sep 27 '10 at 17:08
  • What you are saying does make sense. I'll split up the questions in separate topics and make sure to include the essential codes as well. Thank you for the suggestion! – arvdsn Sep 27 '10 at 17:32

2 Answers2

0

Patrik,

This isn't the core of your question (and I will abstain from responding to that until you put up some code that we can analyze), but be careful with the lightbox plugin when using IE. It acts very weirdly when you have a lot of images on the page (i.e. [no pun intended] it will halt the execution of the entire browser and even slow down the operating system until all images are loaded). My solution to this problem was to use the colorbox plugin, which you can find here:

http://colorpowered.com/colorbox/

I find it to be just as snappy as lightbox, except it works perfectly in IE.

treeface
  • 13,270
  • 4
  • 51
  • 57
  • I did some edits and added what I think is the necessary and relevant code that causes this issue. Strangely enough I have never heard of colorbox even though I have been in looking around for alternatives to lightbox for some time as I never liked the original plugin. I will try this instead when I get home from work. Thank you, again, for the suggestion! – arvdsn Sep 27 '10 at 18:07
0

I don't have opera installed hover I am quite confident that your issue is because you are using display:inline of the boxes containing thumbnails. Try:

.thumbbox {
display: inline-block;
padding: 0px;
}

Opera is simply cropping the image to the size of the container (I used chrome dev tools to verify). You will need to set the display to inline for IE6 & 7 and apply min-height:1% or zoom:1 hack to get the same effect. Alternatively you can float these divs which will require additional safe guard to ensure they are contained correctly.

Hope that helps!

EDIT

Additionally the <a /> and <span /> tags beneath the <div class="thumbbox" /> may need to be set to display:block as they are both inline elements.

Stuart Burrows
  • 10,824
  • 2
  • 34
  • 33