Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 02.05.2016, 11:34   #1
nikolokaputik80
Пользователь
 
Регистрация: 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


Помогите пожалуйста!
nikolokaputik80 вне форума Ответить с цитированием
Старый 02.05.2016, 11:50   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Фул-скрин на весь экран или просто на всю страницу в браузере?
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 02.05.2016, 12:00   #3
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию

Скорее всего на всю страницу браузера!

вот нашел что то похожее http://stackoverflow.com/questions/3...for-streetview

но не знаю как мне это переделать под мой код карты?

помогите!
nikolokaputik80 вне форума Ответить с цитированием
Старый 02.05.2016, 12:08   #4
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Так тогда просто что-нибудь типа
Код:
width: 100%; height: 100%;
в CSS или style.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 02.05.2016, 12:11   #5
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
Так тогда просто что-нибудь типа
Код:
width: 100%; height: 100%;
в CSS или style.

это понятно, вот как мне вывести с права вверху значок фул скрипт - то тут я не знаю!
nikolokaputik80 вне форума Ответить с цитированием
Старый 03.05.2016, 04:53   #6
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

PHP код:
<!DOCTYPE html>
<
html>
<
head>
    <
meta charset="utf-8"/>
    <
title>google.maps</title>

    <
style type="text/css">

    
htmlbody{
        
height100%; width100%; padding0margin0overflowhidden;
    }

    </
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>

    <button id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2;" onclick="fullScreenAction()">Full Screen</button>
    <div id="map_canvas" style="display: block; width:500px; height:300px; border: solid 1px #000;"> Loading ...</div>

</body>
</html> 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 03.05.2016, 12:20   #7
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

PS: Если нужен настоящий FULL-SCREEN-MODE

можно так. (взял с stackoverflow)


PHP код:

function requestFullScreenelem ) {
    
// Supports most browsers and their versions.
    
var requestMethod 
        
elem.requestFullScreen 
        
|| elem.webkitRequestFullScreen 
        
|| elem.mozRequestFullScreen 
        
|| elem.msRequestFullscreen;

    if (
requestMethod) { 
    
// Native full screen.
        
requestMethod.callelem );
    
    } else if (
typeof window.ActiveXObject !== "undefined") { 
        
// Older IE.
        
var wscript = new ActiveXObject("WScript.Shell");
        if (
wscript !== null) {
            
wscript.SendKeys("{F11}");
        }
    }
}

// просто вызывает метод, и передаем любой нужнй елемент. В нашем случае <BODY> будет само то

requestFullScreendocument.body );

// У меня в Iceweasel работает. Как в остальных, не знаю. проверяйте. 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 04.05.2016, 13:15   #8
nikolokaputik80
Пользователь
 
Регистрация: 30.09.2015
Сообщений: 74
По умолчанию

Цитата:
Сообщение от pompiduskus Посмотреть сообщение
PHP код:
<!DOCTYPE html>
<
html>
<
head>
    <
meta charset="utf-8"/>
    <
title>google.maps</title>

    <
style type="text/css">

    
htmlbody{
        
height100%; width100%; padding0margin0overflowhidden;
    }

    </
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>

    <button id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2;" onclick="fullScreenAction()">Full Screen</button>
    <div id="map_canvas" style="display: block; width:500px; height:300px; border: solid 1px #000;"> Loading ...</div>

</body>
</html> 





Спасибо большое, вариант работает в том виде что у вас, но у меня на странице куча другого хтмл кода и он с ним конфликтует




мне нужно что-то вроде

Код:
<span class="zzz" id="full_screen_btn" style="position: absolute; margin: 10px 0 0 150px; z-index: 2;" onclick="fullScreenAction()">Full Screen</span>
в css стилях я прописываю
Код:
.zzz span{ 
height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; 
}
но тогда карта не растягивается во весь экран,

если я оставляю вариант, то у меня ваще пол страницы не отображает изза стилей

Код:
    <style type="text/css"> 

    html, body{ 
        height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; 
    } 

    </style>


можно сделать чтобы как-то адресно стили действовали только на тот элемент что нужно растянуть во весь экран?
спасибо!

______________________
Используйте тег [CODE] (кнопка с решеткой # в форме сообщения) при вставке кода на форум.

Последний раз редактировалось Alex11223; 04.05.2016 в 13:24.
nikolokaputik80 вне форума Ответить с цитированием
Старый 04.05.2016, 16:15   #9
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

можно все. нужно смотреть по метсу. Разные сайты, разные верстки, фреймворки и.д.


убири вот эту часть. "overflow: hidden; " это я просто тестил у себя.

вот это поменять
PHP код:
htmlbody
        
height100%; width100%; padding0margin0overflowhidden
    } 
на это

PHP код:
htmlbody
        
height100%; width100%; padding0margin0
    } 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 07.05.2016, 00:36   #10
nikolokaputik80
Пользователь
 
Регистрация: 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>
nikolokaputik80 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как программно развернуть форму на весь экран? 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