Databases
StackOverflow2013
Postsdbo
POjquery .png crossfade script fails on IE7/IE8
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjquery .png crossfade script fails on IE7/IE8
    primarykey
    data
    text
    <p>Im trying to get two alpha-24 transparent .png files to crossfade into each other. I started this adventure by modifying a pretty decent little script (thanks to jqueryfordesigners.com):</p> <pre><code>// wrap as a jQuery plugin and pass jQuery in to our anoymous function (function ($) { $.fn.cross = function (options) { return this.each(function (i) { // cache the copy of jQuery(this) - the start image var $$ = $(this); // get the target from the backgroundImage + regexp var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, ''); // nice long chain: wrap img element in span $$.wrap('&lt;span style="position: relative;"&gt;&lt;/span&gt;') // change selector to parent - i.e. newly created span .parent() // prepend a new image inside the span .prepend('&lt;img&gt;') // change the selector to the newly created image .find(':first-child') // set the image to the target .attr('src', target); // the CSS styling of the start image needs to be handled // differently for different browsers if ($.browser.mozilla) { $$.css({ 'position' : 'absolute', 'left' : 0, 'background' : '', 'top' : this.offsetTop }); } else if ($.browser.msie &amp;&amp; $.browser.version == 8.0) { $$.css({ 'position' : 'absolute', 'left' : 0, 'background' : '', '-ms-background-position-x' : '0px', '-ms-background-position-y' : '0px' }); } else if ($.browser.msie) { $$.css({ 'position' : 'absolute', 'left' : 0, 'background' : '', 'top' : 0 }); } else if ($.browser.opera &amp;&amp; $.browser.version &lt; 9.5) { // Browser sniffing is bad - however opera &lt; 9.5 has a render bug // so this is required to get around it we can't apply the 'top' : 0 // separately because Mozilla strips the style set originally somehow... $$.css({ 'position' : 'absolute', 'left' : 0, 'background' : '', 'top' : "0" }); } else { // Safari &amp; Chrome $$.css({ 'position' : 'absolute', 'left' : 0, 'background' : '' }); } // similar effect as single image technique, except using .animate // which will handle the fading up from the right opacity for us $$.hover(function () { $$.stop().animate({ opacity: 0 }, 250); }, function () { $$.stop().animate({ opacity: 1 }, 250); }); }); }; })(jQuery); // note that this uses the .bind('load') on the window object, rather than $(document).ready() // because .ready() fires before the images have loaded, but we need to fire *after* because // our code relies on the dimensions of the images already in place. $(window).bind('load', function () { $('img.fade').cross(); }); </code></pre> <p>The main modifications I made were to make it work in IE7/8 and webkit by fixing some absolute positioning bugs. Only problem now is that I run into an issue covered here - [stackoverflow.com/questions/1156985, IE7 and IE8] can only handle transparency on one image at a time. The crossfade gives me the result of a grayed out image during and after the effect. Check it out in action: <a href="http://dap-llc.com/work/" rel="nofollow noreferrer">http://dap-llc.com/work/</a></p> <p>Anyone have a good way to get around this? And no points for suggesting that I fade a container element - there has to be a way to do this on the image level in IE.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USstaypuftman
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload