Develop Reference

Is there a way to use jQuery .on function with load event?

I'm not jquery/javascript expert and have been struggling to find an answer to this question.
I typically use jquery as follows because I use Ajax panels - so the binding persists through partial postbacks.
function setupBindings() {
$("body").on("change", ".isvalidated", updateStateOnChange);
}
However, I need to carry out a function on load - something like the following code, and was wondering about the best way of achieving it in terms of my usual pattern.
$(window).load(function() {
$('form').reset();
});
Is it possible?

jQuery plugin letter-fx - add setTimeout

I downloaded the jQuery plugin letter-fx (http://tuxsudo.com/code/project/letterfx) and really like what it can do.
However, on my landing page I'm trying to make the different paragraphs appear in sequence. I thought the best way to do that is to delay each paragraph with setTimeout()
I'm a JS/jQuery novice and hoping someone can help me out. Here's the code I have thus far:
$(function(fx1){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
});
$(function(){
setTimeout(fx1,3000);
});
Can anyone show me what I'm doing wrong? Thanks!

Try below code. To use setTimeout you need to pass a function as first param.
$(function(){
var applyAnimation = function(){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
};
setTimeout(applyAnimation,3000);
});

Override js-events

It's a long shot which is not that investigated yet, but I'm throwing the question while I'm looking for answers to hopefully get on the right track.
Building a Wordpress site with the theme Dante. This has an image slider function for products, handled in jquery.flexslider-min.js. In my first attempt i used wp_dequeue_script( 'sf-flexslider' ); to stop using this, and then added my own js which works perfect. The problem, however, is that in the bottom of the page there's another slider for displaying other products that uses this file, so i can not simply just dequeue this script.
I've tried to put my js-file both before and after the jquery.flexslider-min.js but this is always the primary. It there a way to, in my js-file, do something like "for obects in [specified div], skip instructions from jquery.flexslider-min.js"?
EDIT: Found this thread and tried the .remove() and the .detach() approach and add it again, but this makes no difference.
I really want to get rid of that flexslider on this particullar object. I can, of course, "hack" the output and give the flexslider item another class or something, but that would bring me so much work i don't have time for.

Maybe, You can monkey patch the flexslider behavior. There's a good tutorial here:
http://me.dt.in.th/page/JavaScript-override/
Something like:
var slider = flexSlider;
var originalSlide = slider.slide;
slider.slide= function() {
if ( some condition) {
// your custom slide function
} else {
// use default behavior
originalSlide.apply(this, arguments);
}
}

Polymer function call but no result

Old Question: How can I call a Polymer Function? (check edits, I don't want to cram code in here)
Rewrite:
I have a <core-scaffold> that I want to call the togglePanel() function. (This sits in project_root/index.html.) I do this using:
<core-icon-button onclick="document.querySelector('core-scaffold').togglePanel();"
icon="drawer></core-icon-button>
In Chrome's Inspector, I can see this causes no errors, but it doesn't do anything on-screen. My code calls this function in project_root/bower_components/core-scaffold/core-scaffold.html:
togglePanel: function() {
this.$.drawerPanel.togglePanel();
}
Which in turn calls this function in project_root/bower_components/core-drawer-panel/core-drawer-panel.html:
togglePanel: function() {
this.selected = this.selected === 'main' ? 'drawer' : 'main';
}
I am either to naive and unexperienced to see the problem, or have a terrible complex bug. Any help would be appreciated!

I ran into the problem as well. The issue is that the closeDrawer(), openDrawer(), and togglePanel() are only usable when size of your screen is less than the value of responsiveWidth.
I think the logic is that if you have the screen real estate you would always want to show the drawer. Of course this could be tweaked by extending core-drawer-panel and making a custom core-scaffold implementation.

You can directly fetch the element using query selector and call its method on onclick just like other html pages
<button onclick="document.querySelector('core-drawer-panel').togglePanel();">toggle drawer</button>

Change the published attribute in core-drawer-panel.html forceNarrow=true See # Call function on polymer navigation drawer panel

jQuery: Trigger help

I'm using the cluetip jQuery plugin.
I'm trying to add my own close button. The the jquery I'm trying to call is:
$(document).bind('hideCluetip', function(e) {
cluetipClose();
});
There are many references to cluetipClose() through the code and the button that the jquery inserts uses it and works so that function as far as I'm aware works fine.
I'm trying to trigger that using
$('a.close-cluetip').trigger('hideCluetip');
I've created my link:
Close
But it isn't doing anything.
Am I calling it incorrectly?

The problem here is that in the cluetip plugin, the function clueTipClose() is inside a closure, so you have no access to it unless you're inside the closure (i.e. inside the plugin's code). Now I've gotta admit, this plugin doesn't seem to be set up to be all that extensible. If they made this function accessible via a "clueTip" object that was set up for each element that uses it, you'd be able to add another jQuery method to the end of the closure like this:
$.fn.cluetipClose = function() {
return this.each(function() {
var thisCluetip = findCluetipObj(this);
if (thisCluetip)
thisCluetip.cluetipClose();
});
};
But you have the unfortunate luck of not being able to do this easily. It looks like this guy wrote his jQuery plugin with non-OO code inside of a closure. Poor you.
Now on the plus side, it seems this plugin is already running this code directly after it instantiates the cluetipClose() function. Have you tried just doing this from your code:
$('a.close-cluetip').trigger('hideCluetip');
Without redeclaring the document hideCluetip bind? I think that should probably work.