Bug Tracker

Ticket #3901: jQuery-ie-filters.html

File jQuery-ie-filters.html, 4.6 KB (added by prefect, 11 years ago)

Test case

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head>
5        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6        <title>jQuery Test Case: Internet Explorer Alpha Filter side effects</title>
7       
8        <!--
9                Author: Frode Danielsen (prefect)
10                Date: January 17th, 2009
11               
12                Functionality: A simple grid of images where each image can be zoomed to a larger size by
13                clicking on it. Clicking on a zoomed image scales it back down again.
14                While zoomed, the image is overlayed the other images in the grid. Images which are not
15                zoomed are also set to a lower opacity, which in a full implementation would indicate their
16                disabled state.
17               
18                Bug: In Internet Explorer the Alpha filter is automatically used by jQuery to set the opacity.
19                When the Alpha filter is active the images get clipped inside their DIVs, as if we'd used the
20                CSS overflow property on the DIVs. Consequentially, this wrecks the zoom & overlay functionality.
21               
22                How to test: Open the page in Internet Explorer (6 or 7) and zoom in and back out again on one image.
23                This will activate the Alpha filter on all the other images. Next, try to zoom in on a different
24                image and you'll see the active Alpha filter clip the image at the DIVs dimensions.
25               
26                How to fix: At the end of the Javascript a few lines have been deactivated. If these are reactivated,
27                the Alpha filter will be disabled after resetting the opacity to 1.0. This test case proposes
28                that disabling the Alpha filter automatically should be handled by jQuery, similar to how jQuery
29                enables it automatically when setting the opacity CSS property.
30        -->
31        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
32        <script type="text/javascript" charset="utf-8">
33                $(document).ready(function () {
34                        // Images sizes
35                        var baseWidth = 180, baseHeight = 135,
36                                zoomWidth = 380, zoomHeight = 285;
37                       
38                        var images = $('img');
39                        images.click(function (e) {
40                                var img = $(this), container = img.parent(),
41                                        width = parseInt(img.css('width')),
42                                        newWidth = 0, newHeight = 0, xPos = 0, yPos = 0;
43                               
44                                var isZoomed = (width == zoomWidth);
45                               
46                                if (isZoomed) {
47                                        newWidth = baseWidth;
48                                        newHeight = baseHeight;
49                                }
50                                else {
51                                        newWidth = zoomWidth;
52                                        newHeight = zoomHeight;
53                                       
54                                        // Tweak left/top position of the image according to it's position in the grid
55                                        var index = images.index(img);
56                                        if (index % 2 != 0) {
57                                                xPos -= 200;
58                                        }
59                                        if (index >= (images.length - 2)) {
60                                                yPos -= (zoomHeight - baseHeight);
61                                        }
62                                       
63                                        // Adjust z-index to place current image above all other images
64                                        container.css('z-index', '1');
65                                }
66                               
67                                var animProps = {
68                                        width: newWidth,
69                                        height: newHeight,
70                                        left: xPos,
71                                        top: yPos
72                                };
73                                img.animate(animProps, 200, 'swing', function () {
74                                        // Reset z-index after scaling image back to base size
75                                        if (isZoomed) container.css('z-index', '0');
76                                });
77                               
78                                /**
79                                 * Dim all other images than the zoomed image, or reset when scaling down again.
80                                 * This enables the Alpha filter in Internet Explorer, which causes clipping of
81                                 * content in the div, similar to how the CSS overflow property works.
82                                 */
83                                container.siblings().css('opacity', (isZoomed ? '1.0' : '0.5'));
84                               
85                                /**
86                                 * Uncomment the following code to disable the Alpha filter manually when
87                                 * the opacity should be 1.0 anyway.
88                                 */
89                                // if (isZoomed && !$.support.opacity) {
90                                //      container.siblings().css('filter', "alpha(enabled='false')");
91                                // }
92                        });
93                })
94        </script>
95       
96        <style type="text/css" media="screen">
97                html, body {
98                        background-color: #fff;
99                }
100               
101                body {
102                        margin: 20px;
103                        width: 400px;
104                }
105               
106                div {
107                        position: relative;
108                        float: left;
109                        width: 200px;
110                        height: 155px;
111                }
112               
113                        div img {
114                                position: absolute;
115                                left: 0px;
116                                top: 0px;
117                                width: 180px;
118                                height: 135px;
119                                cursor: pointer;
120                        }
121        </style>
122</head>
123<body>
124        <div>
125                <img src="http://farm1.static.flickr.com/25/46247551_7753bef0fd.jpg?v=0" alt="" />
126        </div>
127        <div>
128                <img src="http://farm1.static.flickr.com/33/46247511_cae75f536a.jpg?v=0" alt="" />
129        </div>
130        <div>
131                <img src="http://farm1.static.flickr.com/30/46247525_a8f00cd47c.jpg?v=0" alt="" />
132        </div>
133        <div>
134                <img src="http://farm1.static.flickr.com/26/46241461_5427bdd5c4.jpg?v=0" alt="" />
135        </div>
136        <div>
137                <img src="http://farm1.static.flickr.com/24/46247599_a2b54355e7.jpg?v=0" alt="" />
138        </div>
139        <div>
140                <img src="http://farm1.static.flickr.com/33/46247614_114e894140.jpg?v=0" alt="" />
141        </div>
142</body>
143</html>