Databases
StackOverflow2013
Postsdbo
POjqtransform and collapsed DIV
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjqtransform and collapsed DIV
    text
    copied!<p>I am using a jQuery plugin called: <a href="http://plugins.jquery.com/project/jqtransform" rel="nofollow noreferrer">jqtransform</a> </p> <p>This plugin uses JavaScript to apply CSS styles to form elements.</p> <p><strong>The problem that I have consists in the following scenario:</strong></p> <p>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.</p> <p>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.</p> <p>But… with the JavaScript solution, the div#advancedSearch stays visible for a couple of milliseconds… which is visually annoying.</p> <p>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.</p> <hr> <h2>UPDATE 1</h2> <p><strong>After jeerose comment I decided to place here my function</strong> <em>(please note that the &lt;%= %> are ASP.Net tags, that I use to get the images path)</em></p> <pre><code>$('.toggleAdvancedSearch').click(function() { $('#advancedSearchWrap').slideToggle(250); $('form.jqtransform').jqTransform({ imgPath: '&lt;%= ResolveClientUrl("~/masterpages/img/jqtransform/") %&gt;' }); return false; }); </code></pre> <hr> <h2>UPDATE 2</h2> <p><strong>To test the problem, I did the following:</strong></p> <p>Added another element to the page, with the ID “applyStyle”, and onClick I call the $('form').jqTransform();</p> <p>Disabled the the $('form').jqTransform(); from the load of the page.</p> <p>If I press the a#applyStyle, before expanding the div#advancedSearch I get the same problem that I had.</p> <p>But if I expand the the div#advancedSearch and press the the a#applyStyle after, the problem is solved.</p> <p>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.</p> <p><strong>I think that the solution could be:</strong> 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.</p> <p><strong>However, I don’t know how to do this</strong> (nether if this will work).</p> <hr> <p><em>PS: This seems to be a known issue with the plugin, but I cannot wait indefinitely for a solution.</em></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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