/    Sign up×
Community /Pin to ProfileBookmark

Link *Flickers* When Clicked…

Copy linkTweet thisAlerts:
Jul 17.2005

After a user clicks a link, I want it to *flicker* for a second, indicating that the user has made a selection. How is this accomplished?

Thank you for an help.

Regards,

bubbis

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@d3ikJul 17.2005 — Wrote this in notepad, didn't test it, but hopefully you get the idea.

[CODE]
<style type="text/css">
.initialState
{
color: #000000;
}

.flickerState
{
color: #000099;
}
</style>

<script type="text/javascript">
function flicker(linkObject, url, flickerCount) {
if( !flickerCount ) {
var flickerCount = 0;
}


if( linkObject.className == 'initialState' ) {
linkObject.className = 'flickerState';
}else{
linkObject.className = 'initialState';
}

flickerCount++;

if( flickerCount < 10 ) {
setTimeout( "flicker( linkObject, url, flickerCount )", 500 );
}else{
window.location = url;
}
}
</script>

<a class="initialState" href="#" onclick="flicker( this, newURLGoesHere )">Click Me</a>
[/CODE]
Copy linkTweet thisAlerts:
@bubbisthedogauthorJul 17.2005 — Thanks for the reply, d3ik!

I posted your code into the body of a standard ole HTML document; I got "Error on Page" from IE. Was something supposed to go into the <HEAD> area?

Here's what I did; please tell me if I did something wrong, friend:
[CODE]
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
.initialState
{
color: #000000;
}

.flickerState
{
color: #000099;
}
</style>

<script type="text/javascript">
function flicker(linkObject, 'http://google.com', flickerCount) {
if( !flickerCount ) {
var flickerCount = 0;
}


if( linkObject.className == 'initialState' ) {
linkObject.className = 'flickerState';
}else{
linkObject.className = 'initialState';
}

flickerCount++;

if( flickerCount < 10 ) {
setTimeout( "flicker( linkObject, 'http://google.com', flickerCount )", 500 );
}else{
window.location = 'http://google.com'';
}
}
</script>

<a class="initialState" href="#" onclick="flicker( this, 'http://cnn.com' )">Click Me</a>
</body>
</html>
[/CODE]
Regards,

bubbis
Copy linkTweet thisAlerts:
@d3ikJul 17.2005 — Someone else might be able to post a more streamlined bit of code, but here's what I came up with:

[CODE]
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
.initialState
{
color: #000000;
}

.flickerState
{
color: red;
}
</style>

<script type="text/javascript">

function flicker(linkObject, url) {

var flickerCount = 0;

// class names
var firstClassName = 'initialState';
var secondClassName = 'flickerState';

// how long between color changes? (in milliseconds)
var flickerDuration = 500;
var flickersBeforeRedirect = 10;

this.flickerCycle = function() {

if( linkObject.className == firstClassName ) {
linkObject.className = secondClassName;
}else{
linkObject.className = firstClassName;
}

flickerCount++;

if( flickerCount < flickersBeforeRedirect ) {
setTimeout( this.flickerCycle, flickerDuration );
}else{
window.location = url;
}


};

this.flickerCycle();


}
</script>

<a class="initialState" href="#" onclick="flicker( this, 'http://cnn.com' )">Click Me</a>
</body>
</html>
[/CODE]

I actually tested it this time and all seems to be working. Let me know if you have any problems.
Copy linkTweet thisAlerts:
@bubbisthedogauthorJul 17.2005 — It does indeed work, d3! Thanks so much for taking the time to do that for me. It will be quite useful...

The thing is that this is somewhat of a 'special' case. I'm trying to open a music file from my web server via an embedded media player. I already had an onlick method running in my song hyperlinks, so I added that to yours:
[CODE]
<a class="initialState" href="#" onclick="flicker( this, 'http://pseudoplace.com/source/01 Track 1 cor.wma' );[COLOR=Red]document.all.plamus.filename=''http://pseudoplace.com/source/01 Track 1 cor.wma';return false"[/COLOR]>Click Me</a>
[/CODE]
Problem is that the song now opens in my default player (Real). How can I set the default to play in the embedded media player?

Thanks again, d3; you rock!

Regards,

bubbis
Copy linkTweet thisAlerts:
@bubbisthedogauthorJul 19.2005 — LOL :o , the easy fix was just to remove the "url" parameter from flicker(). So then the hyperlink tag looks like this:
[CODE]
<a href="pseudosong.wma" onclick="flicker(this); PlayIt(this.href);return false">listen</a>
[/CODE]
My bad! Thanks for the help!

Regards,

bubbis
×

Success!

Help @bubbisthedog spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...