I have a long list of font-sizes and there is a display problem on small monitors. How to fix it?
https://prnt.sc/o56jwb
You can add CSS which overrides those styles. For example, those can look like this.
.ck-fontsize-option .ck-button__label {
font-size: unset !important;
}
If you don't want to use !important parameter, the solution will be more tricky. You need to remove or block the execution of this code. You can modify the plugin and use your custom version or you can write own UI part for it. You can find a rendered element in componentFactory and modify it. You can somehow prevent changing labelStyle of a button, or invent some completely new solution for that suitable for your case.
Related
I am using a code on my blog that is contained within <script> </script> tags, that when looking at the page, creates a link. My overall blog code sets a color for all links but I want this link to be a different color than all the rest.
I tried using a few different methods of changing the text color and even of changing the link color but nothing I tried worked.
It's hard to see what you are doing wrong without seeing your code, but basically all you will need to do is set the color of your link with the style attribute when inserting the HTML, something like style="color:red".
Assuming you are using pure JavaScript and your script looks something like this, this will give you a red link:
document.getElementsByTagName('body')[0].innerHTML +=
''This is red!'';
If you are using jQuery your script may look something like this:
$('This is red!').appendTo($('body'));
Inline styles have the highest priority of all CSS so these will override any other CSS you may have.
Leave a comment and update your question with your code if this doesn't help you, and I will try to improve this answer!
.disableSelection in JQueryUI 1.9 is deprecated. The only explanation I can find is, literally, "Disabling text selection is bad. Don't use this." and "We shouldn't allow developers to mess with text selection. This was originally for the interaction plugins, but they're all handling text selection properly on their own at this point."
Since there is no alternative suggested, I assume they mean that it is always bad but I cannot fathom their reasons. A double/triple-click or otherwise meaningless selection of an elaborate-UI application improperly applies the text-highlight effect and (to me) instantly removes the illusion of a robust user experience.
Desktop applications don't suffer from this! Buttons and other controls in a Desktop environment are regions of pixels that look solid and act intuitively no matter what you do to them (or else they're broken). The fact that web applications are composed of complex html boxes, backgrounds, borders, and images (the web-analog of pixels) is no reason to betray the illusion that the screen elements we interact with isn't an atomic, physical object.
In the image below, arguably some of the text should be selectable, such as the paragraphs of text within panels which could be application data. But for some applications it would be a reasonable design choice that other parts, such as the text in buttons, tabs, accordion headers, and text behind modal dialogs would not be selectable. This especially applies to draggable/sortable kinds of behaviors.
1) Am I misinterpreting their decision? Is the recommendation more specific to JQuery than I realize?
2) If it is meant as a general statement that text should always be selectable like this, please provide a fuller explanation of why.
3) If I were going to do it anyway, what is the most performant, complete, respectful, cross-browser, and universally accessible to go about it now that disableSelection is deprecated?
You can use CSS to accomplish this in most browsers: http://jsfiddle.net/fQthQ/
* {
-ms-user-select: none; /* IE 10+ */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.selectable {
-ms-user-select: auto;
-moz-user-select: auto;
-khtml-user-select: auto;
-webkit-user-select: auto;
user-select: auto;
}
Opera does not currently support this feature.
See the MDN page for more info: https://developer.mozilla.org/en-US/docs/CSS/user-select
A real-world case in which disabling text selection is useful is a <ul> element whose <li> have been programmed to be draggable (for sorting). The dragging works correctly except that text is getting selected while the user is dragging. Surely this is a legitimate use for disableSelection().
I know that it can be done without this method (otherwise it'd be impossible for the method to do it in the first place); but the reason I wanted to use disableSelection() is to concisely express my desire in a single place and have jQuery-UI handle my cross-browser compatibility issues rather than having to use a combination of several CSS rules and some JS (for IE7).
I believe this feature is deprecated because someone was annoyed at web sites that disable selection, and decided that this is not a practice they should encourage. It's analogous to a web programmer refusing to support popular legacy browsers because they don't want to encourage their use. Such a programmer would be fired, but you can get away with imposing your philosophy on others when you have power over a popular library. Deprecating this feature has the effect of making programmers who want to disable selection waste their time looking for an alternative method. By punishing evildoers, jQuery-UI will presumably make them change their ways, and our society will not be inundated with web sites that disable selection. So you see, there is a perfectly good rationalization, and whoever wrote "Disabling text selection is bad. Don't use this." in the official documentation can regard themselves as heroic. We're the bad guys here.
As an alternative to the CSS user-select: none; technique, I think simply preventing default behavior on double-click and mousedown via $(document).on('dblclick mousedown', '.prevent-select', false); has some advantages:
Still allows text selection, should the user want to drag the cursor around the elements. Just prevents annoying text selection when the user is rapidly clicking.
Better browser support.
Not deprecated by jQuery team (no evil glares in code review.)
I could not agree more with #WesleyMurch, wish I could give you more +1s :) I also feel that, JS should not be the way forward, css may be better for this...,
If you need the selection to toggle (in some cases if dynamic) you can use jquery to toggle between classes, (old IE browsers) you may ask???
Well it's a good way (subtle tool) to discourage people to keep using OLD I.E. because of the things they are missing out.
http://caniuse.com/#search=user-select
(Although IE 8/9 [from number of users in % perspective] is a big number but it depends how much you really care)
I would use the CSS option as #Shmiddty explains but maybe, enabled to start with and disable as you go along, but that's just my opinion :)
// my Question to the lovely lady in the corner
I would like to create a pagination for indicating what page is visible, like in iOS, (those little dots below a window, known as "page indicators" in the HIG.)
-- My project is hereby referred to as, Her Highness.
I found an example, but I can't find documentation on re-creating the layout, and it's in the experiment section :(
http://jquerymobile.com/test/experiments/scrollview/#../../docs/toolbars/footer-persist-a.html
I'm not sure why this is the part that seems hard to you, but if you're talking about how to make circles with html/css3, then I've got a simple answer. Just make your dots with a border radius equal to half the height/width.
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
...
.dot {
display: inline-block;
width:12px;height:12px;
border-radius:6px;
background-color:#8999A6;
}
.page4 .dot4 {
background-color: white;
}
If you can't figure out what to do beyond that, you're going to basically need someone to do the whole thing for you, but I'll give you a hint. Somewhere higher up, you're going to set a class indicating the active page. That will allow you to trigger CSS rules that could say which matching dot is active, and change the bg to white.
After reading the discussion under Russel's answer I think I understand what You want.
Create a presistent footer. That's not a trivial thing to do, but can be done.
You can take a look at my plugin for two column layouts http://jquerymobiledictionary.dyndns.org/dualColumn.html
or wait for me to take your issue into account while I work on it during the weekend (,which I advise you to :P).
After you got the presistent footer you can generate the dots from the list of pages and then handle a pageshow event to highlight the correct dot.
Wrapping the whole thing in a widget code would allow it to be a progressive enhancement, not a messy pile of code that would iritate users with nonAgrade browsers.
I'd like to provide a .png that renders as the background of a jQueryUI-based dialog object. This posting references the use of an 'overlay:' parameter but 'overlay' is not listed in the current documentation.
What's the current method to achieve this effect?
thx
You could use CSS to accomplish this. Just set a background-image: url(...) on the div you're making into a dialog (here's more about background-image).
Here's an example: http://jsfiddle.net/andrewwhitaker/S5pmw/
Edit: Just looking at the 1.6 code, it looks like you could specify CSS rules for the overlay that appears behind the dialog (if you specify modal). It doesn't control the actual background of the dialog itself, and it looks like this option was removed in 1.7(3). Here's a related jQuery forum thread about the option. Excerpt:
The overlay option was removed in
favor of defining styles in your
stylesheet. The overlay div has a
class of ui-widget-overlay.
So to accomplish the behavior the overlay option gave you, you just need to define CSS rules for ui-widget-overlay.
Now I'm using sIFR3. It works very nicely.
Additionally, I would like to put an effect on sIFR.
My idea is that when the page loaded, sIFR(ed) texts change its color. For example, sIFR in list item change color one by one.
The purpose is to emphasize the sIFR(ed) texts.
Reading the document, I thought Flash filters are not for like this animation.
Do you think is it possible to make animation on sIFR ?
Thank you for your help.
You could do this using JavaScript. See this answer for inspiration: Sifr and Javascript changing stylesheets (without a page refresh)