js challenge...

Most likely this is not a challenge for you but it is for me. I have a hyperlink and upon click takes user to an anchor like:

<a id="UploadVideo">Blink Test</a>

Open in new window


Is it possible to include an event (like got_focus, not sure it exists) where upon id="UploadVideo" getting the focus, the text Blink Test will blink a couple of times? If not, can you think of any other solution with a similar outcome? Possibly planting a cookie to help a js routine start blinking text Blink Test a couple of times.

At this point the page has .html extension. Session variables possible maybe possible later.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
A jsfiddle example using jQuery.

http://jsfiddle.net/woxsa9wp/
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Tom,

I have put together the following using your link. But when I click on the hyperlink on top of the page (Go to blink test), it takes me to the correct location but Blink Test is not blinking. How can I correct this?
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
	<style type="text/css">
	#UploadVideo {
    cursor: pointer
	}
	</style>
	<script>
		var t;
		$('#UploadVideo').hover(function () {
			var a = $(this),blinks = 0;
			t = setInterval(function () {
				a.fadeOut(100, function () {
					a.fadeIn(100);
					(blinks === 2) ? clearInterval(t) : blinks++;
				});
			}, 800);
		}, function () {
			clearInterval(t);
		});
	</script>
</head>
<body>
<a href="#UploadVideo">Go to blink test</a>
<p>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
<a id="UploadVideo">Blink Test</a>
</body>
</html>

Open in new window

Tom BeckCommented:
A few problems.

1.) I misunderstood the situation so my jsfiddle did not quite reflect it properly.
2.) The solution was jQuery so you need the jQuery library.
3.) You put the script in the head so you need to wrap it in a document "ready" function.
4.) The event you needed to capture is the "click" of the link at the top so that element needed an id or class to use as a selector. I had used a "hover" event in my fiddle. Hover events have a callback function but click events do not so I had to remove that.
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
	<style type="text/css">
	</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		var t;
		$('#UploadVideoLink').click(function() {
			var a = $('#UploadVideo'),blinks = 0;
			t = setInterval(function() {
				a.fadeOut(100, function() {
					a.fadeIn(100);
					(blinks === 2) ? clearInterval(t) : blinks++;
				});
			}, 800);
		});
	});
	</script>
</head>
<body>
<a href="#UploadVideo" id="UploadVideoLink">Go to blink test</a>
<p>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
dhhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br/><br/>
<a id="UploadVideo">Blink Test</a>
</body>
</html>

Open in new window

Sorry for the confusion.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thanks Tom,

I am trying it now. Sorry for the poor description. A new question, related but different, I am preparing to ask. I will post it shortly. This time, the interaction is between two pages. I am hoping that we could pass a parameter of some kind (with click on index.html) to myjs.js to execute effecting target.html.

The mechanism could be any practical ways of doing this so long as produces the same effect. I understand a js code maybe could not be executed in myjs.js to manipulate target.html. Now, for whatever it worth, here is the image:
jsIndexToTarget
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Your solution works perfectly.

Thank you.
Julian HansenCommented:
This is relatively simple with tiny bit of JavaScript and some CSS transitions.

First the CSS
<style type="text/css">
.blink {
  animation: blinker 1s linear 3;
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}
</style>

Open in new window

Next the Javascript
<script>
function hashChanged()
{
  var hash = window.location.hash;
  $(hash).addClass('blink');
}
window.onhashchange = hashChanged;
</script>

Open in new window

Working sample here
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Julian,

Your time is about 9:30 pm, I thought you are possibly done with the work and are no longer on line. I should have waited a bit longer to share the points. This because your solution, of course, works and that I had asked for your help when I just posted the question and you responded to it.

Do you want me to ask the question to be reopened?

Regards,

Mike
Tom BeckCommented:
Just be advised with using @keyframes. It's not supported in Internet Explorer older than v10. Even Chrome older than v43 doesn't support it and Chrome is only at v45.
Julian HansenCommented:
@Mike - no need to reopen.

@Tom - IE9 has less than 2% of the browser share (depending on what stats you look at) - personally for blilnking text I am not going to get too excited over that small percentage who don't see the text flash. If they are on IE9 or older they are going to be hitting so many issues on the web as it is that whatever inconvenience this causes them - will be lost in the noise. Personally I don't support IE on any level - it is merely a tool for installing FF and Chrome - nothing more.
Tom BeckCommented:
I agree with your points and I subscribe to that point of view in my own work. However, I generally try not to make decisions for people asking questions on EE as to what browsers they should support or not. I would not be averse to providing a CSS3 only solution but I would still point out the browser compatibility issues at the same time. Otherwise the asker will have a new question on EE asking why it does not work in browser X. Then we have go back and provide a jQuery solution anyway. I have a Mac so I don't even have IE as a testing platform unless I fire up a virtual machine.
Julian HansenCommented:
I have no issue about prescribing a non-IE9 or lower policy - the sooner those dissappear the better and as long as people actively support them they are going to hang around.

CSS transitions are the future of animations and the like - jQuery will do the job but CSS is in many cases more preferable - in this case I don't believe that the backward compatibility issue holds water.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.