Changes between Initial Version and Version 1 of Ticket #8875


Ignore:
Timestamp:
Nov 30, 2012, 3:57:04 PM (10 years ago)
Author:
Scott González
Comment:

Legend:

Unmodified
Added
Removed
Modified

  • Ticket #8875 – Description

    initial v1  
    1 Under 1.9.2 CSS, when the number of results from autocomplete exceeds max-height AND the user scrolls down the result list, whenever the mouse hovers over a result item the result list jumps back to the top making it impossible to scroll down and select an item from the list.
    2 
    3 I removed jquery-ui-1.9.2.custom.min.css and replaced it with jquery-ui-1.8.23.custom.css and the problem went away.
    4 
    5 Pertinent code is below:
    6 
    7 
    8 {{{
    9 $('#search').autocomplete({
    10                         source: "<?php echo Router::url(array('controller' => 'Residents','action' => 'Search')); ?>",
    11                         minLength: 2,
    12                         select: function( event, ui ) {
    13                                 var ResidentControllers = new Array(
    14                                         "Residents","Accounts","EmergencyContacts","Notifications","TransportationPasses"
    15                                 );
    16                                 var controller = "<?php echo $this->name; ?>";
    17                                 var action     = "<?php echo $this->action; ?>";
    18                                 if(ResidentControllers.indexOf(controller) != -1){
    19                                         location.href="<?php echo Router::url(array('controller' => '"+controller+"','action' => '"+action+"')); ?>/"+ui.item.value;
    20                                 }else{
    21                                         location.href="<?php echo Router::url(array('controller' => 'Residents','action' => 'Edit')); ?>/"+ui.item.value;
    22                                 }
    23                                 return false;
    24                         },
    25                         open: function(){
    26                         $(this).autocomplete('widget').css('z-index', 9999999999999999);
    27                         return false;
    28                     }
    29                 }).data("autocomplete")._renderItem = function(ul, item){
    30                         if(item.value){
    31                         var imageUrl = "<?php echo $this->Html->webroot('img/residents/'); ?>";
    32                         return $( "<li></li>" )
    33                                         .data( "item.autocomplete", item )
    34                                         .append(
    35                                                 "<a class=\"uiasearchitem\" style=\"float:left;\">"+
    36                                                         "<div style=\"float:left;\">"+
    37                                                                 "<img class=\"avatar\" width=\"80px\" height=\"60px\" src=\""+imageUrl+item.filename+"\" />"+
    38                                                         "</div>"+
    39                                                         "<div class=\"username\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.name+"</div>"+
    40                                                         "<div class=\"laststay\" style=\"font-size:10px;float:left;clear:right;width:240px;\">"+item.last_stay+"</div>"+
    41                                                         "<div class=\"bars\"     style=\"font-size:10px;float:left;clear:right;width:240px;\">No Bars</div>"+
    42                                                 "</a>"
    43                                         ).appendTo( ul );
    44                         }else{
    45                                 return $( "<li></li>" )
    46                                         .data( "item.autocomplete", item )
    47                                         .append(item.message)
    48                                         .appendTo( ul );
    49                         }
    50         };
    51 }}}
     1Hovering over the very top or bottom of a scrollable suggestion list (using max-height) causes the menu to scroll. This is visible in the maxheight demo.