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

3p0

  • Участник
  • *****
  • Публикации: 316
    • Профил
CSS не мига текста
« -: Ное 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>
Не премигва обаче?
Активен

PC1: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H81M-S2H rev.1.0; RAM=16Гб DDR3; VIDEO=SAPPHIRE ATI RADEON 4850.
PC2: AMD Athlon (tm) 64 X2 Dual Core Processor 5400+ 2.80 GHz; MB=GIGABYTE M61PME-S2P; RAM=8Гб DDR2; Video=NVIDIA nForce 6150SE (6100-430) - built in the MB.

runtime

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

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

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

3p0

  • Участник
  • *****
  • Публикации: 316
    • Профил
Re: CSS не мига текста
« Отговор #2 -: Ное 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>
Благодаря!
Активен

PC1: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H81M-S2H rev.1.0; RAM=16Гб DDR3; VIDEO=SAPPHIRE ATI RADEON 4850.
PC2: AMD Athlon (tm) 64 X2 Dual Core Processor 5400+ 2.80 GHz; MB=GIGABYTE M61PME-S2P; RAM=8Гб DDR2; Video=NVIDIA nForce 6150SE (6100-430) - built in the MB.

Naka

  • Участник
  • *****
  • Публикации: 1971
    • Профил
Re: CSS не мига текста
« Отговор #3 -: Ное 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

  • Участник
  • *****
  • Публикации: 316
    • Профил
Re: CSS не мига текста
« Отговор #4 -: Ное 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 }
}
Благодаря! - и този код ще го изпробвам ....
Активен

PC1: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H81M-S2H rev.1.0; RAM=16Гб DDR3; VIDEO=SAPPHIRE ATI RADEON 4850.
PC2: AMD Athlon (tm) 64 X2 Dual Core Processor 5400+ 2.80 GHz; MB=GIGABYTE M61PME-S2P; RAM=8Гб DDR2; Video=NVIDIA nForce 6150SE (6100-430) - built in the MB.

runtime

  • Участник
  • *****
  • Публикации: 796
  • Distribution: Ubuntu 14.04
  • Window Manager: Unity
  • LZ1DOT
    • Профил
    • WWW
Re: CSS не мига текста
« Отговор #5 -: Ное 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 инструкциите за мигане?
« Последна редакция: Ное 24, 2016, 22:23 от runtime »
Активен

Naka

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

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

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

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

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

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

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

runtime

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

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

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

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

Naka

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

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

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

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

3p0

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

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

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

PC1: Intel® Celeron® CPU G540 2.50GHz; MB=Gigabyte GA-H81M-S2H rev.1.0; RAM=16Гб DDR3; VIDEO=SAPPHIRE ATI RADEON 4850.
PC2: AMD Athlon (tm) 64 X2 Dual Core Processor 5400+ 2.80 GHz; MB=GIGABYTE M61PME-S2P; RAM=8Гб DDR2; Video=NVIDIA nForce 6150SE (6100-430) - built in the MB.

mrsuperman

  • Участник
  • *****
  • Публикации: 5
    • Профил
Re: CSS не мига текста
« Отговор #10 -: Сеп 13, 2017, 14:07 »
Успя ли да решиш проблема ?
Активен