Jquery working on console but not on page - javascript

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

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>

Related

arrival.js not detecting injected element

I am trying out the arrival.js library to detect when an element is injected into the body or is somehow available in the DOM. This is the code I am trying in JS:
setTimeout(function() {
$("body").append("<p class = 'foo'>Yep</p>");
}, 5000);
$(function() {
$(document).arrive(".foo", function() {
alert("hell Yeah");
});
});
Problem is, the element does get appended to the body after 5 seconds, but the alert never comes up. Any idea how to make it work as expected?
This is the fiddle.
Remove arrive.min.js in resource and use this cdn link
https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js
fiddle

How to merge two JavaScripts as one

I have these two JavaScripts. One is for the preloader and the other ones are for mail chimp subscribe form.
In my MailChimp account, I've set the form to appear after 20seconds but my problem is, it loads faster than my webpage and sometimes it would appear before my preloader is gone. It's really not what I want.
Please is it possible to have the mailchimp show only when the entire page is done loading?
I'm still new to JavaScript and jquery and I have no idea on how to do this. Please help. Below are the scripts. Thanks for helping.
<script type="text/javascript">
var clPreloader = function() {
$("html").addClass('cl-preload');
$WIN.on('load', function() {
//force page scroll position to top at page refresh
// $('html, body').animate({ scrollTop: 0 }, 'normal');
// will first fade out the loading animation
$("#loader").fadeOut("slow", function() {
// will fade out the whole DIV that covers the website.
$("#preloader").delay(300).fadeOut("slow");
});
// for hero content animations
$("html").removeClass('cl-preload');
$("html").addClass('cl-loaded');
});
};
</script>
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us19.list-manage.com","uuid":"a16126f77b33bc58d8eef3c50","lid":"a69743e135","uniqueMethods":true}) })</script>
I think this webpage will help you with your problem
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
The onload function in javascript allows you to execute code when the page has been loaded.
Otherwise you could add a function call to the next script you want to execute, after the first one has finished executing.
try somthing like this after animation end
var linkafterpreload = "link 1";
window.addEventListener("load", _ => {
var newscript = document.createElement("script");
newscript.src = linkafterpreload ;
document.body.appendChild("newscript")
})

JQuery interval isn't working

I've made a small script to load a page into a div of another page, which gets refreshed every 5 seconds.
The page is loaded as expected, but the interval doesn't seem to work.
I already searched for a solution, but all threads are saying that my code should work like that. So I decided to post the full code here.
JQuery (and AJAX):
<script>
function load(){
$('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function(){
load() // this should run every 5 seconds
}, 5000);
</script>
The chatlogframe.php file contains a SQL Select query. The data should be reloaded every time the scipt gets executed.
UPDATE:
I checked the Chrome Console where it says Uncaught TypeError: $(...).unwrap is not a function
I don't think that the function is wrong, but maybe it helps.
UPDATE 2:
Heres the html div:
<div id='chatload'></div>
It works. May be there's some issue with your code in $('#chatload').load('/intern/chat/chatlogframe.php/?name=muster',function () {
$(this).unwrap();
});
.unwrap() could be possible issue but to isolate that you would need to post your sample HTML container.
function load() {
console.log("Do something");
$('#chatload').load('https://jsonplaceholder.typicode.com/posts/1', function() {
$(this).unwrap();
});
}
load(); // run it on pageload
setInterval(function() {
load() // this should run every 5 seconds
}, 5000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatload"></div>

Html preloader - delay page load

I need some help with my new template :). Before the webpage loads I want to show a preloader gif. I done it, however it shows just a little, because the page loads very fast. So I would like to delay the page (with 2 seconds, as an exemple), without affecting the preloader, so it (the preloader) would appear for 2 seconds, so until the page loads.
Here is my code (note that it will not work on jsfiddle, because I can't upload the .gif file): jsfiddle.net/hLmxpsnw/
For whatever reason u want it its done using setTimeout here is the code
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000); // set the time here
});
});
jsfiddle http://jsfiddle.net/harshdand/593Lqqnm/2/
You Can Just use delay(); jquery function to add dealy to Preloader
$(document).ready(function () {
$(window).load(function(){
$('#preloader').delay(3000).fadeOut();
});
});
it's a sample
<script>
setTimeout(function () {
$('.loader-container').fadeToggle ();
},3500);
</script>

Mobile Hidden Menu works on jsfiddle but not online. Any solution would be helpful.

So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?
It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/
You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery

Categories