Элемент боковой панели автопрокрутки

Интересно, может ли кто-нибудь помочь мне, пожалуйста.

Я относительно новичок в программировании на JavaScript, поэтому прошу проявить терпение.

Я создал эту страницу, которая позволяет пользователям добавлять или удалять Google Маркеры карты с помощью флажка «Категория маркеров». В дополнение к добавлению и удалению соответствующих маркеров с карты, описание каждого маркера добавляется или удаляется из боковой панели; который показан оранжевым текстом.

Если пользователь щелкнет элемент «Боковая панель», отобразится информационное окно для соответствующего маркера, и если маркер выбран, соответствующее описание в списке боковой панели будет выделено серым фоном.

Моя проблема заключается в том, что если пользователь выбирает маркер на карте, боковая панель не прокручивается автоматически до соответствующего элемента списка, как показано в примере на эта страница.

Я использую сторонний скрипт для создания полосы прокрутки, которая показана в коде ниже:

<script>
        (function($){
            $(window).load(function(){
                $("#sidebar").mCustomScrollbar({
                    scrollButtons:{
                        enable:true
                    }
                });
                //ajax demo fn
                $("a[rel='load-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").html(data); //load new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content
                        $("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top
                    });
                });
                $("a[rel='append-content']").click(function(e){
                    e.preventDefault();
                    var $this=$(this),
                        url=$this.attr("href");
                    $.get(url,function(data){
                        $("#sidebar .mCSB_container").append(data); //append new content inside .mCSB_container
                        $("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly appended content
                    });
                });
            });
        })(jQuery);
</script>

и это раздел кода, который связывает маркер карты и элемент боковой панели.

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  infowindow.open(map,marker); 
});

Я попытался поместить элемент overflow в обе области, надеясь, что это решит проблему. Кроме того, я также пропустил следующие строки, чтобы посмотреть, смогу ли я найти решение:

$("#sidebar").mCustomScrollbar("update"); //update scrollbar according to newly loaded content                          
$("#sidebar").mCustomScrollbar("scrollTo","top"); //scroll to top

К сожалению, мои попытки не решили проблему.

Мне просто интересно, может ли кто-нибудь посмотреть на это, пожалуйста, и дайте мне знать, где я ошибаюсь.

Большое спасибо и с уважением


javascript sidebar google-maps-api-3 autoscroll
person IRHM    schedule 29.09.2012    source источник
comment
Было бы полезно, если бы у вас была ссылка на ваш сайт   -  person david strachan    schedule 29.09.2012
comment
Привет @davidstrachan, большое спасибо, что нашли время ответить на мой пост. Приношу свои извинения, если я не ясно выразил это в своем первоначальном посте. Но я предоставил ссылку на указанную страницу, но, пожалуйста, найдите эту ссылку еще раз. mapmyfinds.co.uk/chris/test.php Большое спасибо и с уважением   -  person IRHM    schedule 30.09.2012

Ответы (2)


arrow_upward
1
arrow_downward

Просто добавьте следующую строку в обработчик события щелчка маркера:

$("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");

поэтому ваш код будет выглядеть так:

google.maps.event.addListener(marker, 'click', function() { 
  infowindow.setContent(contentString);
  $("#sidebar a").css('background-color','');//remove sidebar links back colors
  sidebarlink = $("#sidebar a:contains('"+marker.mydescription+"')");
  sidebarlink.css('background-color','#DADADA');
  $("#sidebar").mCustomScrollbar("scrollTo","a:contains('"+marker.mydescription+"')");
  infowindow.open(map,marker); 
});

который должен прокручиваться до элемента, по которому вы щелкнули.

person Nelson    schedule 07.10.2012
comment
Привет @Nelson, я действительно не могу выразить, насколько я благодарен за это. Это совершенно удивительно, и огромный груз не в моей голове. Ты больше всего заслуживаешь награды, и когда истечет срок, я награжу тебя ею. Большое спасибо за все ваши хлопоты и усилия. С уважением - person IRHM; 08.10.2012
comment
Спасибо @IRHM, я рад, что смог помочь с вашей проблемой :-) - person Nelson; 08.10.2012

arrow_upward
0
arrow_downward

Попробуйте добавить одну строку в функцию обработчика событий:

google.maps.event.addListener(marker, 'click', function() { 
//......
  map.setCenter(marker.getPosition()); // <---Add this line
  infowindow.open(map,marker); 
});
person Marcelo    schedule 30.09.2012
comment
Привет @Marcelo, спасибо, что нашли время ответить на мой пост и предложить решение. К сожалению, хотя я добавил код, который вы предлагаете. Это не решает проблему. Я запустил код через консоль JavaScript, и, к сожалению, не было показано ошибки, которая могла бы точно указать, где была проблема. Большое спасибо и с уважением. - person IRHM; 30.09.2012