Версия сайта для слабовидящих - как реализовать?

Тема в разделе "Верстка", создана пользователем D'Jack, 4 июн 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    335
    Симпатии:
    109
    Привет, друзья!

    Встала перед мной задача сделать сайт с так называемой версией для слабовидящие если кто не занет то тут пример очень хочу услышать мениея людей кто сталкивался с такой задачей как реализовать подобное отображение сайта.
    Понятно что в css руками править каждое правило не целесообразно и глупо, может есть где то сервис помогающий автоматизировать эти действия или некий js который делает это у тебя на сайте.

    Вообщем кто сталкивался с такой задачей буду очень благодарен за совет.
     
  2. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    525
    Симпатии:
    235
    Я думаю будет достаточно создать второй CSS файл, где будет все тоже самое, за отличие только тех параметров, которые необходимо увеличить.
    А на сайте в нужном месте поставить ссылку на загрузку этого файла

    как пример потом: /style=default ну или другое имя

    Так можете клонировать 2-3 файла с разными размерами шрифта и цветовой гаммой.

    И зачем все править? Достаточно только увеличить шрифт и изменить в принципе задний фон если оно того требует, а так по сути если больше шрифт только сделать.
     
  3. D'Jack

    D'Jack

    Регистр.:
    22 сен 2012
    Сообщения:
    335
    Симпатии:
    109
    Прочитайте внимательнее вопрос "может есть где то сервис помогающий автоматизировать эти действия или некий js который делает это у тебя на сайте. "
     
  4. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    474
    Симпатии:
    277
    Что мешает оттуда js стянуть?
    Код:
    var displayConfig = {
      size: 'middle',
      color: 'white',
      showImage: 'img-yes',
      font: 'sans',
      interval: 'normal'
      },
      dcPosValue = [
      ['small', 'middle', 'large'],
      ['white', 'black', 'blue'],
      ['img-yes', 'img-no'],
      ['sans', 'serif'],
      ['normal', 'medium', 'wide']
      ];
    
    function setDisplayConfig() {
      $('body').attr('class',
      displayConfig['size'] + ' ' +
      displayConfig['color'] + ' ' +
      displayConfig['showImage'] + ' ' +
      displayConfig['font'] + ' ' +
      displayConfig['interval']
      );
      $.cookie('config', $.toJSON(displayConfig), {
      path: "/",
      expires: 100
      });
    }
    
    function activate() {
      // Активируем размер шрифта
      var pos = $.inArray(displayConfig['size'], dcPosValue[0]);
      if (pos != -1) {
      $('#fs-btn .fs-act').removeClass('fs-act');
      $('#fs-btn a').eq(pos).addClass('fs-act');
      }
      // Активируем цветовую схему
      pos = $.inArray(displayConfig['color'], dcPosValue[1]);
      if (pos != -1) {
      $('#cs-btn .cs-act').removeClass('cs-act');
      $('#cs-btn a').eq(pos).addClass('cs-act');
      }
      // Активируем отображение картинок
      if (displayConfig['showImage'] == 'img-no')
      $('#show-image').removeClass('si-check-act');
      // Активируем шрифт
      pos = $.inArray(displayConfig['font'], dcPosValue[3]);
      if (pos != -1) {
      $('.sma-alt-param-btn').eq(0).children('span').removeClass('sma-alt-act');
      $('.sma-alt-param-btn').eq(0).children('span').eq(pos).addClass('sma-alt-act');
      }
      // Активируем интервал
      pos = $.inArray(displayConfig['interval'], dcPosValue[4]);
      if (pos != -1) {
      $('.sma-alt-param-btn').eq(1).children('span').removeClass('sma-alt-act');
      $('.sma-alt-param-btn').eq(1).children('span').eq(pos).addClass('sma-alt-act');
      }
    }
    $(document).ready(function () {
      $('input.calendar-field').mask('99.99.9999');
      ie6 = $.browser.msie && $.browser.version == 6;
      if ($.cookie('config') != null)
      displayConfig = $.evalJSON($.cookie('config'));
      //---
      setDisplayConfig();
      activate();
      // основное меню
      $('#menu:not(.not-sub-menu) li a').bind('click',
      function () {
      var self = $(this).parent();
      if (!self.hasClass('menu-act')) {
      $('#menu .menu-act').removeClass('menu-act');
      self.addClass('menu-act');
      $('#sub-menu ul.show').removeClass('show');
      $('#sub-menu ul').eq($('#menu li').index(self)).addClass('show')
      }
      }
      );
      // показать\скрыть доп-парамерты в настройках вн.вида
      $('#sma-alt-btn-show').live('click',
      function () {
      $(this).hide();
      $('#sma-alt')
      .show()
      .animate({
      'top': 0
      },
      function () {
      $('#sma-alt')
      .css('overflow', 'visible')
      .parent()
      .css('z-index', 13)
      }
      )
      }
      );
      $('#sma-alt>span').live('click',
      function () {
      $('#sma-alt')
      .animate({
      'top': -160
      },
      function () {
      $('#sma-alt').hide();
      $('#sma-alt-btn-show').show()
      }
      )
      .parent()
      .css('z-index', 10);
      }
      );
      // кнопки в доп-парамерты в настройках вн.вида
      // font-size
      $('#fs-btn a').bind('click',
      function () {
      if (!$(this).hasClass('fs-act')) {
      $('#fs-btn .fs-act').removeClass('fs-act');
      $(this).addClass('fs-act');
      //---
      displayConfig['size'] = dcPosValue[0][$('#fs-btn a').index(this)];
      setDisplayConfig()
      //---
      }
      return false;
      }
      );
      // color-scheme
      $('#cs-btn a').bind('click',
      function () {
      if (!$(this).hasClass('cs-act')) {
      $('#cs-btn .cs-act').removeClass('cs-act');
      $(this).addClass('cs-act');
      if (ie6) {
      $('#sma-alt>span')
      .hide();
      $('#sma-alt>span')
      .eq($('#cs-btn a').index(this))
      .show()
      }
      //---
      displayConfig['color'] = dcPosValue[1][$('#cs-btn a').index(this)];
      setDisplayConfig()
      //---
      }
      }
      );
      // show/hide images
      $('#show-image').bind('click',
      function () {
      $(this).toggleClass('si-check-act');
      //---
      if ($(this).hasClass('si-check-act'))
      displayConfig['showImage'] = dcPosValue[2][0];
      else
      displayConfig['showImage'] = dcPosValue[2][1];
      setDisplayConfig();
      return false;
      //---
      }
      );
      // family&space параметры
      $('#special-menu-alt .sma-alt-param-btn span').live('click',
      function () {
      if (!$(this).hasClass('sma-alt-act')) {
      var ind = $('#special-menu-alt span').index(this);
      $('.sma-alt-act', $(this).parent()).removeClass('sma-alt-act');
      $(this).addClass('sma-alt-act');
      //---
      if (ind < 2)
      displayConfig['font'] = dcPosValue[3][ind];
      else
      displayConfig['interval'] = dcPosValue[4][ind - 2];
      setDisplayConfig()
      //---
      }
      }
      );
      // кастомный input[type=file]
      $('.input-file .f-btn').click(
      function () {
      $(this).next('input')
      .trigger('click')
      .trigger('change')
      }
      );
      $('.input-file input').change(
      function () {
      $(this).trigger('blur');
      var re = /([A-Za-z]\:\\)([^/]+[\\])([\s\w\.\-\_\:0-9а-яА-я]+\.\w+)/;
      var v = $(this).attr('value').replace(re, '$3');
      $(this).parent().next('.input-file-res').html(v);
      }
      );
      // открыть/закрыть фильтр таблицы
      if ($('#content').hasClass('has-filter-table')) {
      $('.ft-toggle').live('click',
      function () {
      $(this).next().toggle();
      $(this).parent().toggleClass('ft-open');
      if (!$(this).parent().hasClass('active-select')) {
      $('.filter-table select').selectbox();
      $(this).parent().addClass('active-select')
      }
      }
      );
      };
      // очистка фильтра таблиц
      $('input.filter-clear').click(function () {
      var form = this.form;
      for (var i = 0, n = form.elements.length; i < n; i++) {
      var el = form.elements[i];
      switch (el.type.toLowerCase()) {
      case 'text':
      case 'textarea':
      el.value = '';
      break;
      case 'select-one':
      el.selectedIndex = 0;
      break;
      case 'select-multiple':
      for (var j = 0, l = el.options.length; j < l; j++)
      el.options[j].selected = false;
      break;
      case 'checkbox':
      el.checked = false;
      break;
      default:
      break;
      }
      }
      if ($(form).hasClass('no-empty')) {
      manualNoEmptySubmit($(form));
      } else {
      if (form.onsubmit)
      form.onsubmit();
      form.submit();
      }
      });
      /*~~~~~~~~~~ пропуск пустых значений при отправке ~~~~~~~~~~~~~~~~~~~~*/
      manualNoEmptySubmit = function (form) {
      var data = form.serializeArray(),
      i, newData = {};
      for (i = 0; i < data.length; i++) {
      if (data[i].value != '')
      newData[data[i].name] = data[i].value;
      }
      var href = window.location.href;
      href = href.substr(0, href.lastIndexOf("?"));
      window.location = href + '?' + $.param(newData);
      }
      $('form.no-empty').live('submit', function () {
      manualNoEmptySubmit($(this));
      return false;
      });
      $('form.no-empty input[type=submit]').live('click', function () {
      manualNoEmptySubmit($(this.form));
      return false;
      });
      //плавный переход по ссылкам-якорям
      if (!$.browser.opera)
      $('a[href*=#]').click(function () {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
      var slctr = $.browser.safari ? 'body' : 'html,body';
      var targetOffset = $target.offset().top;
      $(slctr).animate({
      scrollTop: targetOffset
      }, 500);
      $('a:first', $target).focus();
      return false;
      }
      }
      });
      // сокрытие полей формы
      var fieldId = $('input[name=radio]:radio:checked').val();
      if ($('input[name=radio]:radio').length > 0) activateFields(fieldId);
      $('input[name=radio]:radio').click(function () {
      fieldId = $(this).val();
      activateFields(fieldId);
      });
      // активация и деактивация полей формы
      function activateFields(fieldId) {
      $.each(arAllFields, function (i, n) {
      $('#' + n).show();
      $('#label_' + n).show();
      });
      $.each(objRadio[fieldId], function (i, n) {
      $('#' + n).hide();
      $('#label_' + n).hide();
      });
      };
    });
    
    Классы сам выдернешь?
    Или как вариант
    Код:
    font-size: 150% !important;
     
    Последнее редактирование: 4 июн 2014