Migający tytuł w menu

[Diron18]

Witam

Mam pytanie, bo coś cieżko mi to idzie;P Mam na stronie w Joomla 1.5 menu w dwóch pozycjach (poziome w pozycji top, pionowe w pozycji right). Chciałem, aby tytuł menu w pozycji right migał w odpowiedni sposób i aby działało to w większości przeglądarek, komputerów, laptopów czy telefonach komórkowych. Użyłem metody CSS h2 {text-decoration:blink}, ale niestety nie zawsze to działa. Mam już napisany javascript, ale nie wiem gdzie to dodać. Szukałem w helper.php i w default.php w mod_mainmenu, ale nie mogłe sobie poradzić. Bardzo proszę o pomoc. Poniżej podaje kod javascript dla chętnych.


<SCRIPT language=JavaScript>
<!--
var i=0;
function blink(text) {
if(document.layers) document.write('<span class=normal><blink>'+text+'</blink></span>');
else {
document.write('<span class=normal id=\"s'+i+'\">'+text+'</span>');
count(i++);
}}
function count(i) {
var s=document.getElementById("s"+i);
with(s.style)
visibility=(visibility=="visible")?"hidden":"visible";
setTimeout("count("+i+")",455);}
//-->
</SCRIPT>


<SCRIPT>blink("Tytuł Menu");</SCRIPT>

P.S. document.getElementById zmieniałem na document.getElementByClass i kombinowałem jak mogłem, jednak się nie udało ;/

[Dziudek]

Witam,

Prawdę mówiąc kod tego skryptu wygląda jakby był stworzony gdzieś pod koniec lat 90. document.write to zło - może nieźle popsuć indeksowanie strony przez Google. Osobiście proponuję poczytać o Module Animation w CSS - zadziała na większosci przeglądarek (http://caniuse.com/#search=animation) a nie wymaga JS. A dla IE9 i niższych można zastosować prosty skrypt JS, który będzie dodawał klasę np. unvisible, która sprawi, że element znika. Czyli mniej więcej coś takiego:


(function() {
$$('SELEKTOR ELEMENTÓW DO ANIMACJI').toggleClass('unvisible');
}).periodical(INTERWAŁ)

Kod w MooTools, bo są one obecne w Joomla! więc nie ma się co katować czystym JS, szczególnie, że ma to działać w IE ;)

Do samej animacji z użyciem Animation w CSS, polecam sugerować się wpisem Lea Verou: http://lea.verou.me/2012/12/animations-with-one-keyframe/

[Diron18]

Dziudek jesteś suuuper!! ^^ O tym bajerze CSS nigdy nie słyszałem i nigdy nie miałem z czymś takim do czynienia :up: A jeśli chodzi o kod MooTools to mam po prostu wpisać to w kod w następujący sposób:

(function() { $$('h2').toggleClass('unvisible'); }).periodical(1)

i powinno działać? Będzie to powodować jedynie zmiany widoczności, a jak dodać do tego animacje kolorem?
Pytam o zapis, bo nie znam poprawnego zapisu interwału i selektora. Jeszcze MooTools się niestety nie uczyłem.

Pozdro dla łódzkiego, bo też pochodzę ^^

[Dziudek]

Aż tak prosto z tym kodem nie ma ;)

1. INTERWAŁ określamy w milisekundach - zatem przynajmniej 500ms jest wskazane ;)

2. Trzeba jeszcze zdefiniować klasę unvisible w CSS i ustawić jej np. display:none - żeby elementy znikały po jej dodaniu.

3. Selektor jest chyba ok - wtedy zostaną wybrane wszystkie nagłówki h2 na stronie

4. Co do animacji kolorem - zasadniczo animacja koloru i widoczności jest trochę bez sensu, bo przecież nie będzie widać przejścia. Można zrobić samą animację kolorem - wtedy w klasie unvisible w CSS zamiast display: none, trzeba ustawić inny kolor, interwał na powiedzmy 500ms i do tego elementom (w tym wypadku h2) w CSS trzeba nadać taką właściwość:



-webkit-transition: color .5s ease-out;
-moz-transition: color .5s ease-out;
-ms-transition: color .5s ease-out;
-o-transition: color .5s ease-out;
transition: color .5s ease-out;


i wtedy przejście kolorów powinno być płynne z jednego do drugiego.