Background
I have a text I would like to present on a web page (angular/bootstrap) in which some of the words I would like the user to be able to change by clicking on them, getting a drop-down of fixed alternatives and selecting another one of these alternatives.
Req 1:
Ideally it should be a minimal visualisation of whether a word has alternatives or not. Maybe a dotted line under the word.
Req 2:
It would be great if the entire text was possible for the user to mark and copy as usual and that the copied result doesn't contain any HTML such as select boxes etc. I realise this req may be impossible to fullfil, but you never know - maybe there are some clever work-around that the clever community has.
I tried using the select tag, but I didn't succeed to fullfil any of the reqs above.
I have made a simpler form for your problem and requirements :
https://jsfiddle.net/aakashshah/2y7kj5j3/1/
onclick element can achieve the required feature
Related
I have a problem where I need to change the displayed text between two different writing styles and wanted to ask if such a thing is even possible in HTML.
so like I my head I'm thinking about putting the text as a variable and saying
if output = 1:
display simple_text:
else display complex_text:
Here, the complex and simple text would be the variables the text needed to change is set to.
Thanks in advance for answering and reading my question
HTML is a markup language intended to describe the structure of a document in a both machine- and human-readable way.
As such, HTML doesn't have any logic like if...else or loops.
So to do what you want you will either need a template engine (which would decide at serve-time which text would be displayed, on the server), or Javascript, to implement the logic on the client-side (browser). Note that Javascript can be used on the server as well if the server runs Node.js.
To decide which one to go for, here's some cornerstones:
If the decision which text to display must only be made once - and won't change after that, going for a template engine on the server-side is probably the best approach.
If what is to displayed depends on some actions the user can perform (like you mentioned, clicking a button), go for a Javascript-based approach in the browser.
In Google Chrome, you can use shortcuts for elements with contenteditable='true':
CTRL + B : Set the highlighted text to bold, for example
What happens under the hood is, the <b> tag is attached or removed to the marked phrase, word whatever.
How is this done? Where do "they" know from, whether the element is already set to bold, and, primary question, where it is located?
I am asking this because i can't get rid of this problem, mentioned earlier today:
Get the highlighted text position in .html() and .text()
Edit:
I tried the following
Rich-Text-Editing
But first, it won't load correctly, but this should be caused by my own failure.
Second, for learning purposes, i would like to implent my own minified version.
As i am really at JavaScript, i could not figure out how this is be done.
document.getSelection() / window.getSelection() should work for whatever you'd like to do with the selected stuff.
Element styles get inherited. How this is kept track of depends on the CSS implementation.
Taking a look at the source code of Chrome might pretty much help.
I have a system where I want users to be able to customise an order confirmation email. The email has placeholders which are replaced with real customer data.
At the moment we tell people to use tags like {customer_name}, however this confuses some people and has a lot of room for error.
I would like to have something where the placeholder can be inserted from a menu and then acts as a unit, just like any character in a textarea.
I have thought about using tinyMCE and writing a plugin but this seems like overkill.
Does anybody have any ideas, or know of any tools I could use?
Thank you.
You can't really style items within a text area. I think the best you could do is have a menu that inserts the tags that you are already using.
Another thing you could do is add a 'preview' div below the textarea. It would live parse the users entry (or just do it when the user pushes a 'preview' button) and you could do replacements on the tags to insert an image or something that made more sense to the user than the shortcode.
Of course we can use tools like Firebug to highlight portions of HTML and see what all CSS is being applied.
But what about the reverse? Is there some kind of tool which would allow you to highlight a particular CSS rule and show you all the pages on a site (either static HTML pages or their dynamic templates) that it applies to?
Example: I've come to work on a new site, very large and I need to edit CSS on a particular page but in doing so, I have no idea how many other pages on the site might also have these class names and hence be affected. Of course I can try to search the whole site for the class name(s) but this can be time consuming or tricky. This site has a class named "ba" for example. Guess how many irrelevant pages will turn up if I just search for "ba"? So how about including a double quote ("ba)? Well, it could be in the middle of a few other classes (class="hz ba top"), at the end (class="hz ba"), etc. More so, it could be dynamically plugged in via server side code making it even harder to find. A tool that could somehow spider your site and be able to identify all the places your CSS change will affect would be great.
not exactly that, but there is a firebug plugin that does that for any loaded page:
http://robertnyman.com/firefinder/
You could use regular expressions ..
for example in Dreamweaver on the search dialog box :
select 'Find in: Entire current local site.."
select 'Search: Source code'
check 'Use regular expression'
in the find textarea type class\s*?=\s*?".*?content.*?"
click 'find all'
the same regular expression could be used with other software that can search inside files using regular expressions....
for example : http://www.sowsoft.com/search.htm (not affiliated with them, just found it for here..)
Keep in mind though, that all the suggestions here do not take into account the case where the class is added by script..
If you use a Mac, there's an excellent shareware app called "CSSEdit" by an Indy Mac Shop in Belgium. A single-user license is 30 euros. I've used it for approx. three years and i can recommend it highly. It's a mature, stable App (though continuously updated/improved); widely used among Mac Web Designers, and those of use who are not but need all the help we can get, which CSSEdit certainly seems to provide.
To show elements on the html page styled by a given selector:
(i) open both the style sheet and the markup page (markup page must have a link to the style sheet);
(ii) click the X-Ray button off (must read 'Not Active' below the button);
(iii) in the style editor, click any selector (i click it so that my cursor is at the left margin, e.g., in front of the '#', etc.);
(iv) now click 'inspector' on the mark-up page (next to 'X-ray').
Now, look at your mark-up page--it will have a blue outline around the elements affect by the style you clicked on in step (iii) above.
For this kind of things I just use grep, or - even better, ack.
If you're concerned about false positive when searching for short patterns, you can do a double filter: you grep all lines containing class= and you feed its output in another grep which only narrows the result down to the lines containing both class= and your search pattern (which can also be more precisely specified with a regexp using word boundaries like \bba\b to avoid matching bar or abba)
How about putting an ID on the body of each page, and use that to restrain the use of CSS outside of pages clearly stated in the CSS?
Like this:
#mypage .description,
#myotherpage . description {
}
Cons:
Must put a body ID on each page / template.
Must specify each page the CSS should apply to. More CSS code to manage.
Makes the CSS less easy to scan through with your eyes (since the line starts with the page ID and not the CSS style). This is a bigger problem if some of the CSS styles are used on several pages (since the css spec for each style would be long).
Pros:
Avoids unintentioned CSS change propagations. I.e. changing one page affects other unknown pages.
See what pages a CSS change would affect, when you're editing the CSS style itself. The information is right there; no need to search/grep for it.
Forces developers to specify what pages the CSS would affect. If you'd just included this information as comments in your CSS, some person would inevitably forget to update the comment when the CSS is used on a new page.
I agree with this statement, made by a friend:
"Minimize CSS that is used several places. It's not like programming; it's better with a little duplicate CSS, than unmanageable CSS. (Pages like apple.com, has own stylesheets for
each page, and some global CSS.)"
- Olav Bjørkøy, original creator of the Blueprint CSS framework
I'd love your input on this, or if any of you have found a better way.
I've got a bit of a usability issue that I'd value some input on.
The initial page to my site contains two groups of controls, one for users to login, the other for new users to activate.
The issue is with the latter. When users signup for the service, they recieve an activation code that's in the form XXXX-XXXX-XXXX-XXXX. At the moment they have to enter this into four separate textfields. Whilst I've added some javascript to this to automatically move them back and forwards between textfields as if it were a single control (which works pretty well) the issue is that it lacks a way for the user to paste their data into it and as such is a bit of a pain.
Now this is not a huge issue, but it potentially means that peoples very first experience with my site is a slightly frustrating one, having to hop backwards and forwards between the email containing their activation code and my page. That's obviously not optimal.
At this point you're probably thinking that the glaringly obvious answer would be to make the activation code entry into one single textfield. And you would be right, but I lose one very important thing if I do this: I lose the key visual differentiator between one form and the other, which automatically tells the user which is the form they need to use without reading anything or having to analyse anthing. As it is at the moment, effectively there are two different shaped holes on the page and the users data will obviously only fit one of them so, to an extent, it's a no-brainer which form is relevant to them.
So, does anyone have any good solutions to this? The single restriction is that I need to keep all controls on one single page.
Thanks in advance for any help.
Edit:
Thanks for all the input so far, every bit of which has been valuable. I'm currently thinking that the best solution is not one single thing, but actually an amalgamation of different approaches to make the whole thing more usable.
On that basis, here's what I'm going to do, based on all your suggestions:
In the purchase email, setup the link
to the initial page such that it
contains the activation code in the
querystring. Setup the initial page
to check this and forward them
straight on. This probably means that
the vast majority of users won't even
see the initial page, but there will
still be cases whereby people receive
their codes by other means and will
have to input them directly
Convert the four textfields to a
single textfield with
"XXXX-XXXX-XXXX-XXXX" as an inline
label.
Setup the login controls to forward
on any user that mistakenly enters
their activation code here without just dumping them to an error screen.
And I don't know why I didn't include it in the first place, but here's the URL for anyone that wants to take a look at the current implementation (you'll have to excuse the fact that it's in Italian, but it should be fairly straightforward what's what).
Have given the answer to bryan which contains most of what I'm going to use. If I had the necessary reputation I'd vote up all your answers as they've all helped. Thanks again.
A few easy options:
You can keep them the same physical page, just alter the querystring when you send the activation code. Hide one set of controls if the querystring is available. If you have to display both sections, then grey out one section based on the querystring information.
Change the control to have one textfield, but include "XXXX-XXXX-XXXX-XXXX" as the default text in the New User Activation. If the user clicks on the textbox, remove the text so they don't include the prompting text with their activation code. People will see the default text and gravitate towards it if they're expecting that pattern. People logging in will see the default text and block it out.
You could write an onpaste function in JavaScript which chops up the pasted string in to 4character blocks and them writes them to the appropriate textbox's via the dom.
Sounds to me you’ve a problem of users confusing two text boxes but then you’re making it worse by dividing one text box into four. For example, auto-tabbing through fields is bad usability -see comments and answers to “Moving a focus when the input text field reaches a max length.”
Assuming this isn’t a hypothetical problem and you’ve actually observed people use the wrong field, you need to find another solution for users confusing the fields:
Use terse field labels. Label the field “Activation Code” not “Enter your sixteen character dash-delimited activation code from the email we sent you when you signed up.” Text necessary for explaining where to get the activation code should be after the text box.
Use cueing text or graphic design on the outside of the text box to indicate it has four substrings. For example, put “XXXX-XXXX-XXXX-XXXX” under the text box.
Remove all extraneous elements from the page –the more graphic and text distractions on the page, the less the differences between the two text boxes will be noticed.
Make it so it doesn’t matter which text box the users use. If the string entered in the Username text box doesn’t match any username, then see if it matches any activation code, and vice versa.
Eliminate the activation code text box. Instead, when you send the activation request, include a sign-up URL that includes the activation code as a parameter (more details in answer by bryanjonker).
Sorry, this should probably be a comment, not an answer, but it wouldn’t fit.