Develop Reference

ReferenceError: jQuery is not defined in self invoking function

I've tried all the solutions from other Stackoverflow topics, but I can't my jQuery file to work.
I use a Wampserver to test my code and I test inside of multiple browsers (Firefox, Chrome, Opera). Same problem every time.
HTML
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
I've put these lines before my closing <\body> tag
scripts.js`
(function($) {
'use strict';
// holds current image shown
var $currNr = 0;
var links, images;
/**
* Function to prevent closures; adds click event handler to links
*/
var addEvents = function(nr) {
// add click event to link
$(links[nr]).on('click', function(e) {
showImage(nr);
e.preventDefault();
});
};
/**
* Function to show an image
*/
var showImage = function(nr) {
// find image
var $img = $(images[nr]);
if (!$img) return;
// find big image
var $photoBig = $('#photoBig');
// change
$photoBig.attr('src', $img.attr('data-src-l'));
$photoBig.attr('alt', $img.attr('alt'));
// remember current image number
$currNr = nr;
};
/**
* Function to show the next image
*/
var showNextImage = function() {
if ($currNr != (links.length - 1)) {
showImage($currNr + 1);
} else {
showImage(0);
}
};
/**
* Function to show the previous image
*/
var showPrevImage = function() {
if ($currNr != 0) {
showImage($currNr - 1);
} else {
showImage(links.length - 1);
}
};
// start scripts
$(window).on('load', function() {
// find images and links
links = $('#thumbsmenu li>a');
images = $('#thumbsmenu li>a img');
// add link events
$(links).each(function(nr) {
$(this).on('click', function(e) {
showImage(nr);
e.preventBubble();
});
});
// controls
$('#lnkFirst').on('click', function(e) {
showImage(0);
e.preventDefault();
});
$('#lnkPrev').on('click', function(e) {
showPrevImage();
e.preventDefault();
});
$('#lnkNext').on('click', function(e) {
showNextImage();
e.preventDefault();
});
$('#lnkLast').on('click', function(e) {
showImage(images.length - 1);
e.preventDefault();
});
// keyboard
$(document).on('keydown', function(e) {
var $code = (e.keyCode ? e.keyCode : e.which);
switch (event.keyCode) {
case 37: showPrevImage(); e.preventDefault(); break;
case 39: showNextImage(); e.preventDefault(); break;
}
});
// play
var $timer;
$('#btnPlay').on('click', function(e) {
if (!$(this).prop('playing')) {
$(this).val('stop');
$(this).prop('playing', true);
$currNr = 0;
$timer = setInterval(showNextImage, 1000);
} else {
$(this).val('start');
$(this).prop('playing', false);
clearInterval($timer);
}
});
});})(jQuery);`
I use a self-invoking function and use it as parameter but I get a:
ReferenceError: jQuery is not defined
Normally this code should work, that was how I was taught back then. Anyone an idea what could be the real issue here?

You are loading scripts.js before jQuery
Change the following code:
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
To:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>

Your script load ordering is wrong. Load jQuery first, then use it.

As other people suggested your order is wrong. In order for you to use JQuery in other script files it needs to be fully loaded. Change your HTML like so:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>

content narration in web page, on tab press not going to speak anything if current task(speak anything) not completed

I am using articulate.js(http://www.jqueryscript.net/demo/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js/) to read content from page and speak it. It is working fine, just not works if it is speaking something and I have press tab then it stops but not reads tab selected content.
some pre-define functions
<script>
function speak(obj) {
$(obj).articulate('speak');
};
function pause() {
$().articulate('pause');
};
function resume() {
$().articulate('resume');
};
function stop() {
$().articulate('stop');
};
</script>
what I have tried
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
$().articulate('stop');
if (e.which == 9) { // on tab press start speaking selected element
var i=document.activeElement.id;
$('#'+i).articulate('pause').articulate('stop').articulate('speak');
}
else{ // trying to speak what key has been pressed except tab, but not working
var i=document.activeElement.id;
$('#'+i).val().articulate('speak');
}
});
});
</script>
I am also trying to make it audible(to speak keypress) on text box, which is not working

I have make some changes now it is working, but it has certain limitation like it not reads backspace, ctrl, space etc but speak a to z,1 to 0, very well. please improve it
<script>
$(document).ready(function() {
var counter = 0;
setTimeout(function(){
counter +=1;
if (counter == 1){
explode();
}
},1000);
function explode(){
//$('body').articulate('speak'); // Default for play whole content
$('h1').articulate('speak');
}
$('body').keyup(function (e) {
var speaking = $().articulate('isSpeaking');
var paused = $().articulate('isPaused');
// $().articulate('stop');
if (e.which == 9) {
if (speaking) {
$().articulate('pause');
$().articulate('stop');
}
var check =0;
setTimeout(function(){
check +=1;
if (check == 1){
comeback();
}
},1000);
function comeback() {
var i=document.activeElement.id;
$('#'+i).articulate('speak');
}
}
else{
var i=document.activeElement.id;
var m=0;
setTimeout(function () {
m+=1;
if(m==1){
magic();
}
},500);
function magic() {
var tempval=$('#'+i).val();
var lastChar = tempval.substr(tempval.length - 1);
var ht ='<div>'+lastChar+'</div>';
$(ht).articulate('speak');
}
}
});
});
</script>

