Run JQuery only web certain part of the page (tab) is clicked or loaded

Question

I'm using the following lines of code to make some text appear after a few seconds. However, I would like that to happen when my second tab is clicked. How can I manage to do so?

The JQuery:

$("#links2").click(function(){
    $(document).ready(function() {
          $('.animate').hide().delay(3000).fadeIn(2200);
    });
}

The part of the page:

<section id="s2" class="section">
    <div class="container vertical center" style="margin-top: 10px;">
        <i class="fa fa-user fa-4x"></i>
    </div>
    <div class="container vertical center" style="">
        <h2 style="font-weight: 900; font-family: arial; color: black;">
            WHO AM I?
        </h2>
    </div>
    <div class="container vertical center" style="">
        <p>
            <b>Hi!</b> My name is Lex. 
            <h3 class="animate">And I'm developer</h3>
        </p>
    </div>
</section>

The menu:

<div id="menu_block" name="menu_block" class="menu_block right">
    <nav class="nav_block">
        <a href="#s1">Home</a>
        <a id="links2" href="#s2">About</a>
        <a href="#s3">Projects</a>
        <a href="#s4">Skills</a>
        <a href="#s5">Resume</a>
        <a href="#s6">Contact</a>
    </nav>
</div>

I've found topics like this one. But I don't know how to use that in my situation. Also, I'm very new to javascript and JQuery, so I don't really know how to work with it. It's all a bit new to me.

However, the code I've put in my question would also not work when people would follow a direct link link this: http://localhost/JS/#s2, because the s2 link wouldn't be clicked in that situation. And I would also want it to work then.

Well, as I said literally, I have to clue on how to get this done. I don't know how I could activate this script only when that second tab is clicked — Lex de Willigen, Sep 16 '17 at 22:22
So you are looking for someone to write this code for you? Did you search at all? — Dekel, Sep 16 '17 at 22:22
Of course, there are many topics on something like this, but I just can't find one that works the same as mine. The one for instance that I've linked in the question. However, I don't know how to use this in my situation — Lex de Willigen, Sep 16 '17 at 22:24
I don't see anything that is related to `click` in your code, and this is what you are asking for. At least show that you trying something... — Dekel, Sep 16 '17 at 22:26
I've tried the code that is now in my question. That's just not working. The text now appears without any delay. I've updated my question with more information. — Lex de Willigen, Sep 16 '17 at 22:31

Leandro · Accepted Answer · 2017-09-17T22:03:30.663

If I understand your question correctly you want to execute the inside your document ready when you click at one element right?

To do that you need can use the .click event. You can find information at this link: https://api.jquery.com/click/

The sintax are very simple: $(selector).click(function(){//your code.})

Check the snippet

$("#links2").click(function(){
  //your code goes here
   $('.animate').hide().delay(3000).fadeIn(2200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="menu_block" name="menu_block" class="menu_block right">
    <nav class="nav_block">
        <a href="#s1">Home</a>
        <a id="links2" href="#s2">About</a>
        <a href="#s3">Projects</a>
        <a href="#s4">Skills</a>
        <a href="#s5">Resume</a>
        <a href="#s6">Contact</a>
    </nav>
</div>

<div class="animate"> Ola Mundo</div>

score 0 · Answer 2 · answered Sep 17 '17 at 07:15

From the code of your question, I looks like your putting the $(document).ready function INSIDE of the click event, so probably the click event is being generated before the a link is created, so is not associated. Try this...

$(document).ready(function() {

    $("#links2").click(function(){
        $('.animate').hide().delay(3000).fadeIn(2200);
    });

});

I hope it helps...

Run JQuery only web certain part of the page (tab) is clicked or loaded

2 Answers2