0

Имеется такой скрипт :

   <script type="text/javascript">
        $(document).ready(function() {
            $('#features').wowBook({height : 500, width  : 800, pageNumbers: 0, flipSound: 1,centeredWhenClosed : true
            ,hardcovers : true, controls : {
                next      : '#next',
                back      : '#back',
                first     : '#first',
                last      : '#last',
                slideShow : '#slideshow',
                flipSound : '#flipsound',
                fullscreen : '#fullscreen'
                
            }
        }).css({'display':'none', 'margin':'auto'}).fadeIn(1000);
            
    
        });
    </script>

Можно ли сделать так, что бы при определенных разрешениях экрана, менялись показатели "height" и "width"?


введите сюда описание изображения

Вот скрин, скопировал точно до символа вроде, но без обновления страницы не изменяются размеры

10
  • 1
    При изменении экрана или при начальных данных? Уточните и сейчас сделаем пример.
    – Denis640Kb
    17 янв 2020 в 13:48
  • При изменении экрана 17 янв 2020 в 16:21
  • 1
    смотрите в ответе. тоже самое, только надо добавить функцию $(window).resize(function() {тут код});
    – Denis640Kb
    17 янв 2020 в 16:27
  • Нужно до заменить функцию .ready или добавить ещё одну просто? 17 янв 2020 в 19:43
  • 1
    Добавить, так как изменения происходят всё равно после готовности страницы, а именно функции ready. Написал пример.
    – Denis640Kb
    17 янв 2020 в 19:46

1 ответ 1

1

Примерно так:

 $(document).ready(function() {
        var width = document.documentElement.clientWidth; // получаем ширину окна браузера пользователя
        var wowBookwidth = "";
        var wowBookрheight = "";
        if (width >= "1280"){ // Добавляем проверку на ширину, в зависимости от которой будем менять переменную ширины wowBook
            wowBookwidth = "800"; // Указываете свою ширину (это для примера)
            wowBookрheight = "500"; // Указываете свою высоту (это для примера)
        } else if (width >= "800" && width <= "1024"){
            wowBookwidth = "700"; // Указываете свою ширину (это для примера)
            wowBookрheight = "400"; // Указываете свою высоту (это для примера)
        } else if (width <= "800"){
            wowBookwidth = "600"; // Указываете свою ширину (это для примера)
            wowBookрheight = "300"; // Указываете свою высоту (это для примера)
        }
        console.log(width);
        $('#features').wowBook({height : wowBookрheight, width  : wowBookwidth, pageNumbers: 0, flipSound: 1,centeredWhenClosed : true
            ,hardcovers : true, controls : {
                next      : '#next',
                back      : '#back',
                first     : '#first',
                last      : '#last',
                slideShow : '#slideshow',
                flipSound : '#flipsound',
                fullscreen : '#fullscreen'

            }
        }).css({'display':'none', 'margin':'auto'}).fadeIn(1000);


    });

Если надо при изменении размера экрана, то добавьте функцию $(window).resize(function() {...});

Пример:

 $(document).ready(function() {
        $(window).resize(function() {
        var width = document.documentElement.clientWidth; // получаем ширину окна браузера пользователя
        var wowBookwidth = "";
        var wowBookрheight = "";
        if (width >= "1280"){ // Добавляем проверку на ширину, в зависимости от которой будем менять переменную ширины wowBook
            wowBookwidth = "800"; // Указываете свою ширину (это для примера)
            wowBookрheight = "500"; // Указываете свою высоту (это для примера)
        } else if (width >= "800" && width <= "1024"){
            wowBookwidth = "700"; // Указываете свою ширину (это для примера)
            wowBookрheight = "400"; // Указываете свою высоту (это для примера)
        } else if (width <= "800"){
            wowBookwidth = "600"; // Указываете свою ширину (это для примера)
            wowBookрheight = "300"; // Указываете свою высоту (это для примера)
        }
        $('#features').wowBook({height : wowBookрheight, width  : wowBookwidth, pageNumbers: 0, flipSound: 1,centeredWhenClosed : true
            ,hardcovers : true, controls : {
                next      : '#next',
                back      : '#back',
                first     : '#first',
                last      : '#last',
                slideShow : '#slideshow',
                flipSound : '#flipsound',
                fullscreen : '#fullscreen'

            }
        }).css({'display':'none', 'margin':'auto'}).fadeIn(1000);
        });
    });

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.