0
Привет всем, у меня есть следующий код, который должен сместить div поверх карты google, чтобы отобразить информацию о местоположении.jquery panel slide Out и In + прокрутка
Однако, похоже, он вообще не хочет скользить. Как только он нажал на тестовую кнопку , нажмите, чтобы открыть панель, она просто кажется на месте вместо того, чтобы вставлять/выходить. Кажется, что это тоже испортило мою прокрутку для этого div. Я больше не могу прокручивать информацию, используя панель прокрутки overflow-x.
Она должна скользить в правой стороне в углу, как показано здесь на картинке:
$(document).ready(function() {
load();
$('#click').click(function() {
$('.slider').toggle("slide", {
direction: "left",
distance: -180
}, 500);
});
});
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40, -100),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
И в HTML для него:
<div>
<div align="center" id="zipBox">
Zip code: <input type="text" id="addressInput" size="10" style="border: solid 1px #000000; width: 40px;" maxlength="5" />
Radius: <select id="radiusSelect" style="border: solid 1px #000000;">
<option value="5" selected="selected">05 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
<option value="25">25 miles</option>
<option value="30">30 miles</option>
<option value="40">40 miles</option>
<option value="50">50 miles</option>
<option value="60">60 miles</option>
<option value="70">70 miles</option>
</select>
<input type="button" id="searchButton" value="Search" style="border: solid 1px #000000;" />
</div>
<div>
<select id="locationSelect" style="width:100%;visibility:hidden"></select>
<div align="right" class="slider">
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
<p align="center">
<div dir='ltr' align="center">
<strong>Event Location:</strong><br>
This is the event name here!<br>
1510 E Woodlands St
</div>
<div align="center" style="border-bottom: 1px solid #CCC;">
<strong>Event Dates/Times:</strong><br>
11/25/2014 @ 10:00AM
</div>
</p>
</div>
</div>
<div id="mapAndInfo">
<div id="map" style="width: 800px; height: 600px"></div>
</div>
<div id="click" style="background: #000; color: #fff; width: 300px; height: 30px;">click to slide panel
</div>
</div>
и теперь CSS:
body {
overflow-x: hidden;
margin:0px;
padding:0px;
}
#zipBox {
position: absolute;
margin-top: 598px;
width: 798px;
z-index: 10000;
border: 1px solid #CCC;
background: rgb(255,255,255);
background: transparent\9;
background: rgba(255,255,255,0.3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
}
.slider {
position: absolute;
z-index: 10002;
width: 170px;
height: 590px;
left: 320px;
border: solid 1px #CCC;
padding: 5px;
right: -280px;
overflow: scroll;
overflow-x: hidden;
background: rgb(255,255,255);
background: transparent\9;
background: rgba(255,255,255,0.8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
display: none;
}
Проверьте его JSFiddle!
Это не совпадает теперь с картами Google DIV. Он будет располагаться в правой части экрана, а не поверх области карт Google. – StealthRT
Ах, забыл добавить UI js. Спасибо, боюсь! – StealthRT
Просто играйте с левыми и правыми свойствами, затем до тех пор, пока div не окажется там, где вы этого хотите. Я просто не понял, зачем вам это нужно: left: 320' и 'right: -280'. – bowheart