We Keep Coding

jquery window load function not doing anything on load

posting for the first time on here, just wondering what im doing wrong within this little jquery script I wrote for a external html file containing my menu element. It works on resize just not load. I've tried a standalone $(window).load(); event as well and nothing seems to work. I'm new to jQuery and just know the do's and donts yet!
jQuery(document).ready(function($) {
var vwidth = $(window).width();
var vheight = $(window).height();
var menu = $('#menu_container');
$( window ).on('load resize', function() {
if (vwidth >= 1000) {
menu.css('zoom', '1');
} else {
menu.css('zoom', '0.8');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

There are two problems here. One already explained by #Mr. Polywhirl.
The other one is the fact that the DOM ready event will excute AFTER the window.load event. That means that by the time jQuery(document).ready executes $(window).load has already happened, so the event registration for window.load it's a bit late. Try this instead...
//this is essentially the same as jQuery(document).ready
$(function(){
toggleZoom();
$(window).on("resize", function(){
toggleZoom();
});
});
function toggleZoom(){
var vwidth = $(window).width();
//this isn't needed in this snippet
//var vheight = $(window).height();
var menu = $('#menu_container');
if (vwidth >= 1000) {
menu.css('zoom', '1');
} else {
menu.css('zoom', '0.8');
}
}

jQuery(document).ready(function($) {
Remove the dollar sign ($) from the function above. You are redefining the global as a function argument for the scope of the jQuery.ready function.
jQuery(document).ready(function() {
Edit
If that does not work, try some of these basic calls and see what the console prints out.
When I click the Run code snippet button, I get the following output:
Document ready()
Window resize()
Window load()
Window load() x2
Window resize()
$(document).ready(function() {
console.log("Document ready()");
});
$(window).on('load', function() {
console.log("Window load()");
});
// or
$(window).on({
load : function() {
console.log("Window load() x2");
},
resize : function() {
console.log("Window resize()");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The correct usage for jQuery ready() function is:
jQuery(document).ready(function(){
//The code you want to execute.
});
For more info look at:
https://api.jquery.com/ready/

Jquery 2 scripts aren't cooperating

I have 2 jquery scripts, but they aren't cooperating, and i dont know why.
My first script "scrolltop.js:
$(function() {
$("a").click(function(){
alert("test");
var target = $(this).attr('href');
var strip = target.slice(1);
if(this.hash && strip=="wall_menu"){
$("html, body").animate({
scrollTop: $("#wall_menu").offset().top
}, 1200);
return false;
}
}); });
It works fine... but stops while i add this script "changecolor.js":
$(document).ready(function() {
var $changeBtn1 = $("#content_0 div.button1");
var strNewString = $('body').html().replace(/\is/g,'<spon>is</spon>');
$('body').html(strNewString);
$(".button1").click(function(){
$('spon').css("color", "red");
setTimeout(function(){
$('spon').css("color", "");
},3000);
}); });
When i add both scripts, works only "changecolor.js", even alert "test" from first script doesnt work :(
This is my head from .html file:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type='text/javascript' src="scripts/scrolltop.js"></script>
<script type='text/javascript' src="scripts/changecolor.js"></script>
My web browser console, does not say where the problem is.

This is probably because you're replacing the whole body ($('body').html(strNewString);) in changecolor.js, and therefore the events registered (click()) will no longer be bound to a DOM element.

Execute on PageLoad

How can I execute this code in HTML on page load?
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
};
</script>
I have tried this code but it does not work.

Better to use the on() handler:
$(window).on('load', function(){
$("#name1, #name2").val("").attr("disabled",true);
});
or document.ready() if you aren't waiting for particular elements to load:
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
});

You just have an extra $( that you don't need, and a missing closing }...
window.onload = function() {
$("#name1, #name2").val("").attr("disabled",true);
};
Although that gets your code working, you could probably run this when the DOM is ready (which is quicker than waiting for all the images to load)...
$(function() {
$("#name1, #name2").val("").attr("disabled",true);
});

You can use this when you only want to access your DOM:
$(document).ready(function() { /* code */ });
$(function() { /* code */ }); // shorthand function (is identical)
If you require all other resources (styles, scripts, iframes, images, etc.) to be loaded too (eg. get an image dimensions), you need to use this:
$(window).on('load', function() { /* code */ });

You are mixing up JavaScript's way of doing things with jQuery's way of doing things.
Using windows.onload = ... is how you assign a function to be called after the load event occurs in JavaScript.
Using $(function(){...}) is jQuery syntax for $(document).ready(function(){}) which essentialy is the same thing, jQuery's document ready also triggers after load but unlike unlike windows.onload before images are loaded.
Use one or the other syntax.
Either use JavaScript like this:
window.onload = function(){
$("#name1, #name2").val("").attr("disabled",true);
}
Or one of jQuery's alternatives:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(window).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})

You should close your function codeblock like this.
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>

Use This, Remove window.OnLoad
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
SEE DEMO
http://jsfiddle.net/qgPzG/

You could use this syntax:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});

Try this :
window.onload = function () {
// do stuff here
$("#name1, #name2").val("").attr("disabled",true);
}

You forget to close " }); " :
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>

using yep/nope with document.ready

I am using yepnope.js but having a slight issue with on load loading a function
in the head i include yep nope and make a call to the relevant js file
<script type="text/javascript" src="/code/trunk/javascript/external/modernizr/modernizr-development.js"></script>
<script type="text/javascript" src="/code/trunk/javascript/external/yepnope.1.5.3-min.js"></script>
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/plugin.mobile.js'],
nope:['/templates/client/jquery/qff/plugin.website.js']
});
</script>
and then at the bottom of the page
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
});
</script>
so i am looking at this on a main screen. so it's suppoed to call in plugin.mobile.js
in the plugin.mobile.js file
(function( $ ){
$.fn.setupQantas = function( options ) {
// Create some defaults, extending them with any options that were provided
var settings = $.extend( {
startSlide: 1,
googleAnalytics:0, // 1 sends to google
googleCode: ""
}, options);
var methods = {};
return this.each(function() {
if (settings.startSlide === 1) {
alert("slide = 1");
} else {
alert("slide > 1");
}
});
};
})( jQuery );// JavaScript Document
instead of giving the alert slide 1 it has the error
jQuery("#mainContent").setupQantas is not a function
if i dont use yepnope and just have it in a script tag it works. There seems to be a delay on when the yepnope loads in the js file and doesnt seem to do before doc.ready
is there a way around this?
thanks

Yes there is a delay. That's all the point behind an asynchronous script loader.
You should use a callback after the script is loaded by yepnope. Check the complete and callback options.

here is the code
<script type="text/javascript">
yepnope({
test: Modernizr.mq('only all and (max-width: 700px)'),
yep: ['/templates/client/jquery/qff/mobile.js'],
nope:['/templates/client/jquery/qff/website.js'],
complete: function () {
jQuery("#mainContent").setupQantas({
startSlide: 1,
googleAnalytics:1,
googleCode:""
});
}
});
</script>

simple JQuery example is causing me troubles for unknown reason

I'm relatively new to JQuery and would like to try something. I just followed a simple tutorial to start up with on http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
So I specified my script in the :
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
</script>
and included a test link in the :
Link
however, when I refresh thet document my browser keeps saying
TypeError: Property '$' of object [object Window] is not a function
which I can understand for "normal" JavaScript but I believe this kind of function is new in JQuery. Can someone assist mer here, please?
links:http://wittmerperformance.com/site/

Did you embed the jquery library?
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
Further more I think that currently "on" is state-of-the-art as in:
$(document).ready(function() {
$("a").on('click', function() {
alert("Hello world!");
});
});

try this:
jQuery(document).ready(function($) {
$("a").click(function() {
alert("Hello world!");
});
});

The reason for the issue that you are facing could be that you haven't included JQuery library or it may be due to conflict, give it a try using
jQuery(document).ready(function ($) {
$("a").on('click', function() {
alert("Hello world!");
});
});

<script type="text/javascript">
$(document).ready(
function() {
$("a").click(
function(){
alert("Hello world!");
});
});
</script>
this is a working example.simpler. in your example you fotgot to close a function you started. count ( { } ) ; you are missing }) at the end. it shold work fine yours too.
full working example below:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("a").click(
function(abc){
alert("Hello world!");
abc.preventDefault();
return false;
});
});
</script>
</head>
<body>
<a>some link</a>
</body>
</html>