Blink Text

[aRMY83]

Thought I'd share what I came across the other day when doing a search for "Blink".

Let us do a simple "Member is Online" in the Mini-Profile to blink.

Place this code in your Global Footer:


<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>

Change window.setTimeout(blink, 1000); for the rate of blinking. The lower the number, the faster the blink rate. Default = 1000

Now to have "Member is Online" blink:

Go to Admin > Structure > Layout Templates > Mini-Profile

and look for (line 27 or so)

{if $[user.is_online]}<br /><span class="italic">Member is Online</span>{/if}

and place this:

<blink> just before Member

and this </blink> right after Online

so it will now look like this:

{if $[user.is_online]}<br /><span class="italic"><blink>Member is Online</blink>{/if}

If you would like to see an example, then place this:

<center><font size="3" color="#00ff00"><blink>Text to blink here</blink></font></center><br />

in your global or main header.

[aRMY83]

Hello jrryan

They do work somewhat identical, but the best way to explain it is this:

The blink element is a non-standard presentational HTML element that indicates to a user agent (generally a web browser) that the page author intends the content of the element to blink (that is, alternate between being visible and invisible).

and pulsate is to make a text link glow/pulsate continuously while staying visible.

I'm sure others may have a better definition of blink vs. pulsate (coding terms) and if so, please input.

To get a better feel of the difference, take a look here:

Test Site

The white "Gender" is blinking and the red "I am offline" is pulsating.

Will keep this link for all to view until 10 January 2014 in which it then will be closed for viewing.

Thanks on the "congrats on that code".

[Forever Sunshine]

I would love to have this for just the notifications bubble but am unsure how to accomplish this.

Can anyone help please?

Thanks

[Tumbleweed]

Mar 12, 2014 11:19:28 GMT -8 Forever Sunshine said:

I would love to have this for just the notifications bubble but am unsure how to accomplish this.

Can anyone help please?

Thanks

Well, I got this far. I can get it to pulsate (sorry, not blink) but then it disappears and I'm really crappy at jquery/javascript so not sure how to make it return to it's original state. IT does returns after every newly loaded page so it could be a good thing if you really don't want those showing all the time and a bad thing if you do.

In the global headers:

<script>
$(document).ready(function() {
$( ".tip-holder" ).toggle( "pulsate" );
});
</script>

However, this will pulsate until the messages/notifications tip goes away when you read message, check notifications:

<script>
$(document).ready(function() {
$( ".tip-holder" ).toggle( "pulsate",{ times:3000 }, 500 );
});
</script>

I'm trying to get it to pulsate a color but no luck so far. Oh, forgot to say, only tested in Chrome.

 

[Forever Sunshine]

Tumbleweed thanks so much for attempting it. Pulsating is what I want really; not blinking. So the second one in your post is the one to use for pulsating the little notifications bubbles? It makes sense the bubble will only pulsate when visible. I'm not too worried about color. But wouldn't it be just a matter of picking a color in the Visual Editor? I can't remember if that's where I saw it.

[Tumbleweed]

Mar 13, 2014 7:44:50 GMT -8 Forever Sunshine said:

Tumbleweed thanks so much for attempting it. Pulsating is what I want really; not blinking. So the second one in your post is the one to use for pulsating the little notifications bubbles? It makes sense the bubble will only pulsate when visible. I'm not too worried about color. But wouldn't it be just a matter of picking a color in the Visual Editor? I can't remember if that's where I saw it.

They both pulsate the bubbles. The first one does it a few times and then the bubble vanishes until you refresh the page or click on a board or something. Then it comes back, pulsates a few times and goes away again. Of course if you take action and read your pm's/notifications it won't appear again.

The second one pulsates all the time until you take action to look at your notifications/pm's. So it will pulsate for eternity until you take care look at the pm's/notifications.

And whichever code you decide on, goes in your global headers. The color thing, I just thought it would be cool, when it pulsates, it would change color. I was just doing that more for the sake of just figuring out how to do it.

[Forever Sunshine]

Tumbleweed that would be pretty cool if it pulsated different colors. If you continue to work on it and figure it out, tag me please. If not, no big deal on my end.

Thank you so much for your effort.

[Mike]

aRMY83,
Thanks for the code. I want the new icon to blink for new threads. How would I do that?

Edit:Never mind army83 got with it