CODEWITHSUNDEEP
javascriptjquery
James Lawson
James Lawson

Reputation: 419

Display animation based on link # extension

Is it possible to set jQuery up to catch a # link and display an animation based on which one it picks up?

Example:

Click Link 1 > /index.php#1 = pulsate div 1

Click Link 2 > /index.php#2 = pulsate div 2

Click Link 3 > /index.php#3 = pulsate div 3

I currently have a guide/rule page, and it want it to highlight the correct content when people are taken there by a specific link. I understand basic jQuery animations, just not giving them rules from a parent page.

Upvotes: 3

Views: 54

Answers (4)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

1. Read hash from URI

JS's window.location.hash will read the hash like "#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 a CSS class 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. Read hash from clicked link

If you're not interested in reading the URI's hash but you have simply 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>

Upvotes: 2

Luca Colonnello
Luca Colonnello

Reputation: 1456

You have to listen to the hash changes. Try to use a plugin like hashchange.

$(window).hashchange((function(){
      var hash = window.location.hash.replace("#",'');
  // remove previous animation from element if there's 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

Remeber to remove the class or the javascript animation fron previuos pulsating element.

jQuery hashchange plugin

Upvotes: 1

Alp
Alp

Reputation: 3105

Here is a fiddle that you play with it. I didn't add animations but left it to 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');
    }
});

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

It's not rules "from a parent page". You can get the hash parameter from a page's url by 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 your jQuery selector as $(location.hash). This will enable you to animate the targeted div.

$(document).ready(function() {
    //Do your animation
    $(location.hash).animate(/*...*/)
});

obs:

Remember that divs with numeric ids are only valid in HTML5

Upvotes: 1

Related Questions