Jqtransform and minimized div

Question

I am using a jQuery plugin called jqtransform

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

The problem is the following scenario:

Create a search page with advanced search. When the page loads, the div called "advancedSearch" is hidden, and it will only show if the user will click on the element. Inside the div # advancedSearch, I have several form elements.

However, if I hide the div # advancedSearch with the CSS: "diplay: none;" style, the jqtransform plugin does not work correctly with hidden elements. So my solution was to hide the advanced div # search with JavaScript. It really works, and it doesn't matter if it is executed after the document is ready or not.

But ... using a JavaScript solution, div # advancedSearch remains visible for a couple of milliseconds ... which is visually annoying.

So I was wondering if there would be a solution to this problem in CSS or a fix for the jqtransform plugin, or even find a way to immediately hide the div # advancedSearch with JS, which would be hidden right away.

---

UPDATE 1

( , <% =% > ASP.Net, )

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

---

2

, :

, "applyStyle", onClick $('form'). jqTransform();

$('form'). jqTransform(); .

a # applyStyle, div # advancedSearch , .

div # advancedSearch a # applyStyle , .

, $('form'). jqTransform(); , # # applyStyle.

, : , div # advancedSearch, , div, div # advancedSearch.

, ( ).

---

PS: , .

Answer 1

, , , ...

jqtransform z-index ( , ), 10 . , 2- z- 9, 3-, 4- ..... 11, . , div, z- ( ).

, , jqtransform, tabindex selectbox z-index selecbox, . , ( ) selectboxes z- tabindex selectbox.

256 261 ( ) :

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

, selectbox.. :

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

, , . , tabindexes . , .

: jqtransform dropdowns selectbox dropdown box z-index

Answer 2

, :

$(document).ready(function () {
$('p.panel_class').click(function () {                     
    $('form.jqtransform').jqTransform(
        $('form#panel').slideToggle('fast'))    
    }); });

, ; -)

Answer 3

z- select . z .

"" , z- 10 100.

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

Answer 4

, , ( , jqtransform), display:none position:absolute left: -10000px, display:relative left:auto. , script, . , , .

Answer 5

, , , . ?

$('#advanceSearchButton').click(function(){    
    $('#AdvanceSearch').show('slow', function(){
        $('form.jqtransform').jqTransform(); 
    });
});

, #AdvanceSearch, : none .

Update: , ? .

$('#advancedSearchWrap').slideToggle(250, function(){
    $('form.jqtransform').jqTransform({ imgPath: 'asp path' }); 
    return false; 
}); 

.

Answer 6

, , , , jquery.jqtransform.js, .., , div .

jquery , div "filterContents".

$(".filterContents").hide(); 
}); /* End Form each */

, .

Answer 7

, display:none visibility:hidden.

Answer 8

, , -.

display:none CSS, , height:0;overflow:hidden.

, js animate slideToggle, , . :

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

. #showAdvaced - , #sfBlock03 - div, .

, .

Answer 9

, Ive - csTransPie - jqtransform - jqtransform - , , css3 , , https://github.com/pkoretic/csTransPie

, , jqtransform ( css , , css...)

!

!

Answer 10

, , :

$(".open_my_popup").click(function(){
    $(".popup").fadeIn(200); //the popup part

//the recalculation part for jqtransform
    $(".jqTransformSelectWrapper").each(function(){ //remember to relaculate for each select! not for all at once, cause this will return problems
        var items = $(this).find("li").length
        var height = $(this).find("ul li > a").height(); //corresponds with css .jqTransformSelectWrapper ul a height
        var list = $(this).find("ul");
        list.css("height",(items*height)+"px");
    });
});

You also need to remember that in jqtransform.css the binding element should be described as follows:

.jqTransformSelectWrapper ul a {
    display: block;
    padding: 0 5px;
    text-decoration: none;
    color:#333;
    background-color: #FFF;
    font-size: 12px;
    line-height:22px !important;
    height:22px !important;
}

By default, jqTransform styles have: padding: 5px; - and thanks to this addition, the text is centered vertically in the li element, it needs to be changed, as I did, using the height and height of the line, because otherwise you will not recalculate the correct height for an unordered list that contains all the elements.