Link to home
Start Free TrialLog in
Avatar of Mike Eghtebas
Mike EghtebasFlag for United States of America

asked on

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.
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

A jsfiddle example using jQuery.

http://jsfiddle.net/woxsa9wp/
Avatar of Mike Eghtebas

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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:
User generated image
Your solution works perfectly.

Thank you.
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
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
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.
@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.
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.
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.