[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 601
  • Last Modified:

CSS & Jquery script to fade in images and rollover fades Not working in IE

Hi,

Having real problems trying to display this test page properly in IE 8,7,&6 and can't figure out why?
Really could use some help tracking this down as it works perfectly in all other browsers I've tested (Safari Opera Chrome Firefox)
thanks
0
sany101
Asked:
sany101
  • 5
  • 4
1 Solution
 
darren-w-Commented:
ie uses somthing different to Opcity:

http://www.w3schools.com/css/css_image_transparency.asp

ie: filter:alpha(opacity=x).
0
 
sany101Author Commented:
Well I guess I'm missing something because this example which is which is what I was using in my test works perfectly all the way back to I.E 6?
0
 
darren-w-Commented:
Your right:

this works though in ie8:(have taken the heights out of the image definitions)
<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">
            html,body {

                position:absolute;
            }
            #galleryHolder {
                width:354px;
            }
            /* Hover Fade Styling */
            div.fadeHoverGallery {
                margin:10px;
                position: relative;
                width: 334px;
                height: 176px;
            }
            img.a {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
            }
            img.b {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
            }

        </style>
        <!-- scripts -->


        <!-- On Load Fade -->

        <!-- Roll Over Fade -->
        <script type='text/javascript'>
            $(function(){

                $("img.a").hover(
                function() {
                    $(this).stop().animate({"opacity": "0"}, "slow");
                },
                function() {
                    $(this).stop().animate({"opacity": "1"}, "slow");
                });

            });
        </script>
    </head>
    <body>
        <div id="galleryHolder">
            <div class="gallery"><div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg"  class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
                <div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg"  class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg"  class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
                <!-- end gallery --></div>
            <!-- end galleryHolder --></div>
    </body>
</html>

Open in new window

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
darren-w-Commented:
Works fine in ie6 too

Darren
0
 
sany101Author Commented:
Thanks Darren, however I still need the images to fade on load which you've removed:

<script type="text/javascript">
$(function(){
	$(".gallery").preloader();
	
	});

Open in new window


0
 
darren-w-Commented:
I've used this preloader instead, it works with ie:

http://flesler.blogspot.com/2008/01/jquerypreload.html


<html>
    <head>
        <title>test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <style type="text/css">
            html,body {

                position:absolute;
            }
            #galleryHolder {
                width:354px;
            }
            /* Hover Fade Styling */
            div.fadeHoverGallery {
                margin:10px;
                position: relative;
                width: 334px;
                height: 176px;
            }
            img.a {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
            }
            img.b {
                display:block;
                position: absolute;
                left: 0;
                top: 0;
            }

        </style>

        <script type="text/javascript" src="preload.js"></script>

        <script type='text/javascript'>
            $(function(){
                $.preload(".gallery");
                $("img.a").hover(
                function() {
                    $(this).stop().animate({"opacity": "0"}, "slow");
                },
                function() {
                    $(this).stop().animate({"opacity": "1"}, "slow");
                });

            });
        </script>
    </head>
    <body>
        <div id="galleryHolder">
            <div class="gallery"><div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg"  class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
                <div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg"  class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg"  class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
                <!-- end gallery --></div>
            <!-- end galleryHolder --></div>
    </body>
</html>

Open in new window

0
 
sany101Author Commented:
Again thanks Darren but I think you've miss understood what I was using the original pre-load script for. It was to fade the images.
 check out the original test page in firefox to see what I mean.
Thanks
0
 
darren-w-Commented:
Hi,

Where have you got the preloader method from? Its obviously conflicting with the animate effect, perhaps you could look at others that don't conflict?

Busy now but will take a look later.

D
0
 
blueghoztCommented:
your preloader definitely borks IE, not sure how

but try a simpler method and maybe tweak the numbers to suit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head>
<style type="text/css">



#galleryHolder {

	width:354px;

}

/* Hover Fade Styling */

div.fadeHoverGallery {

	margin:10px;

	position: relative;

	width: 334px;

	height: 176px;

	}

img.a {

	display:none; 

	position: absolute;

	left: 0;

	top: 0;

    z-index: 10;
	
	border:0;

	}

img.b {

	display:block; 

	position: absolute;

	left: 0;

	top: 0;
	
	border:0;

	}



</style>

<!-- scripts -->

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>

<script type="text/javascript" src="js/jquery.preloader.js"></script>

<!-- On Load Fade -->


<!-- Roll Over Fade -->

<script type='text/javascript'>

$(document).ready(function(){

	$("img.b").hide();
	$("img.first").fadeIn(2000);
	$("img.second").fadeIn(4000);
	$("img.b").fadeIn(4000);


	$("img.a").hover(

	function() {

	$(this).stop().animate({"opacity": "0"}, "slow");

	},

	function() {

	$(this).stop().animate({"opacity": "1"}, "slow");

	});


});

</script>

</head>

<body>

	<div id="galleryHolder">

		<div class="gallery">

			<div class="fadeHoverGallery">
				<a href="#">
					<img src="images/image_a.jpg" width="334" height="176" class="a first" alt="" />
					<img src="images/image_b.jpg" width="334" height="176" class="b" alt="" />
				</a>	
			</div><!-- end fadeHoverGallery -->

			<div class="fadeHoverGallery">
				<a href="#">
					<img src="images/image_a.jpg" width="334" height="176" class="a second" alt="" />
					<img src="images/image_b.jpg" width="334" height="176" class="b" alt="" />
				</a>
			</div><!-- end fadeHoverGallery -->
		
		</div><!-- end gallery -->
		
	</div><!-- end galleryHolder -->

</body>

</html>

Open in new window

0
 
sany101Author Commented:
Perfect thanks
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now