We Keep Coding

included .js file preventing jQuery from loading

I am new to jquery/web design and download a template to try and familiarize myself. I am having an issue with a certain script that is preventing my jQuery from loading. I have this in the header on my site:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>
<script type="text/javascript" src="layout/scripts/responsiveslides.js-v1.53/responsiveslides.min.js"></script>
<script src="layout/scripts/custom.js"></script>
The culprit file is the <script type="text/javascript" src="layout/scripts/jquery-mobilemenu.min.js"></script>; everytime I disable this line jQuery works fine. I am really not sure what to identify in the file that would cause jQuery to not load. The contents of js:
jQuery.noConflict()(function ($) {
// Create the dropdown base
$("<form id='mobilemenu'><select /></form>").appendTo("#topnav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value": "",
"text": "Click For Menu"
}).appendTo("#topnav select");
//Populate dropdown with menu items
$("#topnav a").each(function () {
var el = $(this);
var prefix = '';
switch (el.parents().length) {
case (6):
prefix = '';
break;
case (8):
prefix = '- - - ';
break;
case (10):
prefix = '- - - - - ';
break;
case (12):
prefix = '- - - - - - - ';
break;
default:
prefix = '';
break;
}
$("<option />", {
"value": el.attr("href"),
"text": prefix + el.text()
}).appendTo("#topnav select");
$("#topnav select").change(function () {
window.location = $(this).find("option:selected").val();
});
});
});
Would anyone be able to point me in the right direction with correcting this file? I have tried to move the order that my scripts load and it doesn't matter the order, jQuery doesn't load when the mobilemenu script is included.

Within the script you mention as causing the problem you will see a call to noConflict() this method allows jQuery to be used with other libraries that also rely on the $ as an entry point by removing $ as an alias to jQuery.
Immediately following the noConflict() call you see a very specific function signature that is being passed to jQuery:
(function ($) {
//function code here
});
jQuery is going to call this function and when it does it will pass itself in as the $ parameter and within the scope of that function you now access jQuery using $ again.
So with the script the way it is you will need to use jQuery by name.
Have a look at the documentation on noConflict for more details.
There are also several other questions on SO with regards to noConflict, this one might help in particular.

Javascript remote src not working

If I put JavaScript inline in my page it works fine; however, if I put the script on a remote server so I can clean things up, it quits working.
Go to:
http://www.salescart.com/cloud/store/test2.html
Here is the JavaScript is inline
{you can see the iframe sizes correctly without issue at this url}
Go to:
http://www.salescart.com/cloud/store/test.html
This is the same exact html file except that the operative javascript is put into a remote src.
This is the JavaScript in the remote src:
<script type="text/javascript">
//MDN PolyFil for IE8 (This is not needed if you use the jQuery version)
if (!Array.prototype.forEach){
Array.prototype.forEach = function(fun /*, thisArg */){
"use strict";
if (this === void 0 || this === null || typeof fun !== "function")
throw new TypeError();
var t = Object(this),
len = t.length >>> 0,
thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++)
if (i in t)
fun.call(thisArg, t[i], i, t);
};
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.salescart.net/checkout20/src/iframeResizer.min.js"></script>
<script type="text/javascript">
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
checkOrigin : false // Disable CheckOrigin
});
</script>
{you can see the iframe stops resizing}
I don't understand exactly why this is the case. I appreciate in advance your help. Thanks.

in the js file you wrote
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
src="http://www.salescart.net/checkout20/src/iframeResizer.min.js";
which wont work. You need to load those js files in the tests.html itself. Preferablly in the the head tag as
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.salescart.net/checkout20/src/iframeResizer.min.js"></script>

'$' is undefined error

