'How to show button after refreshing the page with delay time? [duplicate]

I created one small function, what I want, after refreshing the page, is the button to show with some delay time..

I mean, for example, if I click the modify div, the page is going to refresh and show the button with 5000ms delay ( Refresh after 5000ms delay then the button wants to show).

Here is my fiddle..

FIDDLE HERE

I hope my question is understandable..

Here is my example snippet here..

// after page refresh show button with 5000ms delay

$(document).ready(function() {
  $("#modify_sec").click(function() {
    location.reload();
  }, 5000);
  $("#sec_get").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <ol class="breadcrumb float-sm-right cash-icons">

    <li class="breadcrumb-item mdfy_icon" id="modify_sec"><a href="#">Modify</a></li>
  </ol>
</div>

<!-- button -->

<div class="col-2">
  <div class="data_btn" id="sec_get">
    <button type="button" id="getBtn">Get data</button>
  </div>
</div>
javascriptjqueryhtmlcssjavascriptwordpressmathjaxmathtype


Solution 1:[1]

you can set a timeout with a delay you want in milliseconds :

setTimeout(function(){ $("#sec_get").show(); }, 5000);

Solution 2:[2]

Hope this help you. I have tested this on fiddle but i think the code wont work here due to LocalStorage.

// after page refresh show button
$(document).ready(function() {
    $("#modify_sec").click(function() {
        window.localStorage.setItem("isLink", false);
        location.reload();
    });
  if(window.localStorage.getItem("isLink"))
  	$('#modify_sec').addClass('hide');
  setTimeout(function(){
    $("#sec_get").removeClass('hide');
  },5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6">
  <ol class="breadcrumb float-sm-right cash-icons">

    <li class="breadcrumb-item mdfy_icon" id="modify_sec"><a href="#">Modify</a></li>
  </ol>
</div>

<!-- button -->

<div class="col-2">
  <div class="data_btn hide" id="sec_get">
    <button type="button" id="getBtn">Get data</button>
  </div>
</div>

Solution 3:[3]

I also tried mathjax recently on one website and simple mathjax plugin was pretty cool and user friendly to use. So, if you want you can use that. here is the plugin link--- https://wordpress.org/plugins/simple-mathjax/ This wordpress plugin is yet another simple plugin to load the MathJax scripts at the bottom of all of your pages. It uses a very all-inclusive mathjax configuration by default, with $’s and $$’s the default delimeters for in-line and displayed equations.

Solution 4:[4]

To use MathJax on WordPress, write the following code in header.php. (I put the code just before .) That’s it!!

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ["\(","\)"]] } });
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
</script>
<meta http-equiv="X-UA-Compatible" CONTENT="IE=EmulateIE7" />

for details you can visit here --- https://yutsumura.com/mathjax-in-wordpress/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 nabilinfo
Solution 2
Solution 3 Anny
Solution 4 Anny

Related Questions