Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.05.2016, 14:22
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

Поясните что делает функция
Добрый день. Сам верстальщик немного понимаю понимаю яваскрипт. сейчас стала задача, есть карта гугл 100% ширина и на ней маркер с координатами. Все это дело расположено по центру(маркер). Но над картой есть еще блок с контактами его размер 50% он закрывает маркер (то-есть у этого блока контактов есть кнопка свернуть событие .click вызывает фукцию происходит добавление класса или заменение и блок контакты сворачивается) и маркер становится видно как и должно быть. Проблема в том, что при открытом блоке контакты карта должна смещаться что-бы маркер был виден.
Ребята подскажите пожалуйста как это можно реализовать очень нужно
вот фукция
google.maps.event.addDomListener(window, "load", e), $(".contacts-left__close-button").click(function() {
        $(".contacts-left").toggleClass("g-mini"), $(".contacts-left__content-wrap").hasClass("g-hide") ? $(".contacts-left__content-wrap").delay(200).show(100).removeClass("g-hide") : $(".contacts-left__content-wrap").hide(100).addClass("g-hide"), $(this).toggleClass("rotate-close")
    })

Вообщем короче поставил карту 60% (при помощи добавления класса .s-contacts-map) как мне при помощи JS отловить класс g-mini и удалить в css либо изменить эти 60% или просто удалить тот класс который я добавил в css?

Последний раз редактировалось orange8031, 05.05.2016 в 17:03. Причина: Немного изменить
Ответить с цитированием
  #2 (permalink)  
Старый 05.05.2016, 16:29
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

orange8031,
Покажите html там, где
<div id="map_canvas"
и что над ним?
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2016, 16:46
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

посмотрите пожалуйста
<section class="s-contacts" id="contact">
			<div id="map" class="s-contacts-map"></div>
			<div class="contacts-left">
				<div class="contacts-left__content-wrap">
					<h2 class="s-contacts__title">Как добраться</h2>
					<div class="s-contacts__info-wrap">
						
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__info"></p>
<p class="s-contacts__phone"></p>
<p class="s-contacts__phone"></p>
<p class="s-contacts__phone"></p>

					</div>
				</div>
				<div class="contacts-left__close-button">&lt;</div>
			</div>
		</section>

Последний раз редактировалось orange8031, 05.05.2016 в 19:08.
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2016, 17:09
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

orange8031,
а сам <div id="map_canvas" как прописан?
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2016, 17:16
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

$(document).ready(function() {
    function e() {
    	var myLatLng = {lat: 50.378708, lng: 30.441869};
        var e = document.getElementById("map"),
            t = {
                center: myLatLng,
                zoom: 15,
                scrollwheel: !8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var gmap = new google.maps.Map(e, t);

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: gmap,
          title: 'SmartKart'
        });        
        marker.setMap(gmap);
        

        var contentString = '<div id="gmap_content">'+
	            '<h2 style="margin: 50px 0 25px 0; padding-top: 0px;" class="firstHeading"></h2>'+
	            '<div id="bodyContent">'+
		            '<p><p>' +
		            '<p><p>' +
		            '<p>Время работы:<p>' +
		            '<p style="padding-left: 15px;">ПН-ПТ – 12:00 – 23:00<p>' +
		            '<p style="padding-left: 15px;">СБ-ВС – 09:00 – 23:00<p>' +
	            '</div>'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });

        marker.addListener('click', function() {
          infowindow.open(gmap, marker);
        });

    }

Последний раз редактировалось orange8031, 05.05.2016 в 19:10.
Ответить с цитированием
  #6 (permalink)  
Старый 05.05.2016, 18:26
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

orange8031,
Я имел в виду именно html
<div id="map_canvas" как прописан?
Цитата:
Вообщем короче поставил карту 60% (при помощи добавления класса .s-contacts-map)
к чему добавлен класс .s-contacts-map? и что в нем прописано?

Цитата:
при помощи JS отловить класс g-mini и удалить в css
По какому событию? У всех элементов, у которых есть этот класс?

