CODEWITHSUNDEEP
javascriptjquerytabs
Lex de Willigen
Lex de Willigen

Reputation: 406

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

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.

Upvotes: 0

Views: 40

Answers (2)

Leandro
Leandro

Reputation: 114

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>

Upvotes: 1

A. Iglesias
A. Iglesias

Reputation: 2675

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...

Upvotes: 0

Related Questions