Question

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.

Answer 1

I was having a completely different problem, so I figured I’d type this up along with the solution so people can hopefully find it …

jqtransform applies z-index values to all select dropdowns (in this case elements, not options), and it does this starting from 10 downwards. This means that the 2nd select box will have a z-index of 9, 3rd 8, 4th 7 etc … If you have more than 11, you will get into negatives. This causes big problems in case your select boxes are in a more complicated div set where z-index values are of importance (they basically dissapear in the background).

To fix this problem, it is probably a good idea to amend the jqtransform code so it uses the selectbox tabindex attribute as the z-index for the new selecbox that it creates. This way, all new (makeshift and styled) selectboxes will have a z-index value of the real hidden selectbox tabindex attribute.

Basically the code from line 256 to 261 (or there abouts) should look something like this:

var $wrapper = $select
                .addClass('jqTransformHidden')
                .wrap('<div class="jqTransformSelectWrapper"></div>')
                .parent()
                .css({zIndex: $select.attr('tabindex')})
            ;

To use this set a tab index on the selectbox .. eg:

<select name="blah" id="blah" tabindex="33">...</select>

This is nifty as you can control which select box appears above others. So make the tabindexes decrease down the page. You don’t want dropdowns appearing below other select boxes beneath.

keywords: jqtransform dropdowns selectbox dropdown box selects z-index invisible