How to make a range selector? - javascript

I want to us a range selector with two dependent input and a chart in my website , exactly like this one in Google page for Company Distribution.
https://www.google.com/finance#stockscreener
but I don't want to write it from the scratch by myself.
Is there a good library for it? I want to make exactly similar to that.

You can use this plugin - JRange. It is in github and is easy to use.

Related

how to make same chart with lightweight chart with javascript

I am use https://github.com/tradingview/lightweight-charts javascript package.
As you can see in the picture, orders are shown in green boxes on the bitmex exchange. I want to learn how I can do this in my own table. I could not find a similar example in the document. Can you help me ?
I'm afraid it couldn't be done with lightweight-charts. If you'd like to add them and want to use TradingView's charts, I'd suggest you take charting library instead.

Is it possible to have multi-line in select option value

Is it possible to have multi-line in select option value
In the multi line option I would like show first line in bold and rest of lines in regular font.
Is there any possible approach using HTML/CSS and Java script or
Do we have any library in React which can achieve the above
It is not possible with current support of the select tag in current HTML version. The only possible solution here is to use a custom made solution, both vanilla CSS or javascript options are available, and you have plenty of techniques to choose from.
Whenever I found myself in a need of creating a custom solution I like to look for inspiration in this article:
https://tympanus.net/Development/SelectInspiration/index.html
Once you decide to go with custom made solution it is always a good practise to implement at least basic Screen Reader support.
A good place to start: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Best_practices
From my experience in business projects I usually prefer to go with JS powered solution, especially in such where frontend is changing a lot. My favourite here: https://select2.org/ which is both easy to customize and powerful enough to meet even the most challenging requirements, and you can't forget about really good docs.
As I can see you included a reactjs tag in your question, so if you are planning to create a react solution I would go with:
http://jedwatson.github.io/react-select/
which is pretty similar in functionality to Select2

How to set up flexible pagination for tables in Javascript?

I am a relative JavaScript beginner. I am comfortable working with documents (document.getElementById(...) and document.getElementsByTagName(...).. and other document querying functions.
I have been asked to create some sort of a table pagination library for my team. We don't use jQuery or any other third party libraries. So I would have manipulate the table dom or something like that to make it work. In this library, I would have to be able to
set up flexible pagination (Number of rows to be displayed per page may be configured by using some sort of a text box) I took a look at some of the sources jQuery Pagination Plugin. But I can not understand it.
The user should be able to navigate back and forth using some icons. The page number changed should be reflected in the configuration box.
I am not asking for solutions because I would learn to do this on my own. How can I start working on this issue?
Update after observations from nnnn
I am not sure what approach to take, as I had not considered that possibility. Most of the times, we have only about 2000 records to display. I guess if the load does not take too much memory, I would prefer to load before hand and then try to paginate it. Although, I will go with whatever is recommended.
I would highly recommend taking a look at the jquery datatables plugin http://datatables.net/
If you want to implement your UI and just need an Object to handle pagination logic please see this library: https://github.com/pagino/pagino-js

How to create a color scheme generator for a webpage

I am trying to make a (somewhat simple) color scheme generator for a webpage. I need it to look exactly like this image (or as close as I can get it):
Is there any websites out or other areas I can look to find examples on how to do this? I couldn't find any code examples online.
The tags may be off, I'm not sure which language I would need to use. (Please edit if so)
Jquery Color Picker seems to be what your looking for.
For example.
http://www.eyecon.ro/colorpicker/
Check out this kulor: It's a flash site but it works and has lots of themes.
http://kuler.adobe.com/
http://acko.net/dev/farbtastic
http://www.dematte.at/colorPicker/
http://www.colorpicker.com/
http://www.dhtmlgoodies.com/scripts/js_color_picker_v2/js_color_picker_v2.html
http://developer.yahoo.com/yui/colorpicker/
http://safalra.com/web-design/javascript/widgets/colour-picker/
http://www.colorjack.com/software/dhtml+color+picker.html
http://colourmod.com/
http://johndyer.name/lab/colorpicker/ ( http://www.digitalmagicpro.com/jPicker/ for jquery)
http://moorainbow.woolly-sheep.net/#demos
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_ColorPicker.html
http://www.mozilla.org/editor/ui_specs/ColorPickerWidget.html
http://www.visibone.com/swatches/

creating a configuration pane in javascript

I am looking to create a generic config pane for a grease monkey plugin. I was wondering if there exists a lib to make this easier?
I am looking for some tool where you might give it some name/value pairs and it will generate a nice looking UI.
I think ive seen this somewhere but forgot the search terms.
Maybe you can use jQuery UI lib for building pane. Lib is full of easy-to-use visual components.
Given how simple you seem to want it, why not just hand-write some HTML and CSS and throw that up on the page? It's very easy to show a simple configuration window and takes very little effort to make it look presentable.
If you want it to look nice, jQuery UI. You could also try Cappuccino, but the more library you layer on, the clumsier it'll get.
For a simple layout, just use tables. Taboo, yes, but effective... and it IS just a configuration screen.

Categories

Resources