Develop Reference

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

Example on how to use seek(time, [callback]) in Flowplayer

I'm trying to understand the flowplayer API, I'll be honest, I really need examples to get this stuff. I know some of you ninjas know what you're doing quite easily.
I am building a video training page for someone. It uses a PHP (kirbycms) framework to generate pages. I understand how to drop my variables and all that stuff. I have the videos working. It would be largely beneficial if I could have cue points that trigger things, and buttons that seek to specific time codes. It would be best if I can use PHP to define a string for these links.
I am looking for an example on how to use seek(time, [callback])
I am also looking for an example of
$(".player").bind("cuepoint", function(e, api, cuepoint) {
// here we use custom properties left, top and html
$("#info").html(cuepoint.html).animate({
left: cuepoint.left,
top: cuepoint.top
});
});
Update
Included bootply, this still does not work for me. Is it because my controls are outside of the flowplayer window?
http://bootply.com/86532

seek function (as documentation says: CLICK) is for jumping into given time on the timeline:
seek(time, [callback])
It takes two arguments: time in seconds and a callback - function that will be executed after jumping into that time on the timeline. Assuming that you are using jQuery you can write something like this to jump into 15.5s of the movie if you click button and then alert some message (just a simple example):
flowplayer(function (api, root) {
$("#someButton").on('click' function(e){
e.preventDefault();
api.seek(15.5, function(){
alert("you've jumped to 15.5s of the movie!");
});
});
});

Flowplayer doesn't do what you're after. In fact, seek() pretty much does the opposite- it triggers the video to jump to that point in time (and optionally calls back when its done).
If you want to set cuepoints and have the video trigger code when the video reaches those points in time, have a look at addEventListener("timeupdate", callback), see docs.
You might also want to check out popcornjs.

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.

Does anyone know any people-based source code audit website/forum/comunity for JavaScript/jQuery?

Hello I'm writing a jQuery code for my application and got some issues (like function called once, running three times).
I must know if exist any site that people audit source code and comment my mistakes..
most of my code is like this i/e:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
$.openModal = function(foo,bar){
//do something
$('a.close').click(function(){
$('#modal').hide();
});
$('input.text').click(function(){
$.anotherFunction();
});
});
does am I doing something obviously wrong?

I'm not aware of any source code audit like that -- certainly not for free! This website is pretty good for specific problems though...
In this case, the problem is that you are continually binding more and more events. For instance, with the following code:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
This code says "whenever the user clicks on an a.openbox element, show all .box elements and bind a new click handler to all .box a.openModal elements". This means that you will add another handler to .box a.openModal every time you click on a.openbox. I can't believe this is what you want to do!
It is difficult to work out what the correct code should be without knowing the context and exactly what you want to happen. My advice for you in the first instance would be to do some reading up on Javascript events and event handlers, particularly as they are implemented in jQuery.