Run Jquery Function on page load, not on image click - javascript

I'm using a jquery plugin and right now it only runs when the button is click. How can I make it run on page load? Or maybe 3 seconds after page load.
<div class="classysocial"></div>
<script>
$(document).ready(function() {
$(".classysocial").each(function() {
new ClassySocial(this);
});
});
</script>
EDIT: here is the JS for the plugin:
http://pastebin.com/Ct6asnYy

I guess Classysocial is some plugin that binds onclick event to the button.
If You can't access the plugin code, the hotfix would be to trigger onclick programatically, like:
$("your_button_selector").click()
To achieve delay, take a look at jQuery .delay() method.
Check also Javascript's native setTimeout and decide which one suits your needs.

Related

window.onload not working always in chrome

I have two radio button in my views. on Page load i want to trigger a click event, i used the following Jquery Code to click radio button on page load.
$(window).on("load", function () {
jQuery(function () {
jQuery('#addressID_radioButton').click();
jQuery('#personID_radioButton').click();
});
});
But in Chrome jQuery('#addressID_radioButton').click(); works or triggers click event on addressID_radioButton radio button but on jQuery('#personID_radioButton').click(); sometime it works sometimes it doesn't, i have to refresh the page to make it work.
Set checked instead if that is all you are wanting to accomplish
jQuery('#addressID_radioButton, #personID_radioButton').prop('checked', true);
Since updating to Wordpress 5.6 I've noticed $(window).on("load"... is very fickle. I installed jQuery migrate too.
Try document.ready to test and I think you'll find it will work.
I'm not sure if the $(window).on("load" bug is related to jQuery or browser.

If div changes content

if a div changes its content after a button click, is there some way to hide another div.
for example after i hit on submit button <div id="dynamic">1</div> changes to <div id="dynamic">2</div> once it shows 2 i would like to hide the submit button completely.
i was trying to work something with the below, hope it makes sense.
$(document).ready(function(){
$('#dynamic').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event) {
$("#submitbutton").hide();
})
})
thanks in advance.
If there is some async action involved and you don't know the exact timing when the content will be changed you could use a MutationObserver to observe a specific DOM element and execute logic if the condition within the MutationObserver is met: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
If the change of your div content is based on an API call that returns the change you could run a callback function to hide the submit button once the promise is fullfilled: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
If it is really as simple as in your example, that you click on submit and then logic to change the div is executed, you could just write the logic to hide your submit button on the next line or as a callback function after click execution.
If you are using newer version of jQuery, bind is deprecated and you should use on instead. This works for me, though as mentioned in another answer this might not be fully cross browser compatible.
$(document).ready(function(){
$('body').on('DOMSubtreeModified', '#dynamic', function(event) {
$("#submitbutton").hide();
});
});
Here's a link to a working example: https://jsfiddle.net/ky43hx6q/

Jquery Onclick functionality not working for div, as specific loaded after sometime

For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......

YUI3: How would I trigger an event?

Suppose I have a click event on a link/button/etc.
var myButton = Y.one('.button');
myButton.on('click', function() {
// code
});
There is something else happening on the page that I want to trigger a click event on this button. How would I do this?
I saw YUI3's fire() method, but it looked like that was designed for custom events. If I am supposed to use fire(), then will myButton.fire('click') work?
(I'm looking for the equivalent of jQuery's .trigger() method, which works on DOM events or custom events.)
If you are looking for equivalent of trigger in yui3 you can try using the 'simulate'
Y.one('button selector').simulate('click');
For the above statement to work you will need to add "node-event-simulate" roll up in the use method.
Do you really need to trigger the click event on the button? Take the HTML below
<button id="myButton">Click Me</button>
<br>
Click Me
You can make use of the custom events to put the real logic somewhere central.
YUI().use("node","event",function(Y){
Y.one("#myButton").on("click",function(){Y.fire("custom:doThing")});
Y.all("a").on("click",function(){Y.fire("custom:doThing")});
Y.on("custom:doThing",function(){console.log("Do my thing, regardless of event source")})
});
Fiddle: http://jsfiddle.net/WZZmR/

Jquery dispatchEvent wrapper method

Is there a wrapper method or some library for dispatchEvent in jquery? I've been looking for this on stackoverflow, but the closest method I've found is jquery's trigger(), which appears to only trigger jquery event listeners. Of course I could just use dispatchEvent myself, but I want to use jquery to make my code easier to read.
I'm writing a greasemonkey script, where I want to fire an event to some anonymous event listener. The page itself is not written in jquery.
Here's a jsfiddle link to explain what I'm trying to accomplish: https://jsfiddle.net/Zx3CA/
js:
function log(s){
document.getElementById('log').innerHTML+=s+'<br/>';
}
$(function(){
//code on the page, which shouldn't be changed
//start
document.getElementById('link').addEventListener('click',function(){
log('click detected');
},false);
//end
$('#triggerClickJQuery').on('click',function(){
$('#link').trigger('click');
});
$('#triggerClickJS').on('click',function(){
var event=document.createEvent('MouseEvents');
event.initMouseEvent('click',true,true,null,-1,-1,-1,-1,0,true,false,false,true,0,null);
$('#link').get(0).dispatchEvent(event);
});
});
html:
<body>
<a id="link" href="javascript:void(0);">Link</a><br/>
<a id="triggerClickJQuery" href="javascript:void(0);">Trigger Click JQuery</a><br/>
<a id="triggerClickJS" href="javascript:void(0);">Trigger Click JavaScript</a><br/>
<div id="log"></div>
</body>
Thanks in advance.
The implementation of trigger in jQuery (upto 1.10.1) for custom events doesn't fire a native event and therefore you wont be able to listen for it via addEventListener or a different version of jQuery loaded on the same page.
This bug with all of its use-cases is well documented here: http://bugs.jquery.com/ticket/11047
As a solution you can use this plugin, which checks if the browser supports firing custom native events and uses it when available.
https://github.com/sandeep45/betterTrigger

Categories