Why my function not alert when load page [javascript]? - javascript

Why my function not alert when load page [javascript]?
When scroll page it's alert work good.
When resize page it's alert work good.
But when load page why not alert ?
How can i do that ?
http://jsfiddle.net/af2kgoxu/
$(window).load(function(){
$(window).on('scroll load resize', function () {
alert("TEST");
});
});

I'm pretty sure because load happened before you created the listener. Think about it:
$(window).load(function(){ When the window is loaded, do the next step:
$(window).on('scroll load resize', function () { creates a listener on scroll, load, and resize. Well the window already loaded so it's never going to load again.
$(document).ready(function(){
$(window).on('scroll load resize', function () {
alert("TEST");
});
});

Why you are wrapping your scroll,load, resize operations in $(window).load(function(){}); when you can directly call it. Change your snippet as below, it will work for all window scroll,load and resize.
$(window).on('scroll load resize', function () {
alert("TEST");
});

You can always try
$(window).on('load',function()
But i think its the same

You just need this code:
$(window).on('scroll load resize', function () {
alert("TEST");
});
See here: http://jsfiddle.net/af2kgoxu/1/

Use $( document ).ready() method, and it will run whenever your DOM (Document Object Model) is ready for running javascript.
$( document ).ready(function() {
alert("TEST");
});

Related

why my $(window).load(function() is not working in document.ready function?

my on windows.load function not working in document.ready
$(document).ready(function(){
//this is for nimation
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
// my this function is not working
$(window).load(function() {
$(".overlay").fadeOut();
});
});
Your code says:
Load the document
When the DOM is loaded, register a new hook to listen on when the window is loaded (images etc.) which will start the animation
However, by the time your window load registration happens, the window might already be loaded.
You also use the incorrect method to subscribe to the window loaded event.
Try:
$(document).ready(function(){
//this is for nimation
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
});
$(window).on("load", function() {
$(".overlay").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="progress-bar-fill">progress bar</div>
<div class="overlay">overlay</div>

Javascript trigger on page load

I have this javascript that triggers update_cart when a quantity is changed...
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").trigger("click");
});
I am trying to modify it so that the trigger happens when the page loads instead, I have tried this...
jQuery( document ).ready(function() {
jQuery("[name='update_cart']");
});
But it is not working, where am I going wrong?
Try
jQuery( document ).ready(function() {
jQuery("[name='update_cart']").click();
});

jQuery bind event not firing on elements loaded via $().load()

I have a DIV that is in an .html file that is loaded into my document via:
$(document).Ready( function() {
$("#contentDiv").load("some.html")
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
}
});
The event will not fire. If I cut the content of some.html and put it in the document, uhm, "physically", the event will fire.
So, I am pretty sure this issue is related to the fact that the html is injected via .load().
It's bothersome, because if you look at the page source, all the HTML is in fact there, including the button.
So, the question is, is there ANY way to make this work? I am using .load() to reduce page complexity and increase readability, and, code-folding notwithstanding, I really do not want to have to pull all this HTML into the document.
EDIT: This code was just typed in off the cuff. It's not a cut-n-past of the actual code, and it is just to demonstrate what the problem is. But, thanks for pointing it out.
EDIT2: Grrrrrrr. });
load() is asynchronus so you need to the job in the callback :
$(document).ready(function() {
$("#contentDiv").load("some.html", function(){
//some.html contains a button id=saveButton
$("#saveButton").click( function () {
alert("Here I am!");
});
});
});
Hope it helps :)
one way is by adding to the some.html the script line which will be loaded as the div appears.
You can add this script to some.html(in a script tag):
registerButton();
and then you can define registerButton() in your current document.
other way, if I remember correctly is by using something like the function bind( )
If you want to fire event on element which was not available at the time when DOM was ready then you need to use .on event.
http://api.jquery.com/on/
$("#saveButton").on("click", function() {
alert("Here I am!");
});
jquery load() function is asynchronous. If you want to bind events to the loaded content, you should put the code into the callback function:
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
//you should put here your event handler
});
});
Your issue is that jquery load() function is asynchronous as #lucas mention. But his code has syntax errors, try this:
$(document).ready(function () {
$("#contentDiv").load("some.html", function () {
$("#saveButton").click(function () {
alert("Here I am!");
});
});
});
Hope it helps now
You need to bind the event handler either after the load OR to the container of the HTML from the load
$(document).ready(function() {
$("#contentDiv").load("some.html", function() {
$("#saveButton").on('click',function() {
alert("Here I am! Bound in callback");
});
});
});
OR use: (not needed that it be in the document ready just that the contentDiv be present)
$("#contentDiv").on('click','#saveButton',function(){
alert("Here I am! bound to container div");
});
EDIT: load on the SAVE button click (per comments) (this makes no sense though)
$(document).ready(function() {
$("#saveButton").on('click',function() {
$("#contentDiv").load("some.html", function() {
alert("Here I am! Bound in callback");
});
});
});

How to run the script both 'on load' and 'on resize' (on a particular window width!) in jQuery?

In my current website project I've integrated Alvaro Trigo's FullPage plugin but since it had a very uncommon behaviour on mobile devices (also due to my project's design requirements), I've decided to switch it off when the viewport width is below 768px. For this purpose I just add a simple if-statement to the script:
$(document).ready(function(){
if ($(window).width() > 768 ) {
$('#fullpage').fullpage({
// code... code... code...
});
}
});
The problem is that it only takes effect after refreshing the page; so when I go below 768px and reload the page the plugin is switched off, but when I then resize the browser above the mentioned breakpoint, it's still off (and vice versa). I think I should add some lines of code dealing with resize, but unfortunately my current knowledge of JS/jQ doesn't let me do that.
Thanks in advance for your time.
This should work:
$(window).resize(function(){
if ($(window).width() > 768 ) {
//do your thing here
}
}
Use $(document).resize(function(){ /* do stuff*/ }) instead.
You can then use $(document).trigger('resize') on onload
Here is how to run an anonymous function both when DOM ready fires and when on resize fires:
$(document).ready(function() {
$(window).on('resize', function() {
//code to run
})
.trigger('resize');
});
You can use the jQuery resize event. See here
Put your code, what you want to do into a function. Call that function on document ready with $(function() {});, and when you resize the window.
$(function () {
function doSomething() {
$('#fullpage').fullpage({
//The code
});
}
$(window).resize(function () {
//Do it on resize
if ($(window).width() > 768) {
doSomething();
}
});
//Do it when page loads.
doSomething();
});

On Load, On Resize and On Scroll - what's the best way to run separate functions?

On Load, On Resize and On Scroll - what's the best way to run separate functions?
I have a few functions, all do different parts throughout the website. Some for a parallax effect, some for a gallery etc..
At the moment I am grouping them in 3 separate 'on..' functions (as below). It works, but I'm sure there's a better way?
$(document).ready(function () {
// on load functions go here
$(window).on("load resize", function () {
// on load and on resize functions go here
});
$(window).on("load resize scroll", function () {
// on load, resize and scroll functions go here
});
});
Try
$(document).ready(myFunction1);
myFunction1 () {
// on load functions go here
$(window).on("load resize", myFunction1);
$(window).on("load resize scroll", myFunction2);
}
function myFunction2(){
// on load and on resize functions go here
};
function myFunction3(){
// on load, resize and scroll functions go here
};
After the suggestions here and continuing my search, the best solution seems to be:
function load() {
});
function loadResize() {
});
function loadResizeScroll() {
});
$(window)
.on('load', load)
.on('load resize', loadResize)
.on('load resize scroll', loadResizeScroll);

Categories