• Страница 1 из 1
  • 1
Увеличение текста с запоминанием cookie
workman
Суббота, 16 Января 2016, 19:56 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9


Код
<div class="resize">
    <h1>Увеличение текста <span> (cookie)</span></h1>
    <a href="#" id="increaseFont"></a>
    <a href="#" id="decreaseFont"></a>    
</div>
<div class="container">
    <p>Тут ставим текст который будет увеличиваться</p>
</div>


CSS

Код
$timing: 0.25s;
$radius: 8px;
$bgColor: #7DA5A6;
$increaseColor: #d35400;
$decreaseColor: #e67e22;
$button: #005057;
$white: #fff;
$font-size: 14px;

.resize{
    position: relative;
    margin: 0 auto;
    width: 400px;
    text-align: center;
    
  
  span{
   font-size: 13px;
  }
    }
    
    
    a{
  text-decoration: none;
  padding: 15px;
  color: $white;
  font-family: FontAwesome;
  display: inline-block;
    }
    a#increaseFont{
  background-color: $increaseColor;
  border-radius: $radius;
  
  &:before{
   content: "\f067";
  }
    }
    a#decreaseFont{
  background-color: $decreaseColor;
  border-radius: $radius;
  
  &:before{
   content: "\f068";
  }
    
}
.container{
    position: relative;
    width: 50%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ecf0f1;
    margin-top: 20px;
    border-radius: $radius;
    
    p{
  margin-top: 0;
  transition: all $timing linear;
  font-size: $font-size;
    }
    ul > li{
  transition: all $timing linear;
  font-size: $font-size;
    }
    .navigate{
  border-top: 1px solid $bgColor;
  padding-top: 20px;
  text-align: center;
  
  p{
   display: block;
   margin-bottom: 10px;
   font-weight: bold;
  }
  
  a{
   padding: 5px 10px;
   background-color: $button;
   color: $white;
   text-decoration: none;
   display: block;
   max-width: 80px;
   margin: 0 auto;
  }
  span{
   font-size: 12px;
   display: block;
  }


JS
Код

<script type="text/javascript">
textResizer = $(function (){
    
    // Set Cookie
    var docCookies = {
   getItem: function (sKey) {
     if (!sKey) { return null; }
     return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
   },
   setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
     if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
     var sExpires = "";
     if (vEnd) {
       switch (vEnd.constructor) {
         case Number:
           sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
           break;
         case String:
           sExpires = "; expires=" + vEnd;
           break;
         case Date:
           sExpires = "; expires=" + vEnd.toUTCString();
           break;
       }
     }
     document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
     return true;
   },
   removeItem: function (sKey, sPath, sDomain) {
     if (!this.hasItem(sKey)) { return false; }
     document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
     return true;
   },
   hasItem: function (sKey) {
     if (!sKey) { return false; }
     return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
   },
   keys: function () {
     var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
     for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
     return aKeys;
   }
    };

    function changeSize(element, size) {
     var current = parseInt(docCookies.getItem("FontSize"));
     var newSize;
     if (current !== "") {
         current = parseInt(element.css('font-size'));
     }
     if (size === 'decrease') {
         if (current > 12) {
             newSize = current - 2;
         }
     } else if (size === 'increase') {
         if (current < 22) {
             newSize = current + 2;
         }
     }
     
     element.css('font-size', newSize + 'px');
     docCookies.setItem("FontSize", newSize, Infinity);
    }

    $('#decreaseFont').click(function (e) {
  
  changeSize(text, 'decrease');
  e.preventDefault();
    });

    $('#increaseFont').click(function (e) {
    changeSize(text, 'increase');
    e.preventDefault();
    });

    var text = $("p, ul > li"),
   fontSize = docCookies.getItem("FontSize");
    if (fontSize) {
     text.css('font-size', fontSize + 'px');
    }
});
</script>
Страна: (RU)
Maryges
Суббота, 16 Января 2016, 20:20 | Сообщение 2
Оффлайн
Пользователи
Сообщений:142
Награды: 0
А, что удобно, кто слабо видит, здесь нормально.
Страна: (RU)
FeStemBer
Суббота, 16 Января 2016, 22:53 | Сообщение 3
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Вот не представляю, куда можно установить.
Страна: (RU)
workman
Суббота, 16 Января 2016, 23:00 | Сообщение 4
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Tventum ()
Вот не представляю, куда можно установить.
можно поставить на форум увеличивать текст сообщений
Страна: (RU)
Сафрон
Воскресенье, 17 Января 2016, 04:03 | Сообщение 5
Оффлайн
Vip
Сообщений:224
Награды: 1
workman, так это весть текст будет увеличиваться и ли отдельно взятый.
Страна: (RU)
workman
Воскресенье, 17 Января 2016, 12:02 | Сообщение 6
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Цитата Сафрон ()
так это весть текст будет увеличиваться и ли отдельно взятый

Ну если в форуме в виде материала найти это $MESSAGE$ и поставить так
Код
<div class="container">$MESSAGE$</div>
, то текст будет увеличиваться только в сообщениях. Ну и естественно кнопки воткнуть куда-нибудь ...


Сообщение отредактировал
workman - Воскресенье, 17 Января 2016, 12:03
Страна: (RU)
Сафрон
Понедельник, 18 Января 2016, 08:09 | Сообщение 7
Оффлайн
Vip
Сообщений:224
Награды: 1
Но для сообщение нормально, также можно и на название темы, но если его не видно, то явно только сам материал.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: