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

D'Jack

Постоялец
Регистрация
22 Сен 2012
Сообщения
444
Реакции
173
Привет, друзья!

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

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

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

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

И зачем все править? Достаточно только увеличить шрифт и изменить в принципе задний фон если оно того требует, а так по сути если больше шрифт только сделать.
 
Я думаю будет достаточно создать второй CSS файл, где будет все тоже самое, за отличие только тех параметров, которые необходимо увеличить.
А на сайте в нужном месте поставить ссылку на загрузку этого файла

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

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

Прочитайте внимательнее вопрос "может есть где то сервис помогающий автоматизировать эти действия или некий js который делает это у тебя на сайте. "
 
Что мешает оттуда 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;
 
Последнее редактирование:
Назад
Сверху