I am using mootools to create a CSS skin for the Youtube chromeless player using the javascript API to control playback. I cannot post the code unfortunately. The question I have is a more general one. When using the slider plugin a call to mySlider.set(step) moves the knob to the correct step on the slider but it triggers all of the plugins event functions (onChange, onTick, onComplete). The problem with this is, how do you know if the sliders knob position was changed by a user or a call to the set() function? I would have thought there would be a function reserved for when the knob was released by a mouse only and not be called if the position was simply set in code. I have code that updates the knobs position based on where the videos playback duration is currently at. I need to be able to move the knob to the current position in code without it thinking a user let go of the knob.
To simplify the question, is there a way to set the knobs position on a slider in code without triggering the functions used when a user interacts?
You can find the Slider plugin reference here http://mootools.net/docs/more/Drag/Slider
Thanks
I got this problem and ended up doing this
var slider = new Slider(track,knob, {
onChange: function(){
console.log("doesn't fire after autosize()");
}
});
// fake .set();
slider.step = 50; // new value
slider.autosize(); // redraw the knob
Make a variable that indicates that you're setting it programatically, then skip your event handlers if the variable is true.
Then, each time you set the slider in code, set the variable to true first, then back to false afterwords in a finally block.
Related
I have two images with same dimensions and same positions, but placed in divs with dynamic width depending on user interaction using the jquery beforeAfter plugin.
I would like to enable scroll zooming on these images using wheelzoom, such that zooming on one of these images will zoom the same amount in the same position as the other.
What I am unable to do is this linking of (I suppose) the event handlers along the lines of this:
function onwheel(e){
//adjust image to fit zoom level ...
other_img.onwheel(e);
}
If this is not possible, is it possible to copy the event and change the target image?
I am looking for a solution using either jquery or native Javascript.
Code here (ignore the handle).
EDIT: Any top-level pointers to what should work would also be appreciated
I made a worked example: http://plnkr.co/edit/kH0ec8TVMXUIYlMoBaMq?p=preview
here is the core code:
document.getElementsByClassName("before")[0].addEventListener("wheel", function(event){
if(flag){
flag= false;
return;
};
flag=true;
var newEvent = new WheelEvent("wheel",event);
var elementToTrigger = document.getElementsByClassName("after")[0];
elementToTrigger.dispatchEvent(newEvent);
});
I do something simple, when an event happening("wheel") a trigger the same event to another element and pass as argument the data from the first event to the new event. I use flag variable to deter the custom event trigger again the other event and start an eternal loop.
This is a solution without to edit the source code of plugin. You can do more good solutions if you change the code of wheelzoom.js.
Make the zooming a function that takes enough parameters to handle zooming, and get the values you need from the event handler.
function handleZoom(domNode, zoomDirection, zoomAmount) {
// Do stuff to change the size of `domNode`
}
var img1, img2;
img1 = /* select image node */;
img2 = /* select image node */;
function handleScroll(scrollEvent) {
var direction, amount;
// Use `scrollEvent` to figure out which direction and how far to zoom
handleZoom(img1, direction, amount);
handleZoom(img2, direction, amount);
}
img1.onscroll = handleScroll;
img2.onscroll = handleScroll;
I've a scenario that requires me to detect animation stop of a periodically animated element and trigger a function. I've no control over the element's animation. The animation can be dynamic so I can't use clever setTimeout.
Long Story
The simplified form of the problem is that I'm using a third party jQuery sliding banners plugin that uses some obfuscated JavaScript to slide banners in and out. I'm in need of figuring out a hook on slideComplete sort of event, but all I have is an element id. Take this jsfiddle as an example and imagine that the javascript has been obfuscated. I need to trigger a function when the red box reaches the extremes and stops.
I'm aware of the :animated pseudo selector but I think it will need me to constantly poll the required element. I've gone through this, this, and this, but no avail. I've checked jquery promise but I couldn't figure out to use that in this scenario. This SO question is closest to my requirements but it has no answers.
P.S. Some more information that might be helpful:
The element isn't created by JavaScript, it is present on page load.
I've control over when to apply the plugin (that makes it periodically sliding banner) on the element
Most of the slideshow plugins I have used use changing classes at the end of the animation... You could extend the "addClass" method of jQuery to allow you to capture the class change as long as the plugin you use is using that method like it should:
(function($){
$.each(["addClass","removeClass"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
oldmethod.apply( this, arguments );
this.trigger(methodname+"change");
return this;
}
});
})(jQuery);
I threw together a fiddle here
Even with obfuscated code you should be able to use this method to check how they are sending in the arguments to animate (I use the "options" object when I send arguments to animate usually) and wrap their callback function in an anonymous function that triggers an event...
like this fiddle
Here is the relevant block of script:
(function($){
$.each(["animate"],function(i,methodname){
var oldmethod = $.fn[methodname];
$.fn[methodname] = function(){
var args=arguments;
that=this;
var oldcall=args[2];
args[2]=function(){
oldcall();
console.log("slideFinish");
}
oldmethod.apply( this, args );
return this;
}
});
})(jQuery);
Well since you didn't give any indication as to what kind of animation is being done, I'm going to assume that its a horizontal/vertical translation, although I think this could be applied to other effects as well. Because I don't know how the animation is being accomplished, a setInterval evaluation would be the only way I can guess at how to do this.
var prevPos = 0;
var isAnimating = setInterval(function(){
if($(YOUROBJECT).css('top') == prevPos){
//logic here
}
else{
prevPos = $(YOUROBJECT).css('top');
}
},500);
That will evaluate the vertical position of the object every .5 seconds, and if the current vertical position is equal to the one taken .5 seconds ago, it will assume that animation has stopped and you can execute some code.
edit --
just noticed your jsfiddle had a horizontal translation, so the code for your jsfiddle is here http://jsfiddle.net/wZbNA/3/
I am having an issue where the slider will not stop auto play when I click a link on my navigation menu. I start the slider via:
$('.bxslider1').bxSlider({auto: true,autoControls: true});
It auto plays and works, but if I try to stop the slider by creating an onclick function or .click() jQuery like:
$(".nav-portfolio").click(function() {
slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
It seems to do something for a split second and then start again. The reason I need to stop the slider is, I am using jQuery waypoints for anchor links to scroll smooth horizontally, and the panels start moving back and fourth by 1 or 2 pixels and its really annoying for the user.
Any help would be appreciated.
Try modifying your code to be:
$(".nav-portfolio").click(function() {
$('.bxslider1').stopAuto();
});
You were previously using the example from the bxSlider webpage which assumes you haven't already initialized the bxSlider. Since you previously initialized it perhaps the second initialization isn't handled gracefully.
Try adding var keyword before the slider declaration.
$(".nav-portfolio").click(function() {
var slider = $('.bxslider1').bxSlider();
slider.stopAuto();
});
Using OpenLayers, I have a OpenLayers.Control.SelectFeature installed on a layer, with the hover option set to true. When creating the layer I call
<layer>.events.register("featureselected",...)
and
<layer>.events.register("featureunselected",...)
to register functions that create and destroy a popup. This all works fine. Now I want to add a small delay before the popup is created in order to avoid the popup flickering that currently occurs when moving the mouse across multiple features. However, I can't seem to figure out how to do this. I did find the OpenLayers.Handler.Hover handler, which has a delay option, but I don't know how to combine that with the SelectFeature control (if I even can).
I think this post has some valuable info, which I'm about to verify. Some answers down, someone talks about the flickering.
edit: In case you are making your own labels, I noticed the effect is less when you raise the labelOutlineWidth . It seems that only the letters of the label count as 'hover' and not the whole PointRadius radius. When you make the label outline too big, the label looks like a fly that hit a windscreen though (not a square but it follows the label contours, the letters more specifically).
update: apparently this is why when you hover a text label , check this out: pointer events properties. set this attribute (pointerEvents: ) in your OpenLayers.Style and try value 'all' and the others. It sure makes a difference for me.
I bind my feature selections a little different, here's a quick (untested) example that should get you what you need.
var timer,
delay = 500, //delay in ms
hover = new OpenLayers.Control.SelectFeature( <layer> , {
hover: true,
onSelect: function (feature) {
// setup a timer to run select function
timer = window.setTimeout(function () {
// your select code
}, delay);
},
onUnselect: function () {
// first cancel the pending timer (no side effects)
window.clearTimeout(timer);
// your unselect code
}
});
<map>.addControl(hover);
hover.activate();
Problem:- I need to embed a progressbar that will run continuously until the completion of the operation.
ExtJS provides a Progressbar Ext.Progressbar which will:-
a) Run Continuously using wait method
b) Run after updating the updateProgress method.
In both the cases output of the progressbar will be
The solution that i am trying for is:-
Step 1 :
Step 2 :
Step 3 :
Kindly suggest me a solution or a approach. The JavaScript library that i am using is ExtJS. Thanks in Advance.
Links Referred for the example:-
http://dev.sencha.com/deploy/dev/examples/simple-widgets/progress-bar.html
Here is a simple approach: you could create an animated Gif displaying the continuous progress bar that you described:
create the img element with the gif as src dynamically at the start of your operation
remove the img element on completion
or if you want to display the empty progress bar before the operation and the complete progress bar after completion:
include an img element with src attribute pointing to an image of the empty progress bar
update the img src to refer to the animated gif
update the img src to refer to an image of the full progress bar at the end
Ext.get('buttonID').on('click', function(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-download',
animEl: 'buttonID'
});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake data was saved!');
}, 8000);
});
I gather Ext JS used to provide an indeterminate progress bar over three years ago, in 0.4; however due to the way browsers can stop animated GIFs it was removed. You could reinstate it with styles as indicated on that forum post - use something like Firebug to see what you should style.
Forum reference
Another approach using JavaScript: you could animate the left margin of a colored div (the progress indicator) within a parent div (the progress bar), using setTimeout or a simple animation library such as emile.js
ExtJS also provides an optional animation in setters of the Ext.Element class:
you could call setX(x,animation) with the optional argument animate on the progress indicator at each step
or insert a transparent "pusher" element before the progress indicator, and call setWidth(width,animate) on the "pusher" to push the progress indicator right
In both cases, you should provide a completion callback in animation options to reset the animation and loop.