|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
02.05.2016, 11:34 | #1 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Как сделать фул-скрин во весь экран на JS
Приветствую!
Есть такой код Код HTML:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(57.0442, 9.9116); var settings = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map(document.getElementById("map_canvas"), settings); } </script> <body onload="initialize()"> <div id="map_canvas" style="width:500px; height:300px"></div> он выводит карту, нужно чтобы с правой стороны вверху карты была иконка фул-скрин (потом привяжу картинку) и при клике по ней карта открывалась во весь размер экрана и в тоже время в полно экранной карте тоже вверху с права была иконка чтобы можно опять свернуть карту в ее стандартный режим width:500px; height:300px Помогите пожалуйста! |
02.05.2016, 11:50 | #2 |
Старожил
Регистрация: 12.01.2011
Сообщений: 19,500
|
Фул-скрин на весь экран или просто на всю страницу в браузере?
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом. |
02.05.2016, 12:00 | #3 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Скорее всего на всю страницу браузера!
вот нашел что то похожее http://stackoverflow.com/questions/3...for-streetview но не знаю как мне это переделать под мой код карты? помогите! |
02.05.2016, 12:08 | #4 |
Старожил
Регистрация: 12.01.2011
Сообщений: 19,500
|
Так тогда просто что-нибудь типа
Код:
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом. |
02.05.2016, 12:11 | #5 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
|
03.05.2016, 04:53 | #6 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
PHP код:
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
03.05.2016, 12:20 | #7 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
PS: Если нужен настоящий FULL-SCREEN-MODE
можно так. (взял с stackoverflow) PHP код:
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
04.05.2016, 13:15 | #8 | |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Цитата:
Спасибо большое, вариант работает в том виде что у вас, но у меня на странице куча другого хтмл кода и он с ним конфликтует мне нужно что-то вроде Код:
Код:
если я оставляю вариант, то у меня ваще пол страницы не отображает изза стилей Код:
можно сделать чтобы как-то адресно стили действовали только на тот элемент что нужно растянуть во весь экран? спасибо! ______________________ Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум. Последний раз редактировалось Alex11223; 04.05.2016 в 13:24. |
|
04.05.2016, 16:15 | #9 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
можно все. нужно смотреть по метсу. Разные сайты, разные верстки, фреймворки и.д.
убири вот эту часть. "overflow: hidden; " это я просто тестил у себя. вот это поменять PHP код:
PHP код:
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
07.05.2016, 00:36 | #10 |
Пользователь
Регистрация: 30.09.2015
Сообщений: 74
|
Привет!
сделал как вы и сказали но не растягывает карту теперь во весь экран Код HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>google.maps</title> <style type="text/css"> zzz span{ height: 100%; width: 100%; padding: 0; margin: 0; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> // ================================================================== var map; var map_canvas; var latlng; var settings; var full_screen = false; var SCREEN = { "full" : { "width" : "100%", "height" : "100%" }, "deff" : { "width" : "500px", "height" : "300px" }, } // ================================================================== window.addEventListener("load", function(){ map_canvas = document.getElementById('map_canvas'); initialize(); //console.log( location.href ); // ./google.maps.html?lan=60.000&lon=3.003 }); // ================================================================== function fullScreenAction() { if(full_screen){ full_screen = !full_screen; map_canvas.style.width = SCREEN.deff.width; map_canvas.style.height = SCREEN.deff.height; initialize(); }else{ full_screen = !full_screen; map_canvas.style.width = SCREEN.full.width; map_canvas.style.height = SCREEN.full.height; initialize(); } } // ================================================================== function initialize() { latlng = new google.maps.LatLng( 50.84193598, 3.84193598 ); settings = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map( map_canvas, settings ); } // ================================================================== </script> </head> <body> <span class="zzz" id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2;" onclick="fullScreenAction()">Full Screen</span> <div id="map_canvas" style="display: block; width:500px; height:300px; border: solid 1px #000;"> Loading ...</div> </body> </html> дело в том что я не могу использовать (кнопку) button так как тот скрипт что у меня есть при клике на эту кнопку дает перезагрузку всей страницы, короче идет где то конфликт кода! и мне нужно либо <span> либо ссылкой, либо картинкой но не кнопкой сделать, чтобы кликнул и растянуло во весь экран, нужно что бы работало адресно только к конкретному элементу как в моем варианте что я дал, в вашем варианте, распространяется на все кнопки что у меня если бы кнопка была одна то все гуд, надеюсь передал мысль! <button id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2;" onclick="fullScreenAction()">Full Screen</button> |
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как программно развернуть форму на весь экран? | chandrasecar | Общие вопросы Delphi | 6 | 26.07.2015 10:39 |
Как развернуть видео на весь экран | xays | HTML и CSS | 0 | 04.04.2012 18:32 |
Visual Studio,C#.Как сделать форму во весь экран? | Nikitok | Помощь студентам | 0 | 05.10.2010 21:36 |
как запретить раскрытия формы на весь экран? | designer999 | Общие вопросы Delphi | 10 | 18.02.2010 16:07 |
сделать программу на весь экран | Killbrum | Помощь студентам | 10 | 09.09.2008 09:50 |