Trying to use a jQuery plugin and it is not working and this error
'$' is undefined
keeps popping up. I am very new to Javascript and jQuery so please be as simple as possible
<script type="text/javascript" src="wpscripts/jquery-1.4.1.min.js"></script>
<!--[if IE 6]>
<script src="thumb-images/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('#preview_inner div a');</script>
<![endif]-->
<script type="text/javascript">
$(document).ready(function () {
var outer = $("#preview_outer");
var arrow = $("#arrow");
var thumbs = $("#thumbs span");
var preview_pos;
var preview_els = $("#preview_inner div");
var image_width = preview_els.eq(0).width();
thumbs.click(function () {
preview_pos = preview_els.eq(thumbs.index(this)).position();
outer.stop().animate({ 'scrollLeft': preview_pos.left }, 500);
arrow.stop().animate({ 'left': $(this).position().left }, 500);
});
arrow.css({ 'left': thumbs.eq(0).position().left }).show();
outer.animate({ 'scrollLeft': 0 }, 0);
$("#preview_inner").css('width', preview_els.length * image_width);
});
</script>

That usually means that you have to import jquery at the top like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Edit: Here is the link for the updated version. I believe that this page will always update to the latest version of jQuery whereas my above answer won't: HERE

Check your script source path. It's likely not loading in.
If it's at the root of a site use:
<script type="text/javascript" src="/wpscripts/jquery-1.4.1.min.js"></script>
I see you have also tagged ASP.NET, so If it's in a control or somewhere that can be different for each page load, then use the following to have .Net figure out the actual relative path.
<script type="text/javascript" src="<%= ResolveClientUrl("~/wpscripts/jquery-1.4.1.min.js") %>"></script>

I see you are using WordPress.
You often are not able to define links with a relative path.
try using the php function "get_theme_root();" to get the theme root and navigate from there

jQuery is undefined & unexpected token

I have this script that positions a div's background in proportion with the window size:
// JavaScript Document
var jQNC = jQuery.noConflict();
jQNC(document).ready( function () {
setPunchMargin()
jQNC(window).resize( function () {
setPunchMargin();
});
});
function setPunchMargin() {
var windowWidth = jQNC(window).width();
if (windowWidth <= 980) {
var margin = 0;
} else {
var margin = Math.round((windowWidth - 980) / 2);
}
jQNC('.punch').css('background-position', margin + 'px 320px');
}
It works like a charm on my local machine, but when uploading it to the server i get jQuery is undefined and on the jquery library i get unexpected token error.
Can you tell me what is wrong here?
Thank you,
Radu.

You have jQuery included two times;
<script language="javascript" src="http://punchid.com/test/wp-content/themes/punch/js/jquery-1.6.1-min.js" type="text/javascript"></script>
And here;
<script type='text/javascript' src='http://punchid.com/test/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
The latter is an older version, I'd suggest removing that one from the code - But double check everything still works correctly afterwards.

This looks like you are not uploading or referencing jQuery correctly. Try using an absolute reference to a Jquery CDN like: http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
(where 1.5.1 is the version of Jquery you'd need).

How to access the elements in <script> inside the body tag

I am using <script> inside the body tag.
<script type="text/javascript" language="javascript">
$('#audioVolume').text($('#audioVolume').text(Math.round((document.mediaPlayer.Volume + 2000) / 10) + "%"));
</script>
Error: Microsoft JScript runtime error: 'undefined' is null or not an object.
Need: I want to access the html elements in <script inside the body tag.

Best guess - document.mediaPlayer is undefined. I think you've also got a typo - you're setting the text of the element to the result of setting the text of the element? Try wrapping the whole thing inside a ready function so that it doesn't run until the DOM is loaded. If that doesn't work, then fire up the debugger tools in IE8 and see which element isn't defined.
<script type="text/javascript" language="javascript">
$(function() {
$('#audioVolume').text(Math.round((document.mediaPlayer.Volume + 2000) / 10) + "%"));
});
</script>

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#audioVolume').text(Math.round((document.mediaPlayer.Volume + 2000) / 10) + "%");
});
</script>