Display animation based on link extension #
Is it possible to set jQuery to catch the link # and display the animation from which it is hoisted?
Example:
Click link 1> /index.php#1 = ripple div 1
Click link 2> /index.php#2 = ripple div 2
Click link 3> /index.php#3 = ripple div 3
I currently have a manual / rules page and wants it to display the correct content when people get there from a specific link. I understand basic jQuery animations just by not giving them rules from the parent page.
source to share
1. Reading hash from URI
JS window.location.hash
will read the hash as "#1"
, which is a valid ID in HTML5
jQuery(function($) {
$( window.location.hash ).addClass("pulsate");
});
where you have DIV elements like
<div id="div1">I'm DIV 1</div>
and CSS like
.pulsate {
/* other styles here... */
animation: pulsate 0.5s ease-in-out;
animation-iteration-count: 5; /* Pulsate 5 times */
}
@keyframes pulsate {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
}
2. Reading the hash from the clicked link
If you are not interested in reading the URI hash, but you just have LInks like
<a class="animateButton" href="#div1">Animate DIV1</a>
than this is all you need:
$(".animateButton").on("click", function(){
$( this.hash ).addClass("pulsate").on("animationend", function(){
$(this).removeClass("pulsate");
});
});
.pulsate {
background: orange;
animation: pulsate 0.5s ease-in-out;
transition:0.5s;
animation-iteration-count: 3;
}
@-webkit-keyframes pulsate {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="animateButton" href="#1">#1</a>
<a class="animateButton" href="#2">#2</a>
<a class="animateButton" href="#3">#3</a>
<div id="1">I'm DIV #1</div>
<div id="2">I'm DIV #2</div>
<div id="3">I'm DIV #3</div>
source to share
It does not manage "from the parent page". You can get the hash parameter from the url of the page using location.hash
:
//index.php#1
location.hash //-> will return #1
//index.php#2
location.hash //-> will return #2
Then you can select it directly in the jQuery selector as $(location.hash)
. This will allow you to animate the target div.
$(document).ready(function() {
//Do your animation
$(location.hash).animate(/*...*/)
});
obs:
Remember divs with numeric IDs are only valid in HTML5
source to share
Here is the fiddle you are playing with. I didn't add animation, but leave it for you as an exercise. =]
Html
<a href="#section1">sec1</a>
<a href="#section2">sec2</a>
<a href="#section3">sec3</a>
Js
$("a").on('click', function(event){
var t = event.target.toString();
if (t.endsWith('1')){
alert('animation 1');
} else if (t.endsWith('2')){
alert('animation 2');
} else if (t.endsWith('3')){
alert('animation 3');
}
});
source to share
You should listen for hash changes. Try using a plugin like hashchange.
$(window).hashchange((function(){
var hash = window.location.hash.replace("#",'');
// remove previous animation from element if there one
if(hash) {
// do your animation adding class or with pure jquery
}
return arguments.callee; // return itself as the hashchange handler
})( )); // exec the first time and then at each hash changes
Remember to remove javascript class or animation fron previuos pulsing element.
source to share