js challenge...3

I have another good solution from Tom at: http://www.experts-exchange.com/questions/28745520/js-challenge-2.html

Expected functionality: User clicks on Go to blink test hyperlink on index.html to navigate to Blink Test on target.html to starts blinking Blink Test text for a few times.

But, for the current question,  There are many hyperlinks on index.html like
Go to blink test 1
Go to blink test 2
Go to blink test 3
.
.

And it is expected to navigate to the matching anchor at target.html like
Blink Test 1
Blink Test 2
Blink Test 2
.
.

Additionally, it will be helpful to make the text appear bold while blinking.
LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
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:
Very similar to the last solution.

index.html
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
<a href="target.html?lnk=UploadVideo1">Go to blink test 1</a><br />
<a href="target.html?lnk=UploadVideo2">Go to blink test 2</a><br />
<a href="target.html?lnk=UploadVideo3">Go to blink test 3</a>
</body>
</html>

Open in new window

target.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
		var t;
		var urlSearch = getParameterByName('lnk');
		if (urlSearch.indexOf("UploadVideo") != -1) {		
			var a = $('#' + urlSearch),blinks = 0;
			a.css('font-weight', 'bold');
			$('#' + urlSearch + 'Link')[0].click();
			t = setInterval(function() {
				a.fadeOut(100, function() {
					a.fadeIn(100);
					if (blinks === 2) {
						 clearInterval(t) ;
						 a.css('font-weight', 'normal');
					} else {
						blinks++;
					}			
				});
			}, 800);
		}
	});
	function getParameterByName(name) {
		name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
		var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
			results = regex.exec(location.search);
		return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
	}
	</script>
</head>

<body>
<a href="#UploadVideo1" id="UploadVideo1Link">Go to blink test</a>
<a href="#UploadVideo2" id="UploadVideo2Link">Go to blink test</a>
<a href="#UploadVideo3" id="UploadVideo3Link">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/>
</p>
<a id="UploadVideo1">Blink Test 1</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/>
</p>
<a id="UploadVideo2">Blink Test 2</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/>
</p>
<a id="UploadVideo3">Blink Test 3</a>
</body>
</html>

Open in new window

0

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
Julian HansenCommented:
The solution I posted from your earlier question will do the trick.

Refer this link http://www.marcorpsa.com/ee/t1159.html#blinktest
0
Julian HansenCommented:
Updated sample to include changes to make flashing text bold and removing the bold after animation ends
<style type="text/css">
.blink {
  animation: blinker 1s linear 3;
  font-weight: bold;
}
@keyframes blinker {  
  50% { opacity: 0.0; }
}
</style>

Open in new window

<script>
function hashChanged()
{
  var hash = window.location.hash;
  $(hash).addClass('blink').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
    $(this).removeClass('blink');
  });
}
window.onhashchange = hashChanged;
if (window.location.hash != '') hashChanged();
</script>

Open in new window

Updated sample here (http://www.marcorpsa.com/ee/t1159.html#blinktest)
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.