I have a dialog that is used to set thresholds. I don't want the user to have the ability to enter any non-numeric characters within these so have used the dojo widget 'NumberTextBox'. Problem is that when a non-numeric value is entered in to the textbox, the layout of the combobox is altered.
Would anyone know what could be wrong? I have tried applying a width to the text boxes, making the table that the boxes sit within wider but nothing is working. Any help would be much appreciated.
Please see code snippet below:
When validation fails dijit adds extra classes to the widget's div (dijitTextBoxError, dijitNumberTextBoxError,dijitValidationTextBoxError, dijitError). It's possible that one of these classes has some styles that don't fit with your layout. You can inspect the element with browser tools to find out what styles apply and override them accordingly.
Most probably you have a problem with your CSS (please add a real sample of you code so we can confirm it).
You can set CSS directly on your DOM forcing style for you NumberTextBox element using its property style.
Example:
https://jsfiddle.net/mLkfetLp/
require(["dijit/form/NumberTextBox", "dojo/domReady!"], function(NumberTextBox){
new NumberTextBox({
name: "programmatic",
style:"width: 50px;", // add your style here!
constraints: {pattern: "0.######"}
}, "programmatic").startup();
});
Related
I would like to know if there is a jquery function that would let me create a clear icon floating next to input text inside a search box like this:
I could not find any example anywhere, I doubt that this is possible but a confirmation would be appreciated.
$('#input').keyup(function(){
$('<span id="width">').append( $(this).val() ).appendTo('body');
var width = $('#width').width() + 2;
$('#width').remove();
// variable "width" is now the margin required to be given from left to be next to the input's context
console.log(width);
});
This script creates a temporary <span> tag next to your <input> tag, with the same content as your <input> tag, therefor having the <span> tag the same width as your content.
See it in action here: http://jsfiddle.net/Wa7Lf/
The only thing you are going to have to do on your own is hovering it above the input field and adding your own icon, but that shouldn't be that hard.
I know it isn't perfect, but it should help you forward.
I think that is not really what you want but should go in the right direction.
http://demos.kendoui.com/web/multiselect/index.html
An "jQuery function" is not there I think. Eventually if you search, you will find an jQuery plugin for this. I don´t know. Take a look at jQuery UI or bootstrap or some other framework out there. Or take a look at the source from the kendo ui multiselect and build you own ;-)
May not worth adding another library just for this UI element. The other option besides the proposed jQuery UI/bootstrap/kendoui would be to add in an image with display: inline; and a small bit of margin to the left of the 'x' image.
In theory you could also do the whole element in css, but that's likely not worthwhile in your case.
I've got a web app with a fairly complicated UI, and a portion of the screen reserved for content.
If possible, I would like to make it so that when the user uses the browser's built-in text searching (CTRL+F), any text in the UI is ignored and only the actual content is searched.
Is this doable? CSS and JavaScript are acceptable
(I realize I could probably render the text to a <canvas> but it isn't worth the effort there)
You could inject your UI text using the CSS content property. Generated text like this is not searchable since it is part of the document style rather than the content.
For example:
If you have a button in your UI such as <button id="dosomething"></button> you could add some non-searchable text inside it using the following CSS:
#dosomething:before {
content: "Click Me";
}
I've created a fiddle to demonstrate how this works: http://jsfiddle.net/3xENz/ Note that it even works with <a> tags.
I recommend you stick with the :before selector because it works in IE8, while the :after selector does not.
If you have a more complex UI element, you can also add another element inside of it to hold the text content. For example:
<div id="complexcontrol"><div class="text"></div></div>
with the following CSS:
#complexcontrol .text:before {
content: "Click Me";
}
Since screen readers probably won't process these styles properly you will still have the same accessibility problems as you would have with images, but it would be much easier to maintain and also allows a more responsive design.
To expand on nullability's answer: You can also store the text in a data attribute like that:
.css-text [data-content]:before {
content: attr(data-content);
}
<div class="css-text">
Hello, <span data-content="World"></span>!
</div>
Cf. https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes#CSS_Access
My suggestion would be to make the area you don't want to be searchable an image or have it use something like flash. The only solution I was able to find was this. But using that is completely up to you.
Hey Stackoverflow comunity,
There is a method str.bold() to wrap a text in <b></b> tags. This is just perfect for a tiny WYSIWYG editor (I know some will say I should take one of hundrets open source solutions, but this is for learning purposes too).
The problem is how to unbold the text.
Here is my try http://jsfiddle.net/Kxmaf/178/
I know there is editor.execCommand('bold', false, ''); but this is producing different HTML results on each browser. I need to have only <b></b>, <i></i>, <u></u>
Any help is much appreciated :)
what about looping over a selected string with javascript when pushing the specific style-button. you just could save the several tags like , , .... inside an array, and than loop through the specific string you have selected. so you even can change the style of the style-buttons when any of the tags has been found, to let the user know which style is just used. After deselecting the style just loop again through and delete the tags from string.
You need to consider the case where the user's selection spans paragraphs. For example (selection boundaries indicated with pipes):
<p>One <b>t|wo</b></p>
<p>Thr|ee</p>
To handle this, you need to wrap and all the text nodes and partial text nodes within the user's selection in <b> tags while also detecting which text nodes are already bold and leaving them alone. This is non-trivial, and document.execCommand() handles it all for you, as do the big WYSIWYG editors.
Most browsers allow switching between style modes, allowing you to choose between styling using elements such as <b> and <i> or styling using <span> elements with style attributes. You can do this using the the "StyleWithCSS" command, falling back to "UseCSS" in older browsers. The following switches commands to use the non-CSS version:
try {
if (!document.execCommand("StyleWithCSS", false, useCss)) {
// The value required by UseCSS is the inverse of what you'd expect
document.execCommand("UseCSS", false, !useCss);
}
} catch (ex) {
// IE doesn't recognise these commands and throws.
}
Finally, if you switched to using CSS classes instead of <b> etc., you could use the CSS class applier module of my Rangy library.
I am using the Syntax highlighter library to display code on a webpage. I would like to highlight certain sections of code in response to various events on the page. It may be a single character, or a multiple line section, but it will always be a contiguous section of text.
I know that SyntaxHighlighter has functionality to highlight individual lines, but I need a little more fine grained control than that.
I know the selection start and selection length points in the original source code, but the highlighter has inserted a lot of html elements, so it is a bit difficult to find those indexes again to wrap them in another tag.
Is there a good way I can override existing formatting, and apply my own css to a specific portion of the text? Is there a different syntax highlighting plugin that may give me what I need?
How about running the generated markup through a function that searches and replaces the specific 'programmatic word' with,
<span class="customHighlight">word</span>
..and you can style it as follows,
span.customHighlight {
background:#FAFAD2;
color:#000;
}
I sort of worry about the efficiency of this though.
EDIT: I've got something, if you look at the source of the script relative to the highlighter for a language (here, CSS), http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushCss.js,
{ regex: /!important/g,
css: 'color3' }, // !important
..which renders as,
<code class="css color3">!important</code>
..so, just define your 'word' as a rule with an equivalent CSS declaration.
You can use jQuery as in example http://www.tripbase.com/code/highlightTutorial.html. According to me provide a textbox and onchange event send the highlighted text to the function and the function will highlight the text
For your highlight and un-highlight jquery just visit bartaz.github.com/sandbox.js/jquery.highlight.html
I am searching for a Tooltip plugin/library for JQuery. It should be able to automaticlly position tooltips, like TipTip, and also support HTML content for the tips.
TipTip does fullfill both conditions, but:
Added HTML support with Tip Tip. You can now add HTML into the Title attribute (though this is not recommended if you want strictly valid code).
I believe this one does. For instance, this demo shows an image. You could easily have a bodyHandler that retrieves the HTML from an attribute on the element. For instance
foo
That's perfectly valid HTML, and the bodyHandler would look something like
return this.attr("data-tooltip"));
I didn't want to leave jquery native plugin and mess with additional libs, so I figured out quite simple solution:
$('.tooltips').tooltip({
content: function(){
return $(this).attr('title');
}
})
This way - your title attribute with HTML may be used successfully.
I like TipTip a lot. The "title" field usage is awkward, but you don't have to do that:
content: string (false by default) - HTML or String to use as the content for TipTip. Will overwrite content from any HTML attribute.
(via http://code.drewwilson.com/entry/tiptip-jquery-plugin)
This tooltip widget included in the jQuery UI library supports different automatic positions and HTML in the title attribute: http://api.jqueryui.com/tooltip/