Yusnee Yusnee - 2 months ago 9
CSS Question

Show hidden item inside scroll dynamically

I have a webpage that contain a google map with many markers on the left side, and HTML table on the right side that represents all marker position and country name (inside label tag). The table use max-height and auto-scroll css, so some items in the table is invisible inside the scroll.

When I mouse-over/mouse-out the country name, the related marker is animated. Vice versa, when I mouse-over/mouse-out the marker, then the related country name in the table change the label color class.

By mouse-over/mouse-out the marker, the related item in the table that hidden inside the scroll can not be seen.

Is there any way to dynamically show the hidden item in the table that invisible inside scroll when the related marker is mouse-over? Or maybe dynamically auto scroll to show the item?

my script :

function MarkerToTableHover(marker) {
marker.addListener("mouseover", function(event) {
var link_id = parseInt(marker.id);
$("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning');
});
marker.addListener("mouseout", function(event) {
var link_id = parseInt(marker.mid);
$("#table_selection label[data-id='" + link_id + "']").removeClass('label-warning').addClass('label-info');
});
}


My table :

<div style="max-height: 250px; overflow: auto">
<table id="table_selection" class="table table-striped table-bordered ">
<thead>
<tr>
<th >No</th>
<th >Country</th>
<th >State</th>
<th >City</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!--dynamically append-->
</tbody>
</table>
</div>

Answer

You should create an id for your div tag :

<div id="scroll_table" style="max-height: 250px; overflow: auto"> 

and because I think that in your table you have only label-warning once at a time during hover/mouseover, then you can add this script to show the item

        marker.addListener("mouseover", function(event) { 
         var link_id = parseInt(marker.id); 
         $("#table_selection label[data-id='" + link_id + "']").removeClass('label-info').addClass('label-warning'); 

     // add this line :
        $("#scroll_table").scrollTop($("#scroll_table").scrollTop() + $("#scroll_table ,label-warning").position().top);                

         }); 

hope will help