Search the Community

Подскажите пожалуйста, как правильно сделать кастомный список стран используя API. Вот fetch код: const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами. Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.

Доброго времени суток! Суть проекта: очень кратко: что-то вроде аггрегатора хостинг провайдеров. На самом деле это только звучит не особо, но по факту все намного интересней. Проект готов на 20-25%. В команде есть сильный и опытный back-end разработчик, дизайнер и маркетолог-идеолог Но у нас демократия: каждый делится своими мыслями как сделать продукт лучше. Есть потенциальные клиенты, которые готовы опробовать продукт и в дальнейшем им пользоваться, покупая ежемесячную подписку. Главная задача: выход на минимально живой продукт. Как только мы выйдем на MVP будет понятно насколько проект коммерчески успешен или неуспешен. В случае успеха (когда продажи пойдут) начинаем этап привлечения инвестиций. Кандидаты-инвесторы есть. В случае провала - расходимся и каждый может использовать проект в качестве портфолио, так как при любом исходе им будут пользоваться. Кого ищем: front-end разработчик с опытом работы с: - React (Redux) - Django - RESTApi - SASS - Git Желателен опыт работы от 2-3 лет и возможность посвящать проекту хотя бы 10-12 часов в неделю. Условия работы: - доля в компании 5-10% - доля в компании менее 5%, но с оплатой, небольшой, так как мы еще только проверяем гипотезу и платить будем из своего кармана. Этот проект может быть интересен тем, кто хочет влиться в интересный проект, возглавить его и научиться чему-то новому или просто взять долю и получать с нее доход, либо продать. Также, тем, кому нужно интересное портфолио. Если есть интерес, прошу свяжитесь со мной: https://t.me/Eugen2k

Стала задача написать отправку писем всем контактам скайпа. нашел библиотеку Skype4COM. Письмо в скайп отправляется на половину, оно появляется у меня в отправленных, но светится серым, как будто готовится к отправки

Привет всем. У меня проблемы с простой задачей. Есть одностраничный сайт. Пользователь нажимает на ссылку меню, которая обрабатывается функцией Js. Эта функция асинхронно загружает содержимое страницы и изменяет URL с помощью history.pushState (). Например было "example.com" => после клика "example.com/page1" Затем пользователь обновляет страницу, но такого файла, не существует на сервере. Как решить эту проблему? Вот пример Вот страница с пояснениями, но примера обработки обновления страницы там нет. У них в примере, после обновления открывается страница с тем же контентом, что было до перезагрузки и с тем же url. Говорят, что нужно решать как-то с помощью php, но я затрудняюсь.

Здравствуйте. Есть необходимость создать смену контента в зависимости от местоположения пользователя, а также передвинуть значок на карте. С контентом мне понятно, вроде ничего сложного. Но с картой ни разу не занималась, хочу спросить хорошее решение для этого. Использую Google Maps Api. Еще, есть ли возможность менять все вместе - и контент, и карту? CMS - Wordpress. http://wingchung.com.ua/

