We Keep Coding

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

jQuery executes before page finishes loading even though I'm using $(window).on('load', function()

I am trying to scrape some times from https://www.speedrun.com/mm for a chrome extension but the issue I'm having is that jQuery loads before the webpage has completed loading. When I refresh the page while having Inspect open it works just fine (I'm assuming it's making the webpage take longer to load) but otherwise I can't scrape the data, it will return blank. Is there any way for me to ensure that the data is ALWAYS loaded first?
$(window).on('load', function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
Edit: I tried this as well and got the same result
$(document).ready(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});

Try this edited with $(document).ready
Load is called when all assets are done loading, including images.But the ready is fired when the DOM is ready for interaction.
Reference
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
http://api.jquery.com/ready/
$(document).ready(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Put your code inside document.ready .
$(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
});

The leaderboard data seems to be loaded using ajax. Have you tried using .ajaxSuccess() or .ajaxComplete() instead of .ready?

Please check once if you are getting $ as undefined,
Use different instance of JQUERY like
jQuery(document).ready(function() {
var worldRecord = jQuery('.nobr.center.hidden-xs').text();
alert(worldRecord);
});

I found a workaround since loading after the ajax completes doesn't seem to be working. I used the setTimeout function and set it to one second to see if that worked and it did :D
$(document).ready(function() {
setTimeout(function() {
var worldRecord = $('.nobr.center.hidden-xs').text();
alert(worldRecord);
}, 1000);
});

http javaScript set attribute default to all tags

I am pretty new to HTML and just trying to figure things out...
I am trying to set an attribute for the tag, more specifically the target attribute so that all links in web page would open in a different tab...
I have encountered the jQuery functions and tried to implement it with no success...
My script tag goes like this:
<script src="static/jquery-3.1.1.js">
$(document).ready(function() {
$('a').target = "_blank"
$("a").attr("target", "_blank");
});
$('a').target = "_blank"
</script>
when of course the jquery file is at the same directory under static dir as mentioned....
I have also tried the following:
<script>
var elems = document.body.getElementsByTagName("a")[0];
elems.setAttribute("target","_blank");
</script>
when there's only one tag in page...
Please tell me what am I doing wrong....
Thanks:)

The correct approach to set an attribute to all elements of a web page is to loop through all elements and set the attribute like so:
var elems = document.body.getElementsByTagName("a");
for(var i = 0; i < elems.length; i++)
{
elems[i].setAttribute("target","_blank");
}
If using jQuery the function to set attributes is $(selector).attr(attribute_name,value)
Example:
$('a').attr("target","_blank");

You have some syntax error in your script, correct code in
<script src="static/jquery-3.1.1.js"></script>
<script>
$(document).ready(function() {
$("a").attr("target", "_blank");
});
</script>

At first, your code should be like:
$(document).ready(function() {
$("a").attr("target", "_blank");
});
It actually works. You can try it on this page. I don't know what page r u testing on, but I can guess the reason why your code didn't work is that some links are generated after the execution of your code. You can change your code as below to avoid this problem.
$(document).ready(function() {
setInterval(function(){
$("a").attr("target", "_blank");
},200);
});
You can also add some code to imporve the efficiency.

You don't actually have to modify the html, you could just add a click handler to every link like so.
$(document).on('click', 'a', function(e) {
e.preventDefault();
window.open(this.href);
});

onClick show iframe 5000 and then hide

I'm trying to build an impression test for a remote usability test using HTML, CSS and jQuery. The user needs to click on a button to start the impression test, which will show the page of the client in an iframe for 5 seconds and then hide itself.
I looked for many codes very similar to this but not exactly what I needed and I can't make it work myself as my jQuery knowledge is yet v poor.
So, what I'm looking for is something like this:
on click show iframe 5000
hide
I tried using this bit of code to show on click with the css iframe {display:none};
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#iframe1").show("5000");
});
});
</script>
Thinking "it will show after the click for 5 seconds and then go back to normal display: none.
But no... It shows on click and it stays there.
Can anyone help me?

Here's how you would do it in jQuery:
$(document).ready(function() {
$("#show").click(function() {
$("#iframe1").show().delay(5000).hide(500);
});
});
Fiddle: http://jsfiddle.net/5vC68/

You'll want to use the window.setTimeout event. For example:
$(document).ready( function() {
$('#element').hide();
window.setTimeout(function() {
$('#element').show();
}, 5000);
});
You can swap the hide/show around to suit your needs.
JSFiddle: http://jsfiddle.net/NfCHG/1/

Try this
<script type="text/javascript">
$(function() {
$( "#show" ).click(function() {
$( "#iframe1" ).show().delay(500);
$( "#iframe1" ).show().delay(5000);
});
});
</script>

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>