Databases
StackOverflow2013
Postsdbo
POJquery ui multiselect widget slow scrolling in IE
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery ui multiselect widget slow scrolling in IE
    primarykey
    data
    text
    <p>I am using jquery ui multiselect widget on a page which has been constructed with jquery ui layout plugin. a portion(or rather a sub-pane) of the page which contains this widget is scrollable. so when i click on the multiselect it opens the dropdown. now when i start scrolling with dropdown still open, the dropdown stays in it's position and thus gets detached from the dropdown button. To fix this i added a function on scroll event of that div. it fixes this issue but kills the scroll performance in IE, the code is as follows</p> <pre><code>function initializeMultiSelect() { $('.dropdown').multiselect({ multiple: false, // header: 'Select an option', noneSelectedText: '-Select an option-', autoOpen:false, selectedList: 1 }).multiselectfilter(); $('.multidropdown').multiselect({ header: '&lt;a class="ui-multiselect-none" href="#"&gt;&lt;span class="ui-icon ui-icon-closethick"&gt;&lt;/span&gt;&lt;span&gt;Uncheck All&lt;/span&gt;&lt;/a&gt;', noneSelectedText: "Select one or more", autoOpen:false, selectedList:25 }).multiselectfilter(); } function initializeMultiselectFix() { $(".center-center-center").scroll(function() { if($('#currentSelectedTab').val() == 1 || $('#currentSelectedTab').val() == 2 || $('#currentSelectedTab').val() == 4 ) { $(".ui-multiselect-menu:visible").hide(); $(".ui-multiselect:visible").removeClass('ui-state-active'); $(".ui-datepicker:visible").hide(); $(".ui-autocomplete:visible").hide(); &lt;%--if ($(".ui-multiselect-menu").css('display', 'block')) { $(".ui-multiselect-menu").hide(); $(".ui-multiselect").removeClass('ui-state-active'); } if ($(".ui-datepicker").css('display', 'block')) { $(".ui-datepicker").hide(); } if ($(".ui-autocomplete").css('display', 'block')) { $(".ui-autocomplete").hide(); } --%&gt; } }); } </code></pre> <p>This detachment problem can be seen here :http://layout.jquery-dev.net/demos/datepicker.html click in the textbox and then scroll.</p> <p>please point me in the right direction..</p> <p>Edit: Alright, so i finally fixed the problem. I decided instead of manually hiding the menu on scroll event, let's fix the plugin itself. So what i did was something like this.</p> <p>i modified the plugin to attach the select menu to append the menu to the parent div instead of document body(which is the default behavior) </p> <p>in the _create function </p> <pre><code>menu = (this.menu = $('&lt;div /&gt;')) .addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all') .addClass( o.classes ) .appendTo( o.elementToAttach ), </code></pre> <p>and then i passed the elementToAttach property in the options array like this:</p> <pre><code> $('#dropdown').multiselect({ elementToAttach:$('#dropdown').parent() }); </code></pre> <p>So this fixed a part of the problem, now select menu was scrolling with the div but it wasn't positioned under the dropdown button.</p> <p>To fix this positioning issue i modified the open function()(which is supposed to open the select menu.)... of the multiselect, I noticed the position is being calculated using the offset() method which calculates the coordinates relative to the document, but here we want the position relative to the parent so i changed the function to position(), something like this</p> <pre><code> open: function( e ){ var self = this, button = this.button, menu = this.menu, speed = this.speed, o = this.options; // bail if the multiselectopen event returns false, this widget is disabled, or is already open if( this._trigger('beforeopen') === false || button.hasClass('ui-state-disabled') || this._isOpen ){ return; } var $container = menu.find('ul').last(), effect = o.show, //the change pos = button.position(); </code></pre> <p>so everything is working fine now, hope this helps someone</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USvijay tyagi
    1. USvijay tyagi
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery ui multiselect widget slow scrolling in IE
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POJquery ui multiselect widget slow scrolling in IE
      1. USChaya Cooper
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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