Javascript-форум - Адаптивная ширина окна?

Javascript-форум (https://javascript.ru/forum/)

- Мобильный JavaScript (https://javascript.ru/forum/mobile/)

- - Адаптивная ширина окна? (https://javascript.ru/forum/mobile/64000-adaptivnaya-shirina-okna.html)

Адаптивная ширина окна?

Здравствуйте!

Помогите получить адаптивную ширину окна в коде:

<script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                title: "Название окна...",
                width: 650,
                height: 280
            });
            $("#btnShow").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow2").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow3").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow4").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow5").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow6").click(function () {
                $("#dialog").dialog("open");
            });
        });
    </script>

Ширина задается фиксированная, а нужно, чтобы если ширина устройства менее 650, то ширина окна бы задавалась, как 100%.
Спасибо.

Как на счёт использования CSS для этих целей?

Цитата:

Сообщение от Botik21 (Сообщение 421999)

Как на счёт использования CSS для этих целей?

Я только за, но как?
Как задать класс окну?
Я просто ноль в JS синтаксисе...

Да похоже и в вёрстке ноль.
Класса окну задаётся в вёрстке.

Цитата:

Сообщение от Botik21 (Сообщение 422055)

Да похоже и в вёрстке ноль.
Класса окну задаётся в вёрстке.

Где задается класс я знаю.
С версткой проблем нет.
Как вставить созданный класс в код, который я указал.

$("#some_element").addClass('some_class');

Если проблем с вёрсткой нет, то не использовали бы JS для такой задачи, а сделали всё в вёрстке.

Цитата:

Сообщение от Botik21 (Сообщение 422129)

$("#some_element").addClass('some_class');

Если проблем с вёрсткой нет, то не использовали бы JS для такой задачи, а сделали всё в вёрстке.

Да я бы рад, подскажите как?

Есть кнопка-ссылка на скачивание файла.
Нужно, чтобы при нажатии на эту ссылку скачивался файл и одновременно открывалось окно с кнопками соц сетей, плюс проверка но кукам, не нажималась ли эта кнопка ранее.

На мой взгляд, без JS не обойтись...

И извините. но я так и не понял, куда в моем коде вставлять это

$("#some_element").addClass('some_class');

@media (max-width: 650px) {
  .some_window {
    width: 100%;
  }
}

Цитата:

Сообщение от romagromov (Сообщение 422167)

И извините. но я так и не понял, куда в моем коде вставлять это

Это надо было вставлять туда – где хотели задавать класс для элемента.

А при большом желании вашу задачу можно решить подложив под кнопку ссылку и используя псевдокласс :visited отобразить окно. Получится без JS и куков.

Цитата:

Сообщение от Botik21 (Сообщение 422187)

@media (max-width: 650px) {
  .some_window {
    width: 100%;
  }
}

Я попробую с псевдоклассом.

Но еще раз на счет моего кода.
Вы мне даете css класс. Как я уже несколько раз писал - с ним мне все и так понятно.

Куда вставить этот код

$("#some_element").addClass('some_class');

в этом коде

<script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                modal: true,
                autoOpen: false,
                title: "Название окна...",
                width: 650,
                height: 280
            });
            $("#btnShow").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow2").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow3").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow4").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow5").click(function () {
                $("#dialog").dialog("open");
            });
            $("#btnShow6").click(function () {
                $("#dialog").dialog("open");
            });
        });
    </script>

romagromov,

$(function(){
	
	var $dialog = $('#dialog').dialog({
		modal: true,
		autoOpen: false,
		title: 'Название окна...',
		height: 280
	});
	
	$('[id^=btnShow]').click(function(){
		$dialog.dialog('open');
	});
	
	$(window).resize(function(){
		if ($(this).width() < 650) {
			$dialog.dialog('option', { 'position': { 'my': 'left', 'at': 'left', 'of': this }, 'width': 'auto' });
		} else {
			$dialog.dialog('option', { 'position': { 'my': 'center', 'at': 'center', 'of': this }, 'width': 650 });
		}
	}).resize();

});