Автор Тема: CSS не мига текста  (Прочетена 11366 пъти)

3p0

  • Напреднали
  • *****
  • Публикации: 354
    • Профил
CSS не мига текста
« -: Nov 23, 2016, 15:38 »
Търсих в интернет с търсачката на европейския съюз = qwant.com как да направя един текст в клетка от таблица да премигва. Търсачката намери разни резултати - иазбрах:
https://www.w3.org/WAI/UA/TS/html401/cp0303/0303-CSS-BLINK.html
там има пример, който аз преработих за моя случай:
Код:
В секция [b]style[/b]: 
type="text/css" xml:space="preserve" class="blink"> div.blink {text-decoration: blink;}
И за конкретния текст в таблицата:
<div class="blink">0:0</div>
Не премигва обаче?
Активен

MX Linux version 18 "Continuum"
PC: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H61M-S2V-B3 rev.1.0; RAM=16Гб DDR3.

runtime

  • Напреднали
  • *****
  • Публикации: 807
  • Distribution: Ubuntu 14.04
  • Window Manager: Unity
  • LZ1DOT
    • Профил
    • WWW
Re: CSS не мига текста
« Отговор #1 -: Nov 23, 2016, 16:26 »
Blink не е стандартен и подръжката му зависи изцяло от браузъра. Ако искаш може да прочетеш тук как евентуално да го реализираш: https://en.wikipedia.org/wiki/Blink_element

Тук може да видиш резултат с jquery (ако го подържаш в сайта си): https://jsfiddle.net/kp98evf6/

P.S. хубавото на таймера е, че може да си нагласиш честотата на мигане :-P
« Последна редакция: Nov 23, 2016, 16:35 от runtime »
Активен

3p0

  • Напреднали
  • *****
  • Публикации: 354
    • Профил
Re: CSS не мига текста
« Отговор #2 -: Nov 23, 2016, 17:22 »
Blink не е стандартен и подръжката му зависи изцяло от браузъра. Ако искаш може да прочетеш тук как евентуално да го реализираш: https://en.wikipedia.org/wiki/Blink_element

Тук може да видиш резултат с jquery (ако го подържаш в сайта си): https://jsfiddle.net/kp98evf6/

P.S. хубавото на таймера е, че може да си нагласиш честотата на мигане :-P
При два браузъра стана с:
Код:
      <script type="text/javascript">
        function blink() {
        var blinks = document.getElementsByTagName('blink');
        for (var i = blinks.length - 1; i >= 0; i--) {
        var s = blinks[i];
        s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
        }
          window.setTimeout(blink, 1000);
        }
        if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
        else if (window.addEventListener) window.addEventListener("load", blink, false);
        else if (window.attachEvent) window.attachEvent("onload", blink);
        else window.onload = blink;
      </script>
и конкретно в таблицата:
Код:
<blink>0:0</blink>
Благодаря!
Активен

MX Linux version 18 "Continuum"
PC: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H61M-S2V-B3 rev.1.0; RAM=16Гб DDR3.

Naka

  • Напреднали
  • *****
  • Публикации: 3462
    • Профил
Re: CSS не мига текста
« Отговор #3 -: Nov 24, 2016, 10:51 »
Прочети за CSS анимация и не го прави с setTimeout() нито с JS камо ли с jquery.

Цитат
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
blink
    The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of Animations.

а в адреса на википедията https://en.wikipedia.org/wiki/Blink_element ти е даден много хубав пример с анимация.
Цитат
blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
  67% { opacity: 0 }
}

@-moz-keyframes blink {
  67% { opacity: 0 }
}

@-o-keyframes blink {
  67% { opacity: 0 }
}

@keyframes blink {
  67% { opacity: 0 }
}
Активен

Perl - the only language that looks the same before and after encryption.

3p0

  • Напреднали
  • *****
  • Публикации: 354
    • Профил
Re: CSS не мига текста
« Отговор #4 -: Nov 24, 2016, 13:12 »
Прочети за CSS анимация и не го прави с setTimeout() нито с JS камо ли с jquery.

Цитат
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
blink
    The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of Animations.

а в адреса на википедията https://en.wikipedia.org/wiki/Blink_element ти е даден много хубав пример с анимация.
Цитат
blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
  67% { opacity: 0 }
}

@-moz-keyframes blink {
  67% { opacity: 0 }
}

@-o-keyframes blink {
  67% { opacity: 0 }
}

@keyframes blink {
  67% { opacity: 0 }
}
Благодаря! - и този код ще го изпробвам ....
Активен

MX Linux version 18 "Continuum"
PC: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H61M-S2V-B3 rev.1.0; RAM=16Гб DDR3.

runtime

  • Напреднали
  • *****
  • Публикации: 807
  • Distribution: Ubuntu 14.04
  • Window Manager: Unity
  • LZ1DOT
    • Профил
    • WWW
Re: CSS не мига текста
« Отговор #5 -: Nov 24, 2016, 20:54 »
Прочети за CSS анимация и не го прави с setTimeout() нито с JS камо ли с jquery.

Цитат
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
blink
    The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. This value is deprecated in favor of Animations.

а в адреса на википедията https://en.wikipedia.org/wiki/Blink_element ти е даден много хубав пример с анимация.
Цитат
blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}

@-webkit-keyframes blink {
  67% { opacity: 0 }
}

@-moz-keyframes blink {
  67% { opacity: 0 }
}

@-o-keyframes blink {
  67% { opacity: 0 }
}

