I'm creating a windows 8 app and need to create a vertical slider that also displays tick marks. I'm able to get the range slider to appear vertically by appying the windows specific class: win-vertical.
There are also psuedo-selectors for input[type=range]::-ms-ticks-after and input[type=range]::-ms-ticks-before but I cannot find any documentation on how to use them correctly and any rules I add to them seem to not do anything. Any help would be greatly appreciated. Thx
Have you tried the -ms-track selector? Detailed here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465813.aspx
I tested this in IE10 (should be equivalent to Windows 8) and I am able to set the tick marks to red using the following CSS.
input[type=range]::-ms-track { color: red; }
Related
How can i solve this situation?
Assuming you are using Apache Isis 1.17.0, take a look at
wicket/wicket/resource/org.apache.isis.viewer.wicket.ui.pages.SidebarCssResourceReference/simple-sidebar-ver-1582544091730.css
and try to modify values for padding / margin. Eventually you need to override settings in application.css; sometimes you may need to use '!important'
If you are using Chrome, press <Ctrl>-<Shift>-C and select the date-time widget.
If you can provide sample code, I could take a closer look.
Trying to create a range slider
similar to:
http://foundation.zurb.com/docs/components/range_slider.html
it has to follow the mouse, so no onclick
and needs to output values between 0 (left side)
to 100 (right side) does anyone know the best way to go about this?
thanks
The EaselJS download actually includes a simple slider that is used by some of the examples. You could likely use that as a starting point and build on top of it.
https://github.com/CreateJS/EaselJS/blob/master/_assets/js/Slider.js
The Transform.html and Filters_input.html samples in the examples directory use it if you'd like to see it in action.
http://www.createjs.com/demos/easeljs/transform
I'm using both jQuery plugins:
-fullpage
-slimscroll
for the purposes of making the scrollOverflow option work, so that I can scroll inside the sections with large content, and AFAIK, this happens in Internet Explorer 11.
$('#fullpage').fullpage({
anchors:['home', 'what-we-do', 'our-work', 'contact-us'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000,
scrollBar: true,
scrollOverflow: true, ...
Works fine in Internet Explorer, except when the slimscroll is activated in smaller screens.
Whenever I try to use the mousewheel to scroll down in a section with slimscroll activated, it won't work. Instead I can go back to the previous section by scrolling up.
JSFiddle here
Am I missing something?
Please read this topic in fullPage.js forum.
scrollOverflow:true was never tested with scrollBar:true as it doesn't make much sense to have two scroll bars.
...
Therefore I don't think this problem will get solved.
Try preventing the use of double scroll bars. From he UI point of view its a terrible thing.
I use tooltipster library.
I set tooltipster's position to be bottom. When I minimize the browser's window the tooltip is floating above, it's like the position was set to top.
How could I solve this?
Thank you in advance
According to the author's documented feedback, this functionality has been written but it not officially released yet.
This specific functionality has been requested and he has explained how it is implemented within the plugin options.
instead of:
...
position: 'bottom'
...
you put it in an array:
...
position: ['bottom']
...
this is how the scripts tells that it is to be forced.
have a look at these 2 links.
https://github.com/iamceege/tooltipster/issues/335
https://github.com/iamceege/tooltipster/issues/342
I am working on an application build on Dojo 1.4 and currently used on IE8.
When tried to run IE10 Compatibility view, I observer some X (to clear the data) are being show in the fields like dijit.form.Select. While in IE8 it doesn't display them
Please guide to remove them or what basically is happening
Thanks in Advance
If this is the same problem I just fixed then the question isn't referring to the IE10 "clear field" X. It's referring to a very large text "X" character that is displayed in the Select widget in addition to the options that are supposed to be there, making the widget twice as tall as it should be.
In my case it was because I was mixing the CSS stylesheet from one Dojo version with the API's from another. Check to make sure that your stylesheet and dojo.js versions match. For example, in my case the stylesheet was:
...href="//ajax.googleapis.com/ajax/libs/dojo/1.7.5/dijit/themes/claro/claro.css" media="screen">
while the script being included was
... src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
I blame the fact that I was modifying Dijit sample code without knowing what the heck I was doing...