Здравствуйте! Подскажите, пожалуйста, как получить ширину div class="my" с красной рамкой? По умолчанию ширина устанавливается auto. Необходимо это для того, чтобы затем сместить div влево на половину найденной ширины.
https://jsfiddle.net/xhypqwLt/
$('.my').width() возвращает null. Очевидно, этот div еще не загрузился.
И вообще возможно работать со стилями с помощью JQuery?
ymaps.ready(function () {
var map = new ymaps.Map('map', {
center: [55.7, 37.6],
zoom: 10,
controls: []
});
// Создание метки с круглой активной областью.
var circleLayout = ymaps.templateLayoutFactory.createClass('<div class="placemark_layout_container"><div class="my">1.5M</div><div class="circle_layout"></div></div>');
var circlePlacemark = new ymaps.Placemark(
[55.783202, 37.605584], {
hintContent: 'Метка с круглым HTML макетом'
}, {
iconLayout: circleLayout,
iconShape: {
type: 'Circle',
coordinates: [0, 0],
radius: 25
}
}
);
map.geoObjects.add(circlePlacemark);
});
html, body, #map {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.placemark_layout_container {
position: relative;
font-family: Georgia;
font-size: 20px;
text-align: center;
font-weight: bold;
}
/* Круглый макет метки */
.circle_layout {
background-color: white;
position: absolute;
left: -10px;
top: -10px;
width: 20px;
height: 20px;
border: 2px solid #225D9C;
color: #225D9C;
line-height: 46px;
/* Это CSS свойство не будет работать в Internet Explorer 8 */
border-radius: 50px;
}
.my {
display:block;
position:absolute;
width:auto;
border:2px solid #ff0000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Пример задания своих HTML макетов меток со своими фигурами активных областей</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="//api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>
<script src="placemark_shape.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
</body>
</html>