@keyframes blink {
  67% { opacity: 0 }
}

Може ли някаква обосновка защо да не го прави по този начин? Камо ли пък с jquery, най-малкото ако го ползва?
Щото това ми се струва много нафанатизирано изказване :) В добрия ред на мисли го казвам... И според теб какво стои във webkit когато чете CSS инструкциите за мигане?
« Последна редакция: Nov 24, 2016, 22:23 от runtime »
Активен

Naka

  • Напреднали
  • *****
  • Публикации: 3462
    • Профил
Re: CSS не мига текста
« Отговор #6 -: Nov 25, 2016, 12:08 »
Може ли някаква обосновка защо да не го прави по този начин? Камо ли пък с jquery, най-малкото ако го ползва?

Ами защото JS/jquery е тъмната страна на Силата. Ако може с CSS защо трябва да се прави с JS.

Много често когато трябва да се реши някакъв проблем, със  JS веднага може да се намери решение - ама това решение нито е бързо като код, нито ще е елгантано, нито ще е най-правилното. Понеже с JS всичко може, тя подлъгва да първо да се прави с нея - о тя може да върти цикли да има достъп до всеки елемент...............
Да ама не... много скоро нещата ще станат много заплетени и почти неработещи, ще има  setTimeout() върху  setTimeout()  върху  setTimeout() , Event върху event върху event ........

Да не говорим че с JS се допускат страшно много грешки.

Затова според мен ако има решение с CSS първо трябва то да се търси, даже и да е по-трудно за осмисляне отколкото въртенето на цикли.

пс:
---------
Според мен основната причина 90% от съвременните страници да са толкова тежки и бъгъви в интерфейсите е презахласването на програмистите (и писачите на CMS-и) по JQ и в частност по JS. Ами то такива лайна има набутани в една страница....... и нужни и ненужни. Ръгай чушки в боба.....там да има.
« Последна редакция: Nov 25, 2016, 12:25 от Naka »
Активен

Perl - the only language that looks the same before and after encryption.

runtime

  • Напреднали
  • *****
  • Публикации: 807
  • Distribution: Ubuntu 14.04
  • Window Manager: Unity
  • LZ1DOT
    • Профил
    • WWW
Re: CSS не мига текста
« Отговор #7 -: Nov 25, 2016, 14:14 »
До някоя част съм съгласен с теб. Така или инак един код може да стане прасешки без значение на какво го реализираш. Инак идеята ми беше, че след нещо, което стандарно не се подържа може да се направи и с JS. Що се касае до таймера, както казах еквивалентна е реализицията във webkit.

Аз като цяло не схващам идеята да се ползва нещо мигащо, което ако се търси фокус, то има и по-стилни методи, ама както и да е де.

Но не бива с лека ръка да се казва това не бива и онова не бива... Въпроса е как и за каква цел ще се ползва.
Хубавата, както и лошата страна в днешно време е именно изобилието :)  [_]3

Що се касае до JS, не мисля, че има алтернатива за сега. А има и доста развитие в него. От една страна е свободата да разпределиш изчеслителни ресурси при клиенти, а не да инвестираш в сървъри. Но, не само това де. Има си и добри и лоши страни :) Ето на пример в ECMAScript 6 вече имаме човешки обекти... вървят в правилната посока нещата :)
« Последна редакция: Nov 25, 2016, 14:21 от runtime »
Активен

Naka

  • Напреднали
  • *****
  • Публикации: 3462
    • Профил
Re: CSS не мига текста
« Отговор #8 -: Nov 25, 2016, 14:46 »
Мигащите работи за привличане на вниманието са много дразнещи. За разработчика може на първо време да изглеждат много яки, ама за потребителя постоянното мигане е изключително дразнещо. Най много да те напсуват, да затворят страницата и втори път да не дойдат.

Но ако трябва мигане, за да привлече вниманието, може да се направи да мигне само един път при зареждане и толкоз! И то да не е с много контрастен цвят.

За това съвет не го прави с мигане или ако има да е само един път.
« Последна редакция: Nov 25, 2016, 14:48 от Naka »
Активен

Perl - the only language that looks the same before and after encryption.

3p0

  • Напреднали
  • *****
  • Публикации: 354
    • Профил
Re: CSS не мига текста
« Отговор #9 -: Nov 25, 2016, 15:01 »
Мигащите работи за привличане на вниманието са много дразнещи. За разработчика може на първо време да изглеждат много яки, ама за потребителя постоянното мигане е изключително дразнещо. Най много да те напсуват, да затворят страницата и втори път да не дойдат.

Но ако трябва мигане, за да привлече вниманието, може да се направи да мигне само един път при зареждане и толкоз! И то да не е с много контрастен цвят.

За това съвет не го прави с мигане или ако има да е само един път.
Ще се опитам, да го направя, да мигне веднъж при пускане и да остане нормално видимо след това.
Активен

MX Linux version 18 "Continuum"
PC: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H61M-S2V-B3 rev.1.0; RAM=16Гб DDR3.

3p0

  • Напреднали
  • *****
  • Публикации: 354
    • Профил
Re: CSS не мига текста
« Отговор #10 -: Nov 26, 2017, 16:52 »
Успя ли да решиш проблема ?
Успях, но след една седмица се отказах от мигането, че наистина е изнервящо ....
Активен

MX Linux version 18 "Continuum"
PC: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H61M-S2V-B3 rev.1.0; RAM=16Гб DDR3.