jQuery UI Sliders - multiples slider(not range) at same position - javascript

I am trying to create a slider with 2 handlers with no dependancies to each other so it is not a range slider.
I`ve altered the css of both so that one apear above the line and one under it. When I inspect the slider at run time I can see that they overlap a bit but 3/4 of each slider does not
my problem is if I set both handler to the same value, when I try to change a value, jquery give me the control of the last one I`ve moved even if I click on the other one in a part where it dosen't overlap. seem like the slider engine give me control of this slider because in a range slider situation this will make sense(as they usualy completely overlap).
I use simple slider loading :
$( "#slider1" ).slider(
{
min: 1,
max: 11,
step: 1,
values: [5,5],
slide: function(event, ui) {
if(ui.value > 10){
return false;
}
}
}
);
anyone got any idea how I could bypass this?
here is the fiddle of it : fiddle

Related

How to animate selection / deselection in ace editor?

I'm working on live configuration tool for Apache Ignite.
UI organized in two columns. In left column I have various inputs, checkboxes, dropdowns... and in right column I have ace editor where I show preview of generated configuration.
I want to implement selection of changed parts by selecting them in ace edit.
And I already do that. But for better user experience I would like to select changed lines with fade-in / fade-out animation.
Could anyone give me some advice how to implement this.
Code for selection:
editor.selection.addRange(new Range(start, 0, end, 0));
I guess I need some how tweak CSS?
Or may be I should change selection color in loop and select with different colors several times with short pauses?
Update: after several hours of digging ace I found that animation part of css is ignored by ace. So I go to http://www.perbang.dk/rgbgradient, configure gradient with 10 steps and create 10 styles in my css. And apply them in loop for range. Here my code (I use AngularJS, so, it is a part of my controller):
var animation = {editor: null, stage: 0, start: 0, stop: 0};
function _clearSelection(editor) {
_.forEach(editor.session.getMarkers(false), function (marker) {
editor.session.removeMarker(marker.id);
});
}
function _animate() {
animation.stage = animation.stage + 1;
animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0),
'preview-highlight-' + animation.stage, 'line', false);
}
function _fade(editor, start, stop) {
var promise = editor.animatePromise;
if (promise) {
$interval.cancel(promise);
_clearSelection(editor);
}
animation = {editor: editor, stage: 0, start: start, stop: stop};
editor.animatePromise = $interval(_animate, 100, 10, false);
}
I've got an answer from one of Ace developers "nightwing":
Using css animations or transitions would be the best solution, but it doesn't work for now since marker layer uses innerHTML which removes all marker nodes restarting animation.
As a workaround it is possible to add dom node with animation to editor.container and use code similar to https://github.com/ajaxorg/ace/blob/master/lib/ace/line_widgets.js#L271 to position them inside the editor

how to slow down Flowslider slider?

I have a flowslider slider, here the page of the project http://www.flowslider.com/
It's a very easy to use slider however I don't know how to reduce the sliding speed, there's no working example in the site
that's my slider initialization code:
<script>
jQuery(document).ready(function($) {
// Select your slider element and call Flow Slider plugin.
var $slider = $("#slider");
$slider.FlowSlider({
controllerOptions: [{
mouseStart:100,
mouseEnd:100,
}],
marginStart:20,
marginEnd:20,
mode:"horizontal"
});
});
</script>
the actual slider is just a
<div id="slider">
a bunch of PHP generated divs here, each one is a slider element
</div>
I tried setting speed and coefficient but without any results
You can't change the sliding speed, it's because the sliding speed depends on user mouse action ( user mouse movement) and the width of content div and the count of images in it. It means when you move your mouse slowly cross the slides the sliding happens slow and when you do it fast slides goe fast. This slide is not that kind of slides that repeats sliding in a period of time.
As written in the documentation of HoverCenter you can use the coefficient or write your own moveFunction. It seems that a list for controllerOptions is missing in the documentation.
To get coefficient to work, use something like:
$('#flowslider').FlowSlider({
mode: 'horizontal',
marginStart: 0,
marginEnd: 0,
controllers: ['HoverCenter'],
controllerOptions: [{
coefficient: 0.1
}]
});

