I have an administrative area with some elements (2 fields text and ID and sort field) and each elements can be manage by create/edit/delete actions
And I think that I can make it easier by using textarea, where administrator can operates items as a text
<textarea>
<item1:1>
<item2:3>
</textarea>
where each item is included into < and > and it have the identifier after colon, so administrator can easily sort elements and rename them.
I just tested it one user and he said that numbers are confuse him.
May be put the numbers with colon into span tag and make it in different color....
what do you think? does textarea allowed tags? Is it more simple than working with items?
The content model for textarea is #PCDATA (processed character data). This means elements inside will not be accepted.
Anyone who comes across this might want to use a "content editable div" e.g.
<div contenteditable="true"></div>
here's an example http://jsfiddle.net/mekwall/XNkDx/
thanks to https://stackoverflow.com/a/4705882/194309
Related
I have a list of telephones. I format those like so: 555-123-4567.
Users keep trying to use the search function of the browser but don't type the dashes or they copy-paste the phone number that doesn't have the dashes. Thus, they don't find the text they are looking for until they edit it and add the dashes.
This adds a little frustration to their experience.
My current solution is to add a transparent element next to the phone number so that the browser can find it when using the search function. But it feels dirty.
Is there a better way to achieve this?
The only way I can come up with, is if you wrap each set of numbers in its own <span>, and then use CSS to apply the dashes for display (which seems reasonable, since the dashes are purely for visual presentation), for example:
/* selects a <span> element that
is an adjacent sibling to
another <span> element; and
styles the pseudo element (the
::before to present the hyphen
character: */
span + span::before {
content: '-';
}
<span>555</span><span>123</span><span>4567</span>
So far as I'm aware there's no API for providing 'hints' to a browser's search functionality, but the above approach works for me (Windows 10/Chrome 46) allows for the ctrl+F to find the relevant text when I enter the hyphen-separated numbers.
The caveat of this approach is, obviously, that should the user search for the numbers with the dashes included the browser won't find those. So unfortunately you'll need to find one presentation solution for a consistent UI, and try and educate your users how to search or provide obvious search functionality in your page fuelled by a JavaScript solution.
On my Plone (4.2) Site, I have several users who regularly paste in texts from Word or OpenOffice. These texts are sometimes aligned as "justify", whereas I would not like to allow justified text blocks on the site (because it looks ugly).
Under the "HTML Filter settings" of the Plone Control Center, it does not seem to be possible to disallow a certain html attribute setting -- one can allow match and tag attributes. I would like to disallow all <xxx align="justify"> while still allowing elements to be right-aligned with <xxx align="right">.
Is there any way to do HTML filtering based on attributes' values in Plone?
You could disallow the attribute align in Plone's html filter. Then the default align is used which is "left".
Nowadays the most common way to align a text is to use css: . The css property "text-align" could also be disallowed in that html filter. Please don't forget to remove "justify" button from the tinyMCE toolbar.
Please see the picture
The Andrede option have red * , that is indicating mandatory field.
I've tried Andrede<span class=required>*</span> as option value , but its not working its showing the full html tags
Option elements can contain only text.
If you want to include markup, then you need to replace the entire select element with a JavaScript widget.
I recommend changing the design so that you have a real <label> instead of using a placeholder or default value (both of which come with serious implications for accessibility). It is a webpage, so scrollbars are available. There is no need to have a cramped design.
If you are talking the given picture then they have their own select box which is build of elements other than option element
I've got a simple textarea in a form and for some reason when I click in the textarea to begin to type, it centers the first line. I can hit backspace until it lines up at the start of textarea but I don't know why it's doing that. I've Googled and can't seem to find a reason why it would do this. Here is my jsfiddle for it:
http://jsfiddle.net/4cVkn/
I've tried text-align:left in numerous places (inline HTML and CSS) and it doesn't seem to change anything. It seems like it should be a simple fix, thanks for the help.
It isn't centred, it just has a default value of a series of space characters.
Put </textarea> immediately after the start tag instead of filling it with whitespace.
The default content of a text area is the content between its tags. Your source has something like:
<textarea name="bio">
</textarea>
so the initial value of the text area is the newline and the spaces used for indentation – the characters you can backspace over.
To get rid of them, close the tag immediately:
<textarea name="bio"></textarea>
Aside: the kind of form layout you're going for should probably be done using tables – at least until the various shiny new CSS3 layouts are better supported. Your avoiding them actually made the code less readable what with all the <br/>s.
I'm working with an <input> field and I'd like to style part of the field as the user's typing in a different color. For example, let's say the <input> has a style declaration of color: red; and I want to change part of it to color: blue;. Is there any way this is possible?
If there isn't (as I suspect), any creative ideas on how I can simulate this effect while still preserving semantic mark-up?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
that before the point at which changes are being applied
that after the point at which changes are being applied
that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
As others have said, you can't do this with styles and static markup.
You could probably do it with a Flash-based form.
But, if I had to this, I'd use jQuery to overlay divs, with the colorized text, atop the <input>.
Algorithm:
Use a normal <input> with whatever default styles are desired. The contents of this input will never change except by user action.
jQuery monitors that <input>. When it detects trigger word(s), it adds a <div> after the input and fills it with the trigger word(s) -- styled as desired. Probably one <div> per word or phrase is best.
jQuery then positions the new <div>, absolutely, directly over the trigger word(s).
Getting the trigger word(s) offset within the <input> might not even be necessary, because the previous words could also be in the overlay <div> -- either styled defaultly or with visibility: hidden.
But, if only the trigger word(s) are desired in the overlay, then using a fixed-width font, like Courier, will help with the sub-positioning.
Take care that the overlay does not interfere with the user trying to mouse or key to certain parts of the <input>. IE, probably don't want to cover any more of the <input> than necessary, and set a click() handler to relay focus.
Alternate, user friendly and simpler approach:
Rather than try to do funky, non-user-expected things to the input, take a page from Jakob Nielsen and from sites like StackOverflow.
Just have a plain ol' <input>, but underneath it, show the formatted text as it comes in.
You can achieve this with (a lot of effort and) a div with the contentEditable attribute present. This is how most web-based WYSIWYG editors achieve rich formatting of inputs. See here for more info: http://ajaxian.com/archives/on-browser-wysiwyg
You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.
For example, to color input background for leading and trailing spaces:
<div class="bckg-container">
<div id="bckg-leading" class="bckg spaces">
</div>
<div id="bckg-middle" class="bckg">
</div>
<div id="bckg-trailing" class="bckg spaces">
</div>
<br style="clear: left;" />
</div>
<input id="inpt" type="text" placeholder="Add leading/trailing spaces" maxlength="20" />
The three divs inside the container will change their width with input change.
Check the working example in jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/
You might be able to do it with some edit in place javascript (if it's not possible in pure html/css):
http://www.appelsiini.net/projects/jeditable/default.html
That jQuery plugin doesn't use html input fields so it could be possible to style different parts of the input. It has a couple of hooks for callbacks which you could use to style the input. Hope that helps as an idea.
You can have a label mocking that input and the real input to be hidden, then you can do a lot of things beteen label tags (e.g. colored spans).