how should i have a javascript animation execute when the page loads? - javascript

I dont want to use css3 transition, keeping it pure .js. let assume the following link
when you click, div(s) appear, but how can i get the same function run when the page load/open rather than triggering the function by clicking on btn.??

In this case, they were showing it to you in jQuery, and they were already wrapping it in a function that is not executed until the page is loaded. You just need to remove the "guts" of the click handler and call it directly.
Change:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
To:
$(document).ready(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

Trigger the event on pageload or what jquery calls it, document.ready
$(document).ready(function() {
// do whatever.
});
document.ready short version
$(function () {
// do whatever.
});

Related

Trigger click Checkbox After page fully loaded

How I run trigger click after page FULLY loaded
I have a checkbox and want to trigger a click.
my code is simple
jQuery(document).ready(function(){
jQuery('.wcpf-input-checkbox[value="hoodie"]').trigger('click');
});
but it does not work, I tes the script in console after fullu loaded, my script work
I also to try to check if the checkbox ready. it does not work.
jQuery(document).ready(function(){
jQuery('.wcpf-input-checkbox[value="hoodie"]').ready(function(){
jQuery(this).click();
});
});
How do I trigger click to work?
If you attach click action with this method:
$(yourobj).on("click",function() {...});
then you can change it to:
$(document).on("click", 'yourobj', function(event) {...});
But I don't know, you haven't posted all of your code.
The issue for me trigger clicks only can be run after the page fully loaded so I bind my code after window load() and set timeout
Here I solved it
jQuery(window).on('load', function() {
setTimeout(function(){
//your code here
console.log('All assets are loaded');
jQuery('.wcpf-input-checkbox[value="hoodie"]').trigger('click');
jQuery('.wcpf-button-action-filter').trigger('click');
}, 1000);
})

How to bind jquery function to specified element

I want to make function working only on page with specified element.
I have search page, search fields and results are in search-block div.
I want to bind function to this block, so function will not work on other pages (without <div id='search-block>...</div>)
I have next js code atm:
$(document).ready(function()
// instructions for another page (handlers for some links)
$(function(){
setInterval(findSomething,1000);
});
});
It working fine on page with search-block div, but it works fine on the other pages too. Browser tries to run this function on all other pages. I don't need this.
I tried jquery bind, but it now worked for me, don't know why :(
$("#search-block").bind(function(){
setInterval(findSomething,1000);
});
How I can bind handler to speciges too.fied block?
Instead of bind you have to check for the length of that elem:
$(document).ready(function(){
if($('#search-block').length > 0){ // <---checks the availability
setInterval(findSomething,1000);
}
});
Bind is always used with an event to bind to:
$( "#foo" ).bind( "mouseenter mouseleave", function() {
});
if you want to execute that only when the block is available on the page, use this:
if ($('#search-block').length) {
setInterval(findSomething,1000);
}
This checks the number of times #search-block is found on the page and if it is not 0(false) it executes the code.

Do something AFTER the page has loaded completely

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt seem to work.
So for example, the dynamically inserted HTMl has an element div#abc
and I have this jquery:
if ( $('#abc')[0] ) {
alert("yes");
}
the alert doesn't show up.
I'd appreciate any help
Thanks
$(window).load(function () {
....
});
If you have to wait for an iframe (and don't care about the assets, just the DOM) - try this:
$(document).ready(function() {
$('iframe').load(function() {
// do something
});
});
That is the purpose of jQuery's .ready() event:
$(document).ready(function() {
if ( $('#abc').length ) //If checking if the element exists, use .length
alert("yes");
});
Description: Specify a function to execute when the DOM is fully
loaded.
Using the jQuery.ready should be enough. Try this
$(document).ready(function(){
//your code here
});
or
$(function(){
});
which is a shortcut of the first.
The load() method was deprecated in jQuery version 1.8 and removed in version 3.0.
So you have to use -
$(window).on('load', function() {
// code here
});
Try this:
$(document).ready(function () {
if ( $('#abc')[0] ) {
alert("yes");
}
});
$(window).load(function () { ... }
can be enough but otherwise your embeded code (what ever that can be) might provide some callback functionality that you can make use of.
delay() should only be used to delay animations.
Generally, to handle my JQuery before or after page loads, will use:
jQuery(function($){
// use jQuery code here with $ formatting
// executes BEFORE page finishes loading
});
jQuery(document).ready(function($){
// use jQuery code here with $ formatting
// executes AFTER page finishes loading
});
Make sue you bind the event with dom load so it's there when trigger called.
This is how you do it. Hope this helps someone someday
$(window).bind("load", function() {
//enter code here
$("#dropdow-id").trigger('change');
});`

jquery that just waits

I normally set up my javascript code to have a function. But due to the fact that the application generates most of the HTML and javascript calls from a VB6 application I would like to create a jQuery function that is more like a listener. So for example if I have a td tag that has the class 'gridheader1' I would like the jQuery to wait for it to be clicked.
I'm assuming that I would use the bind... But I'm getting javascript errors with it... If you can offer suggestions on where my code is wrong that would be great.
$('.gridheader1').bind('click', function()
{
alert('hi I got clicked');
});
Again this just has to sit out there on the main .js file. It isn't attached to any functions. Please let me know.
Thanks
you want
$('.gridheader1').bind('click', function(){
alert('hi I got clicked');
});
note the dot at the start of selector - it means class
// static tags
$(function(){ // DOM ready
$('.gridheader1').click(function()
{
alert('gridheader1 clicked');
});
});
// or if the tag is loaded via ajax use 'live'...
$(function(){ // DOM Ready
$('.gridheader1').live('click', function()
{
alert('gridheader1 clicked');
});
});
// or if you already have a function defined that you want to call, you can pass in the function instead of using an anonymous function.
function alertAboutStuff(){
alert('gridheader1 clicked');
}
$(function(){
$('.gridheader1').click(alertAboutStuff);
// $('.gridheader1').live('click', alertAboutStuff); // for tags loaded via ajax
});

listen for jQuery load event for a certain page

I am trying to add some functionality to my posts/new page when it loads, using jQuery. Is it possible to specifically listen to the jQuery page load event for any particular page?
Try this
if($("#elementId").length > 0){
$(document).ready(function(){
});
}
You can also use it is same as ready method.
$(function(){
});
Yes:
$(document).ready(function(){
// Your code here
});
OR simply:
$(function(){
// Your code here
});

Categories