Последний раз редактировалось Dilettante_Pro, 05.05.2016 в 18:34.
Ответить с цитированием
  #7 (permalink)  
Старый 05.05.2016, 19:16
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

Canvas нет нигде выше я исправил код. Я мне нужно удалить класс .s-contacts-map только если в коде в HTML добавляется класс .contacts-left g-mini а добавляется он в этой функции насколько я понимаю это не важно,
google.maps.event.addDomListener(window, "load", e), $(".contacts-left__close-button").click(function() {
        $(".contacts-left").toggleClass("g-mini"), $(".contacts-left__content-wrap").hasClass("g-hide") ? $(".contacts-left__content-wrap").delay(200).show(100).removeClass("g-hide") : $(".contacts-left__content-wrap").hide(100).addClass("g-hide"), $(this).toggleClass("rotate-close")
    })
Ответить с цитированием
  #8 (permalink)  
Старый 06.05.2016, 11:47
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

orange8031,
Почитал вашу переписку c рони и предлагаю посмотреть такой пример - это не точно ваша проблема, но макет для размышления, кликайте по синему полю
<!DOCTYPE html>
<html>

<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>

html, body {height:100%;}
#header 
{   position: absolute;
    background-color: blue;
    width:100%;
    }
#map  
{   position:relative;
    height: 60%;}
.m-topb {top:20%;}
.m-topm {top:60%;}
    
.h-big {height: 60%;}
.h-mini {height: 20%;} 
       
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
    $(document).ready(function () {
        function e() {
            var myLatLng = { lat: 50.378708, lng: 30.441869 };
            var e = document.getElementById("map"),
            t = {
                center: myLatLng,
                zoom: 15,
                scrollwheel: !8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var gmap = new google.maps.Map(e, t);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: gmap,
                title: 'SmartKart'
            });
            marker.setMap(gmap);
            var contentString = '<div id="gmap_content">' +
	            '<h2 style="margin: 50px 0 25px 0; padding-top: 0px;" class="firstHeading"></h2>' +
	            '<div id="bodyContent">' +
		            '<p><p>' +
		            '<p><p>' +
		            '<p>Время работы:<p>' +
		            '<p style="padding-left: 15px;">ПН-ПТ – 12:00 – 23:00<p>' +
		            '<p style="padding-left: 15px;">СБ-ВС – 09:00 – 23:00<p>' +
	            '</div>' +
            '</div>';

            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

            marker.addListener('click', function () {
                infowindow.open(gmap, marker);
            });
        }
        google.maps.event.addDomListener(window, 'load', e);
        $('#header').addClass('h-big');
        $('#map').addClass('m-topm');
        $('#header').on('click', function () {
            $(this).toggleClass('h-big h-mini');
            $('#map').toggleClass('m-topm m-topb');
        });

    });
</script>
</head>
<body>
  <section>
  <div id="header"></div>
  </section>
<div id="map" ></div>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 06.05.2016, 20:28
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

Спасибо за помощь и вообще... Вопрос решил вот так
$(".contacts-left__close-button").click(function() {
        $("#map").toggleClass("s-contacts-map")
    });
Ответить с цитированием
  #10 (permalink)  
Старый 06.05.2016, 20:28
Интересующийся
Отправить личное сообщение для orange8031 Посмотреть профиль Найти все сообщения от orange8031
 
Регистрация: 05.05.2016
Сообщений: 24

И то не я а помогли
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите, что делает (как работает) данный скрипт. aratkevich Ваши сайты и скрипты 5 31.08.2015 22:20
Функция для работы с массивами reduce sphere89 Общие вопросы Javascript 1 30.03.2014 05:24
Что такое функция callback() ? iNfantry Общие вопросы Javascript 13 19.01.2013 14:28
Поюзайте хомячка Nanto Ваши сайты и скрипты 30 06.06.2011 22:16
что делает этот скрипт?)) jek Общие вопросы Javascript 5 10.01.2010 17:24