jqtransform and collapsed DIV
- by Marco
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.
