We Keep Coding

Using multiple <script> tag at the bottom of HTML

Is that okay to have multiple Script tag at the bottom of HTML?
Here is the Script that I am using.
I was wondering if they will slow the speed?
or can cause any technical problem?
Is there any way that I can merge them into one file and linked it to my page? Or this might not be a good idea?
<script>
$('[data-fancybox]').fancybox({
protect: true,
infobar: true,
idleTime: false,
clickContent: false,
buttons: [
//"zoom",
//"share",
//"slideShow",
//"fullScreen",
//"download",
//"thumbs",
"close"
],
animationEffect: "fade",
});
</script>
<!-- Hamburger Menu -->
<script>
var $menuham = $(".menuham");
$menuham.on("click", function(e) {
$(".overlay").fadeToggle(200);
$("h1.brandcolor").toggleClass("brandcolorw");
$menuham.toggleClass("is-active");
// Do something else, like open/close menu
});
</script>
<!-- Project Info Button -->
<script>
var $projectinfo = $(".projectinfo");
$projectinfo.on("click", function(e) {
$projectinfo.toggleClass("is-active");
// Do something else, like open/close menu
});
</script>
<!-- Back to Top -->
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#scroll').fadeIn();
} else {
$('#scroll').fadeOut();
}
});
$('#scroll').click(function(){
$("html, body").animate({ scrollTop: 0 }, 250);
return false;
});
});
</script>
<!-- Progress Bar -->
<script>
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

Is that okay to have multiple Script tag at the bottom of HTML? Here is the Script that I am using.
Yes thats where javascript should be. Either this, or at the top with defer atributte. Specially if you are performing operations on a loaded dom.
I was wondering if they will slow the speed? or can cause any technical problem?
Nah, it wont be faster if you put them at the top. Though you can make it faster if you minify your js... if you are using some package manager like npm you can add some package to help you with this, if not there are tons of pages that can help you minify your code. just look on google: minify javascript... you can also minify css. Edit: actually it can look slower if you put them at the top and the files are to big. cause it starts loading content kind of asynchronously but in order, so depending on your internet connection, they might slow down the appearing of some content, nowadays is not too relevant.. unless you have reaally big js files.
Is there any way that I can merge them into one file and linked it to my page? Or this might not be a good idea?
Yes just put your code together in one file, as long as the contents of the file are related its ok.
If you are building a site, put all the general code (the one that should be on all pages) on one file, that you can load on each page. And add at the bottom of each page the contents that are not general to the website but specific to that page.
I asume you are new to web development, this is good/works for learning, but eventually if you wanna work with javascript, i recommend investigating on package managers. But for now its ok.

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

Javascript: How do I run a function after a page reloads

My aim is to reload a page at a certain interval and run a function.
I have read about storing the function in my localStorage and calling it when the page reloads via body onload. I wish to run this code on my console on a page so I don't think the <body> works. Correct me if I am wrong.
A good example would be, continued reloading of a Ebay page and it gets the prices of all toys, then it reloads and gets the price again and it continues to reload till I close the browser. But every time I reload I can't run my function.
All help is appreciated, for my understanding.

Small example:
var
ready = function() {
setTimeout(function() {
//alert('Yay!');
location.reload();
}, 3000); // 3000 ms => 3 seconds
};
<body onload="ready()">
<h1>Page!</h1>
</body>

You can do this with the setinterval function.
It will repeat something afer a certain amount of time.
For the reload, its not really needed as you can call a ajax request and just change the parts that is needed.
example :
setInterval(function () { alert("Hello"); }, 3000);
It will alert out Hello every 3 secounds

If I understand you correctly, you want to run some script at the third-party website (e.g. Ebay), reload page and do it all again.
You can use some browser extensions. For example, that one.
This extension detect page URL and runs any script you have written for it.So, your script automatically runs by extension, do some work, reloads page and then repeats all.
// script runs automatically by extension:
$( function() {
// do some work:
/* some work */
// and then reloads page:
location.reload();
} );

100% working. :)
<html>
<head>
<meta http-equiv="Refresh" content="10">
<script type="text/javascript">
var whenready = function() {
alert('It Works Man..!!');
};
</script>
</head>
<body onLoad="whenready()">
<h1>Page!</h1>
</body>
</html>

$(window).bind("load", function() {
// code here
});

Css Preloader in apex take a while to load

I am using a css preloader for apex web application. problem is that it takes a while to load after any click , so 1st 1 or 2 seconds it doesn't appear. i want it to b started at the moment when i click something. how to make it load immediately?
Code
<script type="text/javascript">
jQuery(document).ready(function($) {
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>

try changing slow to fast like this
<script type="text/javascript">
jQuery(document).ready(function($) {
$(window).load(function(){.
$('#preloader').fadeOut('fast',function(){$(this).remove();});
});
});
</script>
or you can also use time duration, check this link for further reference..

How can I fix my JavaScript page refresh

I'm trying to use jQuery to make a slightly more sophisticated page refresh. With a meta refresh, if a page fails to load once, it won't load again. I am trying to make something that will repeatedly try to load--if it fails to load once, it will try again the next time so that if the last load is successful I will see a fresh version of the page, whether or not there were intervening faults.
My code at present is:
<script language="JavaScript" type="text/javascript" src="/include/jquery.js">
</script>
<script language="JavaScript">
var delay=5*1000;
function load(){
setTimeout(load, delay);
jQuery("#content").load("calendar_internal.cgi?days=40", function(){
jQuery("#preload").hide("slow");
});
delay = 15*60*1000;
}
jQuery("#content").load("calendar_internal.cgi?days=40", load);
</script>
So far as I can tell, this is functioning as a noop. It doesn't refresh.
How can I get this to work at least at a basic level so it refreshes but one bad refresh doesn't mean that I have to reload if I want to see the page at all?
--EDIT--
What I have now is apparently working (after light testing):
<script language="JavaScript">
var placeholder = jQuery('<div></div>');
function load(){
setTimeout(load, 15*60*1000);
placeholder.load("logistic_ajax.cgi", function(){
if (placeholder.html())
jQuery('#content').html(placeholder.html());
})
}
load();
</script>

var $placeHolder = $('<div />');
$placeHolder.load(yourURL,function() {
if ($placeHolder.html()) {
$("#content").html($placeHolder.html());
}
});
or something like that. This way you are not doing all or nothing type of thing. If something messes up with the HTML coming back, you can check in your "if" condition. Not sure the particulars of the response so you would need to hash that out on your own or let me know more detail.
Cheers.