JQuery Cycle plugin – IE Transparency issue, who can help

internet explorerinternet-explorer-6internet-explorer-7jquery

I am using the JQuery Cycle plugin to cycle threw a bunch of DIV's, each DIV represents a weddings dress, with a pic, description and accessories etc.

All works fine in FF and Chrome, but in IE 6/7 there is a bug with the transparent .pngs. Each time the cycle switches DIV's a strange black fuzzy border is added to the pngs, this is extremely ugly.

I have read other posts which suggest converting the images to jpg's but the sites design elements wont permit this.

Here is a test url to demonstrate what I mean – http://fi-testing.co.uk/clients/cavendish/v2/wedding-dresses.html

A similar post on this site suggests using unitpng to target each image individually but I'm not sure how to edit the JS to do this.

Can anyone help me solve this please, the site is due to be launched soon.

Best Answer

In IE 6 I don't see any black fuzzy thing, but there's a missing image called clear.gif overlaid on every wedding dress photo.

The address of the image is:

http://fi-testing.co.uk/clients/cavendish/img/clear.gif

This image is not added to the markup in Firefox, so maybe it's one of those fixes meant to unfuck IE 6. Start looking into it.

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Javascript – How to know which radio button is selected via jQuery

To get the value of the selected radioName item of a form with id myForm:

$('input[name=radioName]:checked', '#myForm').val()

Here's an example:

$('#myForm input').on('change', function() {
   alert($('input[name=radioName]:checked', '#myForm').val()); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
  <input type="radio" name="radioName" value="1" /> 1 <br />
  <input type="radio" name="radioName" value="2" /> 2 <br />
  <input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Best Answer

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

Javascript – How to know which radio button is selected via jQuery

Related Topic