I would like to set the text in the tool tip that appears over sliders i Win8/WinJS/Metro/Modern UI (input type="range"), but I can't find any info on how to do so.
The only information I can seem to find is that it can be styled through:
some_selector::-ms-tooltip
{
display: none;
}
But I can't change the text through .text(t)/.html(t) using jQuery.
So the question is, how would I select the tooltip element so that I can set the text?
Related
So I'm wondering if there is a way for me to disable the YouTube controls, seekbar, and title (watch later) overlay buttons.
I use the YouTube keyboard shortcuts all the time and when I see the top and bottom overlay slide in, it irritates the crap out of me as it hides useful info behind the semi transparent bars.
I'm using Firefox with Stylish installed but can't seem to find a way to do this.
If you set YouTube to always use the HTML5 player (a good idea anyway), then you can hide the controls using Stylish.
This does the trick:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document domain("www.youtube.com") {
.ytp-chrome-bottom, .ytp-chrome-top {
display: none !important;
}
}
But be warned:
It's probably not possible to hide the Flash player controls. (Don't use Flash anyway.)
Using Stylish like this hides the controls at all times -- which I find just as annoying as the controls flashing up at unwanted times.
I implement this in chrome, and this method should work in firefox.
Firstly, install an ad blocker extenstion like AdBlocker.
Secondly, open extenstion options interface and add following code snippet to your own filter:
youtube.com###movie_player > div.ytp-gradient-top
youtube.com###movie_player > div.ytp-chrome-top
youtube.com###movie_player > div.ytp-gradient-bottom
Then it wiil work.
An image descrip this:
How to find that filter, it also is easy, open your target website and click F12 key, do this first :
Then construct a formula defined by AdBlocker:
(Website's Host)##(The selector)
and here is:
youtube.com###movie_player > div.ytp-chrome-bottom
It should be noted that you need set the video full screen to find the selector when you want to block the title in full screen mode.
(There may be a grammatical error, but I don’t think it will affect your understanding.)
It worked after adding these in Ublock Origin Filters:
youtube.com###movie_player > div.ytp-gradient-top
youtube.com###movie_player > div.ytp-chrome-top
youtube.com###movie_player > div.ytp-gradient-bottom
The easy way to do it is:
Go to 'share' then click 'embed';
You get a video preview and just uncheck the relevant options below.
Need Stylus.
In fullscreen, controls will be hidden unless mouse over the botton area.
.html5-video-player.ytp-fullscreen > .ytp-chrome-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-top,
.html5-video-player.ytp-fullscreen > .ytp-gradient-bottom {
display: none !important;
}
.html5-video-player.ytp-fullscreen > .ytp-caption-window-container > .caption-window.ytp-caption-window-bottom {
margin-bottom: 0;
}
.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:hover {
opacity: 1 !important;
}
.html5-video-player.ytp-fullscreen > .ytp-chrome-bottom:not(:hover) {
opacity: 0 !important;
}
I need to reduce the width of the following buttons (drop-downs):
"Formatting Styles"
"Paragraph Format"
"Font Name"
"Font Size"
How can I do it?
You can modify the CSS of the underlying button element.
If you want to target specific tools, just use firebug to dig into the DOM and see what their particular classes are.
For example, to modify the widths of the format and font drop downs, use the following CSS:
.cke_skin_kama .cke_format .cke_text,
.cke_skin_kama .cke_font .cke_text {
width: 72px;
}
In CKEditor 4, you can adjust .cke_combo_text like this:
span.cke_combo_text {
width: 30px;
}
Note that if you make it smaller than the default (60px for Formatting Styles), then when the user selects an option from the dropdown, the selected option will no longer fit inside the updated dropdown box.
In my case, I was looking to clean up the UI so that it all fits into one line neatly on an iPhone in vertical orientation, so I did this:
span.cke_combo_text {
width: inherit;
}
For my case, this was great because it shrinks the dropdown menu so that it fits on one line by default, but automatically expands (taking up a new line) if an option is selected, showing the user what they chose.
I have a Validator attached to a field. When validation fails, I want the red line to appear in the field, but I do not want the red icon to appear to the right of the field. How can I accomplish this? I don't see this functionality in the documentation. Thanks!
I also posted this on Sencha's forums but they are very slow: http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440#post718440
I got the answer from the Sencha forums.
Check out Field.setMessageTarget(String) - you'll want to pass in
"tooltip" (or, to just not draw that icon, anything but "side"). With
that set, it shouldn't even attempt to draw the icon.
http://www.sencha.com/forum/showthread.php?175577-How-can-I-disable-the-TextField-validation-icon&p=718440
What about converting the field in a DOM element, then navigate till the Red icon and apply a style to disable it?
Something like:
((El)passwordField.getElement().getParentElement().getChildNodes().getItem(2)).setStyleAttribute("display", "none");
You could have a CSS style like this :
.x-form-element img {
display: none;
}
or
.x-form-item img {
display: none;
}
All the images in a form element won't be displayed.
dateField.forceInvalid("error message which u want to pass"),.it will automaticaly show an exclamation mark on the right side of the date field
I have a site with a textarea that is a very specific size; resizing it could make the user think that they can enter more text into the textarea than is possible (it is limited by rows and columns). Firefox 4 automatically shows a 'resize handle' in the bottom-right of the textbox and as a user I can resize the textarea on the page. Is there any way to disable this?
Thanks.
Use CSS and style it with:
textarea {
resize: none;
}
Sometimes the CSS will not work. I have successfully removed the users ability to resize the textbox by using an inline style. Those are the last ones processed by the browser and have the final say on what style is used.
I'm checking if it would be possible to implement a GUI using HTML through PyQT and WebKit. One of the problem is that using the mouse you can select the text making up the interface. Can this behaviour be disabled?
Also, the mouse pointer changes to an insertion caret while over the selectable text. I would like to disable this, without disabling the hand mouse pointer which appears when over a clickable link.
That's how I am doing it:
cursor: default;
-webkit-user-select: none;
I am working on something quite similar, a desktop app with html/css-based interface.
The above code takes care of text selection and the caret. Set css property cursor to pointer for your links, something like:
a { cursor: pointer; }
You can use javascript to "return false" on the start selection event in order to disable the text selection.