Hello, I am using a jQuery plugin called: jqtransform

This plugin uses JavaScript to apply CSS styles to form elements.

The problem that I have consists in the following scenario:

I’m building a search page, with a advanced search option. When the page loads, the div called “advancedSearch” is hidden, and it will only show if the user clicks a element. Inside the div#advancedSearch I have several form elements.

However, if I hide the div#advancedSearch with the CSS style: “diplay:none;”, the jqtransform plugin doesn’t work correctly with the elements that are hidden. So my solution was to hide the div#advancedsearch with JavaScript. This actually works, and it does not matter if it’s done after the document is ready or not.

But… with the JavaScript solution, the div#advancedSearch stays visible for a couple of milliseconds… which is visually annoying.

So I was wondering if the solution to this problem would be in the CSS, or in correcting the jqtransform plugin, or even in finding a way to immediately hide the div#advancedSearch with JS making it immediately hidden.

UPDATE 1

After jeerose comment I decided to place here my function (please note that the <%= %> are ASP.Net tags, that I use to get the images path)

$('.toggleAdvancedSearch').click(function() {
    $('#advancedSearchWrap').slideToggle(250);
    $('form.jqtransform').jqTransform({ imgPath: '<%= ResolveClientUrl("~/masterpages/img/jqtransform/") %>' });
    return false;
});

UPDATE 2

To test the problem, I did the following:

Added another element to the page, with the ID “applyStyle”, and onClick I call the $('form').jqTransform();

Disabled the the $('form').jqTransform(); from the load of the page.

If I press the a#applyStyle, before expanding the div#advancedSearch I get the same problem that I had.

But if I expand the the div#advancedSearch and press the the a#applyStyle after, the problem is solved.

However, if I run the page with the $('form').jqTransform(); function on the load, I cannot reapply it after with the pressing of the a#applyStyle.

I think that the solution could be: disabling the all the elements that are inside the div#advancedSearch, and on the same function that expands the div, make It also apply the styles to the elements that are inside the div#advancedSearch.

However, I don’t know how to do this (nether if this will work).

PS: This seems to be a known issue with the plugin, but I cannot wait indefinitely for a solution.