Форум русской поддержки Joomla!® CMS
06.12.2016, 04:51:56 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Версия сайта для слабовидящих, вывод картинки

 (Прочитано 530 раз)
0 Пользователей и 1 Гость смотрят эту тему.
sibdes
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 77


Никогда не бойся делать то, что ты не умеешь.


« : 06.11.2015, 16:10:43 »

Так как МинОбр обязывает все образовательные сайты делать версия контента для слабовидящих, пришлось искать способы. нашел. чтобы настраивать скрипт под себя скачал два файла js и CSS от этого скрипта себе на сайт. теперь о проблеме.
1. как убрать кнопку? нужна чистая картинка при нажатии на которую активировался бы скрипт.
2. как сделать картинку по центру? пока картинка в две строки, но это исправимо. главное по центру ее сделать.
адрес сайта : http://кулиш16.рф
код скрипта:
Код:
window.onload = funonload;
function funonload() {
var coocka = ReadSpec('special');
addButton(coocka);
checkSpec(coocka);
}

function checkSpec(spec) {
  setButton(spec);
if (spec == 'y')
{
  addStyleSheet('http://xn--16-vlchf1cxb.xn--p1ai/js/vi.css');
}
}

function ReadSpec(name)
{
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function SetCookieSpec(name,value) {
    document.cookie = name + "=" + value;
}

function addButton() {
    var button = document.createElement('input');
    var parentElem = document.body;
    var s = ReadSpec('special');
    button.type = 'button';
    button.id = 'spec';
    button.value = ' ';
    button.setAttribute("onclick", "Spec()");
    button.setAttribute("style","width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/vers_for_slabovid.png)");
    parentElem.insertBefore(button, parentElem.firstChild);
    setButton(s);
}

function addStyleSheet(url)
{
  // Создаём элемент LINK/STYLE и добавляем в документ
  var style;

// 

//    if (typeof url == 'undefined')
//  {
//    style = document.createElement('style');
//  }
//  else
//  {
    style = document.createElement('link');
   style.rel = 'stylesheet';
   style.type = 'text/css';
    style.href = url;
//    style.id = 'speccss';
//  }
 
   document.getElementsByTagName('head')[0].appendChild(style);
  // Находим новый стиль в коллекции styleSheets
  style = document.styleSheets[document.styleSheets.length - 1];

  // Делаем объект совместимыми с W3C DOM2 (для IE)
  return StyleSheet_makeCompatible(style);

}
function delStyleSheet()
{
style=document.getElementsByTagName('head')[0].lastChild;//document.styleSheets[document.styleSheets.length - 1]
document.getElementsByTagName('head')[0].removeChild(style);//
}


function Spec() {
var spec = ReadSpec('special');
//alert (spec);

if (spec == 'y')
{
   delStyleSheet();
   SetCookieSpec('special','n');  setButton('n');
}
else {
   addStyleSheet('http://xn--16-vlchf1cxb.xn--p1ai/js/vi.css');
   SetCookieSpec('special','y');  setButton('y');

}
}

function setButton(spec) {
var inputTag = document.getElementById("spec");
 if (inputTag.hasAttribute("value"))               // если есть атрибут value
   defaultValue = inputTag.getAttribute("value");
//if (spec == 'y')
//{
//  inputTag.setAttribute("value", "");
//}
//else {
//  inputTag.setAttribute("value", "версия для слабовидящих");
//}
//}
if (spec == 'y')
{
  inputTag.setAttribute("style", "width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/stand_vers.png)");

}
else {
  inputTag.setAttribute("style", "width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/vers_for_slabovid.png)");
}
}


function StyleSheet_makeCompatible(style)
{
  // Mozilla не даёт доступа к cssRules до загрузки стиля
  try
  {
    style.cssRules;
  }
  catch (e)
  {
    return style;
  }

  // Создаём CSSStyleSheet.cssRules
  if (typeof style.cssRules == 'undefined' && typeof style.rules != 'undefined')
    style.cssRules = style.rules;

  // Создаём CSSStyleSheet.insertRule и CSSStyleSheet.deleteRule
  if (typeof style.insertRule == 'undefined' && typeof style.addRule != 'undefined')
    style.insertRule = StyleSheet_insertRule;
  if (typeof style.deleteRule == 'undefined' && typeof style.removeRule != 'undefined')
    style.deleteRule = style.removeRule;

  // Проверяем, существуют ли все нужные свойства
  if (typeof style.cssRules == 'undefined' || typeof style.insertRule == 'undefined'
      || typeof style.deleteRule == 'undefined')
    return null;
  else
    return style;
}

function StyleSheet_insertRule(rule, index)
{
  // Выделяем селектор и стиль из параметра
  if (rule.match(/^([^{]+)\{(.*)\}\s*$/))
  {
    this.addRule(RegExp.$1, RegExp.$2, index);
    return index;
  }
  throw "Syntax error in CSS rule to be added";
}

код стилей:
Код:
* {
color: #000 !important;
font-style: normal !important;
font-family: Arial, Helvetica, sans-serif !important;
   font-size: x-large !important;
   font-weight: bold !important;
overflow: visible;
line-height: 150% !important;
letter-spacing: 2px !important;
}

h1 {
    font-size: xx-large !important;
}
h2, h3 {
   font-size: x-large !important;
}
div#wrapper {
  width: 1200px !important;
}
div#leftcolumn {
  width: 25% !important;
  float: left;
}
div#maincolumn {
    width: 72% !important;/**/
    margin-top: 0 !important;
    padding-top:0;
}
div#rightcolumn, div#tabarea {
display: none !important;
visibility: hidden;
  width: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
}
/*p, li {
padding-bottom: 1.5em  !important;
}*/
a:link, a:hover {
    text-decoration: underline;
}
#spec {
    width: 300px !important;
    height: 70px !important;
    background-image: url(http://xn--16-vlchf1cxb.xn--p1ai/js/stand_vers.png)!important;
     margin-bottom: 5px;
}

h1, h2, h3{
font-size: xx-large !important;
}

#nav, #menu{
    height: 8em !important;
}
#nav a, #menu a {
    height: 1.6em !important;
}
Записан
Hufflepuff
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Сообщений: 110


« Ответ #1 : 16.02.2016, 12:19:26 »

как вы сделали?
Записан
sibdes
Осваиваюсь на форуме
***

Репутация: +0/-0
Offline Offline

Пол: Мужской
Сообщений: 77


Никогда не бойся делать то, что ты не умеешь.


« Ответ #2 : 17.02.2016, 07:28:22 »

Я по другому сделал. проще как по мне. в файл index.php шаблона вставил такой код вроде бы:
Код:
<?php
$vi = JFactory::getApplication()->input->getString('vi', '');
       $session = JFactory::getSession();
if ($vi=='1' or $vi=='0') {$session->set("vi",  $vi);}
?>
 
<?php if ($session->get("vi")=='1') { ?>
      <link rel="stylesheet" href="js/vi.css" type="text/css" />
    <?php } else { ?>
      <link rel="stylesheet" href="templates/allrounder-3/css/template.css" type="text/css" />
    <?php } ?>

потом создал модуль и в него воткнул это:
Код:
<p style="text-align: center;">
<a href="http://кулиш16.рф/index.php?vi=1"><img class="download" src="js/vers_for_slabovid.png" title="Версия для слабовидящих" /></a><br />
<a href="http://кулиш16.рф/index.php?vi=0"><img class="download" src="js/stand_vers.png" title="Обычная версия" /></a></p>

в шаблоне уже была позиция для модуля - панель которая выдвигалась сверху. я только изменил иконку.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet