Как изменить переменную в зависимости от ширины экрана?

[crystaltrumpet]

Добрый день. Прошу помощи у того кто может разбираться в этом:
Есть в моем таймере разная ширина экрана:
1200 и больше --- fontSize = 30, captionSize = 10
от 992 до 1200 --- fontSize = 25, captionSize = 8
от 768 до 992 - fontSize = 17, captionSize = 5
Как это присвоить переменной fontSize и captionSize?

<script>
        $('#countdown-11').timeTo({
            seconds: 100000,
            displayHours: true,
            displayDays: 2,
            displayCaptions: true,
            fontSize: 20,
            captionSize: 10,
            languages: {
                ru: {days: 'дн.', hours: 'час.', min: 'мин.', sec: 'сек.'}
            },
            lang: 'ru'
        });

    </script>

Как это присвоить переменной fontSize и captionSize? чтобы изменялись в зависимости от ширины экрана?

[рони]

crystaltrumpet,

$(function() {
var width = window.screen.width,
fontSize = width > 1200 ? 30 : width > 992 ? 25 : 17,
captionSize  =  width > 1200 ? 10 : width > 992 ? 8 : 5;

$('#countdown-11').timeTo({
seconds: 100000,
displayHours: true,
displayDays: 2,
displayCaptions: true,
fontSize: fontSize,
captionSize: captionSize,
languages: {
ru: {days: 'дн.', hours: 'час.', min: 'мин.', sec: 'сек.'}
},
lang: 'ru'
});

});

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[crystaltrumpet]

Ронни, не срабатывает - берет только первое значение 30 остальные не изменяет от размера экрана.
Да, я отформатировал, сразу забыл что есть такая возможность..
спасибо что помогаете!
вот такое решение посоветовали:

$(document).ready(function(){
  var $window_width = $(window).width();
  var $fontSize = 20,$captionSize = 10; // default sizes
  if($window_width >= 1200){
    $fontSize = 30;
    $captionSize = 10;
  }
  else if($window_width >= 992 && $window_width < 1200){
    $fontSize = 25;
    $captionSize = 8;
  }
  else if($window_width >= 768 && $window_width < 992){
    $fontSize = 17;
    $captionSize = 5;
  }
  $('#countdown-11').timeTo({
    seconds: 100000,
    displayHours: true,
    displayDays: 2,
    displayCaptions: true,
    fontSize: $fontSize,
    captionSize: $captionSize
  });
});

срабатывает только после перезагрузки

[laimas]

вот такое решение посоветовали

Странное решение. По умолчанию значения должны быть для значения от 1200, то есть 30, 10, а проверяться только два условия - от 768 до 992 и от 992 до 1200. Иначе нет логики, так как 20 и 10 по умолчанию ну никак не входят по условиям в диапазон от 768 до 1200 и более. И это должна быть функция которая отрабатывает и при изменении размера экрана, если нужно чтобы не только

срабатывает только после перезагрузки