How to stop Jquery jCarousel on a specific condition

I am working on jquery's jCarousel, In which i am having some images from database and shown as slider using jCarousel, my functionality is working as per i expected but i want to apply one more functionality is that if image is only 1, then it should not do sliding, I am taking image count from database then setting it in jCarousel visible property
$('.carousel').jCarouselLite({
visible: #ViewData["ImgTotalCount"].ToString(),
activeClass: 'current',
btnNext: ".carousel-next",
btnPrev: ".carousel-prev",
auto: 2000,
speed: 600
});
curently it is sliding even on one image
If you have only one image, set the auto parameter to null. It will restore it to its default value, and to its default behavior, which is not moving.
See documentation here : http://www.gmarwaha.com/jquery/jcarousellite/#doc

jquery slider - animating timeline

I'm using the jquery slider function for a timeline
$("#content-slider").slider({
min: 0,
max: 300,
step: 1,
change: handleSliderChange,
//start: getImageWidth,
slide: handleSliderSlide
});
function handleSliderSlide(event, ui) {
$("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 300) });
if (ui.value >= 7 && ui.value <= 13) {
$('#marker_10').animate({opacity: 'hide'}, 100, function () { $(this).parent('div').animate({marginTop: '100px'}, {duration:1000, queue:false }).addClass('up').find('p').animate({opacity: 'show'} ) })
}
if (ui.value > 13 || ui.value < 7 && ($('div#container_10').hasClass('up'))) {
$('div.up').stop(true)
$('#container_10').removeClass('up').find('p').fadeOut('fast').end().animate({marginTop:'165px'}, {duration:500, complete:function() {$(this).find('img.marker').fadeIn() }, queue:false})
}
}
http://asla.dev.1over0.com/html/slider/bacardi_last.html
It animates ok when I scroll left to right but when I scroll right to left then I get some issues where elements are fading out and displaying correctly
any information would be appreciated; this is all done on the front end currently
Thank you
I don't have a solution directly, but some notes that may help.
The down animation isn't triggered until the slider is past the left edge of the active content. To the right, it's triggered immediately after the slider moves off of the vertical line.
Several of the sections have content cut off the bottom - seems like a simple height issue?
When sliding right to left, the vertical line doesn't disappear.
You may want to add a "title" to "#content-slider a" as new users may not be sure what it does at first. A simple "Slide Me" would suffice :)
One additional note, when the browser window is small (around 800px or so, didn't check exactly), the content jumps below the slider bar.
Just thinking about how I'd approach this task; I'd setup animations in a function for animating up, then one for down. After I can verify they work on button press (or some non-slider trigger) I'd work on ensuring the "active" areas are setup correct on the time line (either the vertical line or the whole "active" content box, personally I'd do something in the middle). After those pieces are setup, should be an easy task to trigger the up movement function when the slider is in the "active" area and down when it leaves, making sure they don't run at the same time.
Hope it helps!

Slider control for volume - JQuery/Javascript

I am looking for a fancy Slider control using JQuery/Javascript. The native JQuery slider is rather bland for this requirement. The slider will be used to specify the volume in the increments of 5. So, this slider should only let user slide in increments of 5.
One nice to have feature is to be able to show label above the slider position indicating what volume the user has selected.
Here's an example of the customization you're after that uses the jQuery UI Slider. It's all CSS in the background, you can customize the hell out of it.
Setting the snap you can do increments and update the amount like this:
$("#mySlider").slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
step: 5,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#mySlider").slider("value"));
I've found a nice volume slider. I think this is what you're looking for. It's the classic triangle-shaped controller with increasing vertical bars. And it's very customizable with position indicator. Download the zip file here: http://ruwix.com/javascript-volume-slider-control/

Categories

Resources