Combining two script in jquery/javascript

I have two script in javascript/jquery. How i will combine in one. On body load this function run
<script type="text/javascript">
window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},250);
</script>
<script>
var status = navigator.onLine;
if (status) {
$("#link1").removeClass('diconnected').addClass('connected');
$("#link1").data('disabled',true);
} else {
$("#link1").removeClass('connected').addClass('diconnected');
}
}
</script>

$(document).ready(function(){
var status = navigator.onLine;
if (status) {
$("#link1").removeClass('diconnected').addClass('connected');
$("#link1").data('disabled',true);
} else {
$("#link1").removeClass('connected').addClass('diconnected');
}window.onload=function() {
var tId = setInterval(function() {
document.getElementById("link1").disabled=!navigator.onLine;
},250);
}});
try this

Your first script is missing a closing bracket }
If you add in a } you can remove the closing and opening script tags.
Additionally, you may want the second bit of code within the window.onload function, which would mean you could put the closing bracket } after the 2nd scripts code

Where to Specify Java Script in a asp:content page?

I had a html page where I was using java script to collapse and expand Gridview. However, I had to switch to a asp:content page(part of a master page) where I don't have head tag.
I tried specifying the java script inside the asp:content but it is not working.
Also, I tried specifying itmy master page still its not working.
How to deal with it any ideas?
Here is the script.
<script type="text/javascript">
function collapseExpand(obj) {
var gvObject = document.getElementById(obj);
var imageID = document.getElementById('image' + obj);
if (gvObject.style.display == "none") {
gvObject.style.display = "inline";
imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
}
else {
gvObject.style.display = "none";
imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
}
}
</script>

You can specify script at any place in your page. As soon as browser sees script tag it executes script inside it.
But in this case I think you should execute your code inside window.onload event handler because you need to wait until you markup is loaded and then you need to call your function. For example:
<script type="text/javascript">
window.onload = function(){
function collapseExpand(obj) {
var gvObject = document.getElementById(obj);
var imageID = document.getElementById('image' + obj);
if (gvObject.style.display == "none") {
gvObject.style.display = "inline";
imageID.src = "~/ims/Images/bullet_toggle_minus.jpg";
}
else {
gvObject.style.display = "none";
imageID.src = "~/ims/Images/bullet_toggle_plus.jpg";
}
}
collapseExpand("yourOfYourElement");
}
</script>
Or you can register calling your function after some event raises. For example:
document.onclick = function(){
collapseExpand("yourOfYourElement");
}

JS function that stops another JS function

I have two JS functions: a load() function that displays a progress bar and a kill () function that stops the execution of the load once the page is loaded.
Now when another page is loaded the progress bar is not displayed, knowing that the load function is called on every page.
Any hints on where the problem might be and if there is a way to fix it.
Here is my code:
<script type="text/javascript">
var count=0;
function load(i) {
j = parseInt(i);
document.getElementById("progressBar").style.display = "block";
count=count+1;
if (document.all) {
document.all.btn1.value=count+'%';
document.all.progressbar.pic1.width=2*count;
}
else {
document.getElementById("pic1").width=2*count;
document.getElementById("bar").width=count+'%';
}
if (count<100) {
setTimeout('load(j)',j);
}
if(count==100) {
document.getElementById("progressBar").style.display = "none";
count=0;
}
}
function kill(){
if (document.applets[0].isActive()) {
document.getElementById("progressBar").style.visibility = "hidden";
}
}
</script>
Thank you in advance !

In load() you're changing display to block, but in kill() you set visibility to hidden; you should set display to none instead, so it can properly be set to block again next time. Read about visibility.
Optimized code:
<script type="text/javascript">
var count = 0,
win = window,
doc = document,
progressBar = doc.getElementById("progressBar"),
t, j;
function load(i) {
j = parseInt(i);
progressBar.style.display = "block";
count++;
// no actual need to check if doc.all is available
// just select through id
doc.getElementById("pic1").style.width = 2*count;
doc.getElementById("bar").style.width = count+'%';
if (count < 100) {
t = win.setTimeout('load(j)',j);
} else {
progressBar.style.display = "none";
win.clearTimeout(t);
count = 0;
}
}
function kill(){
if (doc.applets[0].isActive()) {
progressBar.style.display = "none";
}
}
</script>

If you assign setTimeout to a variable, you can use clearTimeout on it to stop it.
E.g.
set the timeout with
t = setTimeout('load(j)',j);
then stop it with
clearTimeout(t); Let me know if that helps, and makes sense :)