I was wondering if anyone had any advice or examples for how to extend the jQuery UI slider to make the range draggable? Basically what I want it something similar to this, but I'd like to be able to grab the gray bar and drag it to adjust the range.
There is a widget extension available here
(see Drag the Range of a UI Input Range Slider for more detail)
Related
I am trying to figure out a way to add multiple UI pickers on Spark AR.
For example, let's say I am making a beautify filter and I would want to let the user change the brow colour, lip colour and blush colours seperately. (but shown at the same time)
I think I might have to use multiple UI pickers for that? a picker for changing the lip colour, a picker for changing the brow colour, a picker for changing the blush colour. BUt I am not sure if that's possible.
What I thought I could also do is to use the UI picker to let the user choose the eyebrow/lip/blush and then use the tap to change function to change the colours? I am not sure if that makes sense.
In my Angular 2 environment, the OpenLaysers and Highcharts components are not rescaling themself after I change the Bootstrap layout. If I click on my button that changes the Bootstrap grid classes, the components should rerender. I tried rerendering the charts through highcharts.redraw() function - that does not fix the problem. As visible in the video, if I press 'F12' and go into 'Developer Tools' (showing as a black box at the bottom - 0:08), the components redraw. Therefore I tried workarounds like giving the body a zoom of 2.0000.1, new zIndex, different height, display 'none' - 'block'. Nothing works.
In Highcharts you should use chart.reflow() not chart.redraw(). Alternatively, you can use chart.setSize(newWidth, newHeight).
I need to write some text in openLayers 3... Not a label, something like a text object, that I can select and drag around the map. This text must have multiple lines.
I tried to use a point with ol.style.text, but it isn't multiline.
I also tried the popups, but I need the text to be always displayed.
Is there any way to use a text feature for this (ol.format.TextFeature)?
Is there any object that I can use for that purpose?
Thanks!!
You can use an ol.Overlay for that. An overlay is basically anything an Element can be. It has a position an positioning that can be set at any time.
See an example: http://openlayers.org/en/v3.9.0/examples/overlay.html?q=overlay
You could use map browser events (pointerdown, pointerup) and if the target is your overlay element then you could move it around and update its position.
Originally, I had a text input setup with a ng-model attribute, so that when changing its value, it would trigger something else on the page that was utilizing that model attribute. I have replaced that text input with a jQuery UI slider, and am curious what the correct or "angular" way to interact with this element so that the slider's change event / function can delegate directly to angular and accomplish the same sort of thing.
Take a look at the ui-slider component of angular-ui to see a solution for your situation.
Is there a simple way to have a default text in the textbox using jQueryUI's autocomplete ?
I have tried using data-placeholder but it doesn't seem to work.
I have searched online, and people suggest using the textbox value to display the text, and clear it on focus. But then I would need to change the font style just for the default text, and check onKeyUp when the text is manually erased etc...
Is there no easier way to do this ? or am I missing something ?
A lot of people will use a span that is positioned to be over the text box. When the text box gets focus then you hide the span. When the text box blurs and has a value, you don't show it. If it doesn't have a value then you can show it again.
You can style the span however you want independently of the text box so you would not have to change the font style on the text box itself. You would have to subscribe to the focus and blur events, but it would be much easier if you created a jQuery plugin to do this. In fact, I'm sure there are ones that already exist that do this.