CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coolguy
Coolguy

Reputation: 2285

JQuery run a function when a div shows

I want to run a function when a div shows.

HTML:

<div id="holder">
    <div id="main1" class="container-fluid">
        <h1>Header 1</h1>
        <div class="btn btn-default pull-right" onclick="show('main2');">Next</div>
    </div>
    <div id="main2" class="container-fluid" style="display:none;">
        <h1>Header 2</h1>
        <div class="btn btn-default pull-right" onclick="show('main3');">Next</div>
    </div>
    <div id="main3" class="container-fluid" style="display:none;">
        <h1>Header 3</h1>
    </div>
</div>

JS:

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("no such element");
        return;
    }

    var pages = document.getElementsByClassName('container-fluid');
    for (var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }

    ele.style.display = 'block';
}

I want to run a function when my #main3 shows. The function is to set a timer so that after showing #main3 for 10 sec, it will show #main1.

Now how do I detect when my #main3 shows?

Upvotes: 0

Views: 181

Answers (4)

Parkash Kumar
Parkash Kumar

Reputation: 4730

You can check for elementID, if it is main3, then set setTimeout for 10000 ms (10s) and call show('main1') in timeout after the line ele.style.display = 'block'; as following:

function show(elementID) {
    var ele = document.getElementById(elementID);
    if (!ele) {
        alert("no such element");
        return;
    }

    var pages = document.getElementsByClassName('container-fluid');
    for(var i = 0; i < pages.length; i++) {
        pages[i].style.display = 'none';
    }

    ele.style.display = 'block';

    if(elementID == "main3"){
        setTimeout(function(){ show("main1"); }, 10000);
    }
}

DEMO

Upvotes: 1

Vibhesh Kaul
Vibhesh Kaul

Reputation: 2613

function show(elementID) {
var ele = document.getElementById(elementID);
if (!ele) {
    alert("no such element");
    return;
}

var pages = document.getElementsByClassName('container-fluid');
for(var i = 0; i < pages.length; i++) {
    pages[i].style.display = 'none';
}

ele.style.display = 'block';
if(elementID=='main3'){

 yourFunction();// call your function here!

}
}

Upvotes: 0

Jai
Jai

Reputation: 74738

after this: 

 ele.style.display = 'block';

you can have a check like: 

 ele.style.display = 'block';
 if(ele.id === "main3"){
    // call it here.
 }

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Since you have used jQuery tag, you can use a jQuery solution in which we can see whether the current tab is the last one if so then use a timer to show the first one like

jQuery(function($) {
  $('#holder .nxt').click(function() {
    var $parent = $(this).parent();
    var $next = $parent.hide().next().show();
    if ($next.is(':last-child')) {
      setTimeout(function() {
        $next.hide().siblings().first().show();
      }, 2500)
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
  <div id="main1" class="container-fluid">
    <h1>Header 1</h1>
    <div class="btn btn-default pull-right nxt">Next</div>
  </div>
  <div id="main2" class="container-fluid" style="display:none;">
    <h1>Header 2</h1>
    <div class="btn btn-default pull-right nxt">Next</div>
  </div>
  <div id="main3" class="container-fluid" style="display:none;">
    <h1>Header 3</h1>
  </div>
</div>

Upvotes: 0

Related Questions