CODEWITHSUNDEEP
javascriptjqueryhtml
Neela
Neela

Reputation: 341

Jquery working on console but not on page

I am trying to hide a div after certain time once its loaded and its working when I do this in the console but it doesnt work when I put this code in the actual webpage.

 (function ($) {
  if ($('#insightera_widget_content').length) {
  $('#insightera_widget_content').delay(10000).fadeOut('slow');
  }
}(jQuery));

The div insightera_widget_content cannot be seen when I view the source code as well, but I can see it on the Inspector. It loads from some external widget.

enter image description here I have tried using the below to the page too and it doesn't work at all.

  <script>
    $(document).ready(function() { 
    if ($('#insightera_widget_content').length) { 
    $('#insightera_widget_content').delay(10000).fadeOut('slow');}
    }); 
    </script>

Any suggestions?

Upvotes: 3

Views: 3486

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

Setup a setInterval() to check for the existence of the element, and once it finds it, run your jquery and clear the interval.

var interval = setInterval(function() {
  if ($('#insightera_widget_content').length) {
    $('#insightera_widget_content').delay(10000).fadeOut('slow');
    clearInterval(interval);
  }
}, 1000)

/* you don't need this part - just simulating the widget adding the code to the page */
setTimeout(function() {
  $('body').append('<div id="insightera_widget_content">insightera_widget_content</div>');
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Related Questions