Здравствуйте! Подскажите, пожалуйста, что не так делаю?.. Почему-то пишет что функция setMap не определена (здесь 37 строка в js коде)! var o = document.getElementById("map-canvas");if (o) { //карта mapCenter = new google.maps.LatLng(56.528960, 84.967544); var mapOptions = { zoom: 15, center: mapCenter, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); //элементы var li_points = $('#map-points').find('li'), options = [], pLatLng = []; if (li_points.length > 0) { li_points.each(function(i){ var $pt = $(this); if ($pt.data('x') && $pt.data('y') && $pt.data('type')) { pLatLng[i] = new google.maps.LatLng($pt.data('x'), $pt.data('y')); options[i] = { id: i, map: map, latLng: pLatLng[i], className: 'map-marker ' + $pt.data('type') } } }); } for (var i in options) { function MapMarker(options) { this.latLng = options.latLng; this.map = options.map; this.className = options.className; this.id = options.id; this.content = ''; this.setMap(options.map); } var marker = new MapMarker(options[i]); //действие при клике var markers = []; markers[marker.id] = marker; $(document).on('click', '.map-marker', function() { console.log(marker.id); }); MapMarker.prototype = new google.maps.OverlayView(); MapMarker.prototype.draw = function() { var me = this; var div = this.div_; if (!div) { div = this.div_ = document.createElement('div'); div.id = this.id; div.className = this.className; var panes = this.getPanes(); panes.overlayImage.appendChild(div); } var point = this.getProjection().fromLatLngToDivPixel(this.latLng); if (point) { div.style.left = point.x - 20 + 'px'; div.style.top = point.y - 55 + 'px'; } }; }}<div id="map-canvas"></div><ul id="map-points"> <li data-x="56.528960" data-y="84.967544" data-type="running">Point 1</li> <li data-x="57.528960" data-y="83.967544" data-type="running">Point 2</li></ul>body {margin: 0;}#map-canvas { width: 100%; height: 100vh; margin: auto;}#map-points {display: none;}.map-marker.running {background-image: url(http://d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);}.map-marker { width: 45px; height: 45px; background: #485F6E center no-repeat; background-size: 80%; position: relative; z-index: 30; cursor: pointer;}.map-marker:after { position: absolute; left: 50%; bottom: -8px; ; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #485F6E; content: " ";}.map-marker:hover { background-color: #39c360; transition: 0.3s background-color;}.map-marker:hover:after { border-top-color: #39c360; transition: 0.3s border-top-color;} Только не ругайтесь за мой корявый код.. Только начинаю..

Привет всем! Есть две карты на одной странице, на первой одна метка, на второй их пять Вопрос, как сделать к каждому маркеру свое инфоокно, чтобы они были всегда на виду, т.е. списком сбоку и когда на маркер нажимаешь, подсвечивается соответствующее инфоокно. И смена маркера при его выборе. Спасибо. <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript"> // When the window has finished loading create our google map below google.maps.event.addDomListener(window, 'load', init); function init() { // Basic options for a simple Google Map // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions var pos1 = new google.maps.LatLng(59.921090, 30.343043);//SpB var pos2 = new google.maps.LatLng(55.7695689, 37.6226591); var pos3 = new google.maps.LatLng(55.7379675, 37.625534); var pos4 = new google.maps.LatLng(55.7580242, 37.5633864); var pos5 = new google.maps.LatLng(55.7387458, 37.6552768); var pos6 = new google.maps.LatLng(55.7387478, 37.6549528); ///SPB MAP ============================================================================= var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 17, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(59.921090, 30.343043), // SpB mapTypeId: google.maps.MapTypeId.ROADMAP, // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map_spb'); // Create the Google Map using our element and options defined above var map = new google.maps.Map(mapElement, mapOptions); var image = 'images/beachflag.png'; ///MSK MAP ============================================================================= var mapOptions2 = { // How zoomed in you want the map to start at (always required) zoom: 12, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(55.772153, 37.622246), // SpB mapTypeId: google.maps.MapTypeId.ROADMAP, // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map_msk'); // Create the Google Map using our element and options defined above var map2 = new google.maps.Map(mapElement, mapOptions2); var image2 = 'images/beachflag_a.png'; // Let's also add a marker while we're at it var marker = new google.maps.Marker({<!-- position: new google.maps.LatLng(59.921090, 30.343043), --> position: pos1, map: map, title: 'Текст', icon: image }); var marker = new google.maps.Marker({ position: pos2, map: map2, title: 'Текст', icon: image2 }); var marker = new google.maps.Marker({ position: pos3, map: map2, title: 'Текст', icon: image2 }); var marker = new google.maps.Marker({ position: pos4, map: map2, title: 'Текст', icon: image2 }); var marker = new google.maps.Marker({ position: pos5, map: map2, title: 'Текст', icon: image2 }); var marker = new google.maps.Marker({ position: pos6, map: map2, title: 'Текст', icon: image2 }); // Creating an InfowWindow var infowindow = new google.maps.InfoWindow({ content: 'Hello world' }); // Adding a click event to the marker google.maps.event.addListener(marker, 'click', function() { // Opening the InfoWindow infowindow.open(map2, marker); }); }</script>

Всем добра столкнулся с такой проблемой. Нужно подключить виджет vk "Мне нравится" то есть на страничке их будет много для каждого товара свой. пока делаю так: js class function VKApiLike(option){ this.option = $.extend({ apiId: '', postId: '', postDivId: '', widthButtonLike: 210, heightButtonLike: 18, pageTitleLike: '', pageDescriptionLike: '', type: 'full', pageUrl: '', pageImage: '', verb: 0, onlyWidgets: true, addButtonLike: 'tooltip-like', likePost: 'actionBox' },option); this.vkInit = function(){ VK.init({ apiId: XXXXX, onlyWidgets: true }); }; this.addWidget = function(){ var self = this; VK.Widgets.Like(self.option.postDivId, { width: self.option.widthButtonLike, height: self.option.heightButtonLike, type: self.option.type, pageTitle: self.option.pageTitleLike, pageDescription: self.option.pageDescriptionLike, pageUrl: self.option.pageUrl, pageImage: self.option.pageImage, verb: self.option.verb }, self.option.postId); }; this.addLikePost = function(id) { var self = this; VK.Observer.subscribe("widgets.like.liked", function f(e) { console.log(id); }); }; this.init = function(){ this.vkInit(); this.addWidget(); return this; }; return this;инициализация самого виджета мне нравиться var vkLike_1 = new VKApiLike({ postDivId: 'vk_like', width: 210, height: 24, type: 'button', pageTitle: 'Brand 2', pageDescription: 'Brand 2 description', pageUrl: 'http://test.test.com/1', pageImage: '/resources/images/test1.png', verb: 1, postId: 321 }).init(); vkLike_1.addLikePost('321');var vkLike_2 = new VKApiLike({ postDivId: 'vk_like2', width: 210, height: 24, type: 'full', pageTitle: 'Brand 2', pageDescription: 'Brand 2 description', pageUrl: 'http://test.test.com/2', pageImage: '/resources/images/test2.png', verb: 0, postId: 322 }).init(); vkLike_2.addLikePost('322');.........если человек лайкнул наступает событие "widgets.like.liked" но это событие срабатывает для всех виджетов на странице this.addLikePost = function(id) { var self = this; VK.Observer.subscribe("widgets.like.liked", function f(e) { console.log(id); }); };Вопрос вот в чем. Как мне отследить какой именно товар лайкнул юзер, (ккаой postId)? в event приходит только количество лайков.

Столкнулся с любопытным случаем. Задача проста: получить объекты пользователей по строке поиска. Решение: метод users.search. Для него есть параметр "q" - question, query от чего они там сокращали. Результат: возвращается у меня топ пользователей или случайный их набор, независимо от строки поиска. Распечатал запрос, выполнил в браузере - тоже самое, все равно идет топ. Проверил запрос, вроде все на месте - параметр, кодированная с латиницы строка, токен. К счастью, проблема нашлась почти сразу и была очень глупой. Символы "q" и "g" при беглом взгляде на строку запроса (маленький шрифт) выглядят похоже. Как я умудрился туда засунуть "g" - не знаю, но факт - ошибки нет и ответ есть. Наверное, ближе к вечеру с включением ступора мозга это могло бы серьезно напрячь, ведь результаты-то запроса идут и логично, что сервер сообщит о неверном параметре)) В данном случае у меня было поле класса "g". Просто заменив его на правильный символ из вкapi ide быстро подсветила ошибки и все стало ясно, а вот если бы я формировал запрос из сегментов - нужно было бы заменить, сделать запрос и посмотреть еще ответ. С "q" все стало на свои места и вернулись искомые пользователи. Мда, что может вытворять внимательность и как легко затупить даже на ровном месте