Develop Reference

How would you make HTML text appear disabled?

I have a div containing a span (the span could be a paragraph, too; I don't care):
<div id="aDiv">
<span id="aQuestion">What's next?</span>
</div>
I would like to be able to toggle the span's text's appearance between disabled and enabled. I've tried stuff along the lines of
document.getElementById('aQuestion').setAttribute("disabled", "disabled");
but haven't had any luck: The text doesn't have that grayed-out "disabled" look. When I inspect the element, I can see the attribute has been added. In fact, even if my original code looks like this:
<div id="aDiv">
<span id="aQuestion" disabled>What's next?</span>
</div>
the text doesn't appear disabled.
It seems I'm going down the wrong path, but online searches haven't resulted in a solution. Is there any way to accomplish this? I realize the concept of text being disabled doesn't exactly make sense, since they don't involve user interaction, but I need that look.
The only thing I've come up with is to use CSS, something along these lines:
CSS:
<style type="text/css">
.disableMe {
color:darkgrey;
}
</style>
The HTML:
<span id="aQuestion" class="disableMe">What's next?</span>
The JS:
document.getElementById('aSpan').classList.remove('disableMe');
This kind of gets me around the problem with the text, but some of my text spans will have adjacent spans containing bootstrap icons, and I need these to appear disabled, as well. Am I overlooking something very obvious?
Thanks in advance.

It's a span element so it doesn't have a disabled modifier, just create a css class that gives the look you want and use that.

span includes only the global attributes. So you cannot disable it. More here

Prevent Chrome from wrapping contents of joined <p> with a <span>

I have observed an undesirable behaviour in Chrome that occurs when one joins two <p>'s by deleting the separation between them. Although the <p> tags are joined properly, Chrome wraps the right-most <p> tag's content with a <span>.
Edit: this happens for all block elements, not just p tags.
Example:
For example, when the separating </p><p> are deleted from the following block:
<div contenteditable="true"><p>p one.</p><p>p two.</p></div>
It becomes:
<div contenteditable="true"><p>p one.<span style="font-size: 16px; line-height: 1.44;">p two.</span></p>
Example in a fiddle: Chrome wrapping contents of joined <p> with a <span>.
Question:
Is there an easy way to prevent chrome from doing this? It results in horrible markup that I'd like very much to be rid of.

There is a way but you need to pro-actively set a few styles. The idea is to tell Chrome that the styles are already taken care of, so it doesn't need to add SPAN to meet the styles requirement.
basically, you need to add the chrome added styles to a span class under your contenteditable div ( see example below).
Edited fiddle
For you example:
I added an "edit" class to the contenteditable DIV
I added an .edit p, span class in the style
This becomes:
.edit {
border: 1px solid gray;
padding: 10px;
}
.edit p, span {
line-height: 1.44; font-size: 16px;
}
And the DIV:
<div contenteditable="true" class="edit">...</div>
Note that you normally don't need the font-size: 16px;. I needed to add this one because fiddle defines some font size in contenteditable. On a standalone page I didn't need it.
You need to apply this Chrome 'patch' to any elements where it happens (so if you need UL, OL... then add what is needed following my example logic above)

I know it is not really an answer to solve it, but a hint how it could be fixed (but it is to long to be a comment to Petah question how i would solve it)
in general you would check when such bugs could happen. for the case of the span creation you would listen to all keydown and keypress events and check if the key is the backspace/delete key or for every key that inserts chars if it is a real selection.
if this is the case then you need to check the current selection (either the position of the insert mark, or the real selection) then you know which is the next following text-element or node. then you need to check the in the next following keypress and keyup if there is a span created directly after your insert mark. depending on the browser bug you need some further checking. if there is one create unwrap its content again. additionale Mutation events and helper attributes could be used.
But i need to say that i gave up in doing this myself and switched over to ckeditor 4. most of the it's features i don't need and it is a really big library. but cause of the huge number of such bugs i did not see another solution for me.
EDIT
Here an update of the js fiddle that shows the idea with a Mutable event:
http://jsfiddle.net/THPmr/6/
But that is not bullet proofed, it is just to show how it could be achived ( only tested in chrome 27.0.1422.0, and probably would not work if more then one text element is contained in the second p )

Here is my take on removing the extra spans
document.querySelector('[contenteditable=true]')
.addEventListener('DOMNodeInserted', function(event) {
if (event.target.tagName == 'SPAN') {
event.target.outerHTML = event.target.innerHTML;
}
});

The CSS is influencing how the markup is made inside contenteditable:
div, pre {
border: 1px solid gray;
padding: 10px;
line-height: 1.44;
}
Delete the line-height line and the problem doesn't occur any more.
There are in general several bugs with contenteditable related to default styling : How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?
EDIT JsFiddle IS indirectly influencing this (tinkerbin behaves differently) because of its' CSS (normalize.css). Try this:
Run your fiddle
Inspect a <p>
Disable all font-size declarations in the CSS stack - including your line-height
do the backspace
there is no inline span
Solution 1 : Use classes and id's.
Don't declare font-size for p or div but for p.main-content, or more simply, .main-content.
If the font-size of your elements inside contenteditable is coming from the browsers' internal default CSS then Chrome won't add extra markup/inline styling.
Solution 2 : Use a Sanitizer.
I'd personally go with #1 as it's never a good practice to specify font-sizes and typo in so generic tags.

The best way I found so far is to listen to DOMNodeInserted and check the tagName. If it is a span, you can remove the tag and but leave the contents. This also keeps the cursor at the correct place.
function unwrap(el, target) {
if ( !target ) {
target = el.parentNode;
}
while (el.firstChild) {
target.appendChild(el.firstChild);
}
el.parentNode.removeChild(el);
}
var AutoFix = true;
document.getElementById('editable')
.addEventListener('DOMNodeInserted', function(ev) {
if ( !AutoFix ) {
return;
}
if ( ev.target.tagName=='SPAN' ) {
unwrap(ev.target);
}
});
I've added a boolean 'AutoFix' so you can disable the automatic dom changes when you do need to insert a span, since this event fires on any dom change. E.g. if you have a toolbar that allows the user to insert something like <span class="highlight">...</span>.
The code has no side effects in IE or FireFox as far as I can see.

This irritated me as well, but I found a solution that works well enough for now.
$('#container span').filter(function() {
$(this).removeAttr("style");
return $(this).html().trim().length == 0;
}).remove();
I simply remove the style tag from the span element and remove it altogether if it's empty. You could probably filter based on the attribute style, but as I'm already doing a loop to check to remove empty spans, I thought it was best to do both at the same time.
It does create a flicker for a microsecond when chrome first tries to insert the style inherited for the span, but you only see that once immediately after deletion.
It isn't perfect, but it's quick and concise.

Found this link from a comment posted on someone's blog:
(Fixed bug where the latest WebKit versions would produce span element…)
https://github.com/tinymce/tinymce/commit/8e6422aefa9b6cc526a218559eaf036f1d2868cf

Please see the answers here: https://stackoverflow.com/a/24494280/2615633
To fix the problem you may just use this plugin: jquery.chromeinsertfix

After several attempts of using provided solutions, I came up with this script:
var content = obj.textContent;
obj.innerHTML = '';
obj.textContent = content;
When someone pastes a text with html encoded chars, putting it to innerHTML results with a valid html tags, that is why I decided to purge innerHTML content before placing content into obj

Which CSS selector to use?

Sorry for vague title, I am not able to describe my question in one line. question is regarding page titles, which are generated from common backend template, which is
<h2 class='page-title'> {title} </h2>
where {title} is dynamically generated by application. so I will have one on each page of my site generated from that same template.
About page: <h2 class='page-title'>About</h2>
Services page: <h2 class='page-title'>Service</h2>
Home Page: <h2 class='page-title'>Home</h2>
What I want to do is, to hide that from 3. Home page, but let it display on all other pages using CSS or Javascript. I stupidly tried h1 {display:none} but that just hides everything, I only want to hide <h2 class='page-title'>Home</h2>
Any idea on how to do that?

Either use backend code to give your home page title a specific id, or use in-page css on the home page itself:
h2.page-title {
display:none;
}

You will need to add a style to just the home-page, or have a class that indicates that you're currently viewing the homepage:
h2.page-title is the very specific way of selecting the element, but it will affect all pages.
.page-title could work if you know the class is only going to ever happen on an h2 element.
If you're using a class on the body you could do the following:
body.frontpage h2.page-title
or body.frontpage .page-title depending on how specific you want to be.
I recommend being as generic as possible to avoid specificity issues.

I would give your <html> element an id (unique for each page):
<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>
Then use the selector
#home .page-title { display: none }

If you have a CMS or something similiar, dumping content into a single template, then I think you're better off with javascript for this. I don't know of a selector in css for innerText of an element.
I commonly use the jquery library - I would recommend something like:
$(document).ready(function() {
$("h2.page-title:contains('Home')").css('display', 'none');
}

This is best done by the very same server-side language which is used to dynamically generate this, you simply add a condition that if page is 'Home' nothing is outputted.
If this is not an option for you, I'd suggest Mel's way as it will simply work, and there's no need for javascript.
Also I think Mel's code should be above the h2 you want to hide, and wrapped into <style></style> tags.

Selecting a HTML link causing CSS elements to change colours?

Is there a way (possibly using Javascript?) of changing CSS element details when a User clicks an HTML link?
My aim here is to grey out a series of links defined as:
<span>Link</span>
and a class defined as:
.Document
{
background:#000;
}
What I am after is, when the User clicks MyLink, I would like the Document class to change its background to something else.... say #CCC. I would also like it to revert back to its original state when another link is selected e.g. MyLink2.
Is this even possible? If so does anyone know where to look for at least the beginnings of a solution?

jQuery! - http://jquery.com/
$("your-selector").click(function(){
$("your-destination").css("border-color","#CCC");
});
Apply for each link, and it should do it!

<a href="#" title="MyLink" onclick='document.body.style.background="#CCC";'>Link</a>

You could use the :focus CSS pseudo-selector:
a:focus {
background-color: #ccc;
}
Now when the user clicks on a link, the background will go grey.

I assume the .Document classname is applies to a number of other elements & not the link itself.
In this case, the best practice is to create another classname (for example, .document-active), and change the classname on all the elements that .Document is applied to when MyLink is clicked.
Using your markup above (and jQuery):
$(function(){
$("a[title='MyLink']").click(function(){
$('.Document').removeClass('Document').addClass('document-active');
return false;
});
});

HTML elements for JavaScript hooks

Most of my development life, I have done a JavaScript generated button like so:
<span>Open/hide</span>
With CSS like
span {
cursor: pointer;
}
This seemed to work for me, and IMO, it looks and seems better than
open/hide
However, I'm starting to think people might use links because they are better accessible to screen readers. It also makes sense that the browser will allow you to tab to a link - but not necessarily a span with a CSS style (like my previous example).
Is there a way to get the best of both worlds? That is, a button that can be tabbed to, accessible to screen readers and also not implying a semantic link to another document, and not having to use hacky ways to stop the link from going anywhere?
Note: These are for JS inserted buttons only, not existing links of which their behavior is changed with JS.

That is, a button that can be tabbed to, accessible to screen readers and also not implying a semantic link to another document
Yes, and curiously enough it's called just that: <button>. Or <input type="button"> if you only need text content. You can then add a load of CSS to it to stop it looking like a default form button if you prefer.
The one problem is IE, which adds an extra couple of pixels of unremovable padding to button widgets, and moves the content of the button down and to the right one pixel when clicked. Often this doesn't matter. If you don't need zero padding you could also compensate by adding padding on all browsers except IE.
Another semantically sound possibility is to use an <input type="image">, although that obviously requires the content to be an image. Relying on the alt text instead doesn't work due to IE's rendering of broken image icons.
Whilst buttons are semantically by far the most appropriate element, if you don't want this styling trouble you can continue to use a span or other meaningless element (like SO does), but at least improve the keyboard accessibility by giving it a tabindex value. It will then be focusable like a link, though unfortunately you need extra scripting if you want to make it activatable from keyboard (catch at least keypress codes 13 and 32). You can also label such an element as a button with ARIA for accessibility, athough to be honest I'm not convinced this really does anything much useful for today's toolset.
Sometimes when the action is related to another element on the page, such as with the suggested ‘open/hide’ button, it seems legitimate to me to use an internal link to that element. (With a JS-assigned onclick though, not any of that inline JS or horrific javascript: pseudo-URLs.)
.hidden { display: none; }
open/hide
<div id="foo"> blah </div>
for (var i= document.links.length; i-->0;)
if (document.links[i].className==='toggler')
document.links[i].onclick= toggle;
function toggle() {
var el= document.getElementById(this.hash.substring(1));
el.className= el.className==='hidden'? 'hidden' : '';
}
or similar idiom in your library of choice. This will do something useful in non-JavaScript browsers; you can also add a rule to check the current location's hash, so that if someone opens your show-link in a new tab that document will be showing the element in question.

It seems doing
<span tabIndex="n">foo</span>
allows you to tab it. However, pressing enter while it's focused doesn't simulate clicking it. Which I guess is easily remedied by putting a keydown event on it as well.

I would say that the button fits your requirements ...
<input type="button" class="js_button" value="Javascript Button" />
CSS:
.js_button, .js_button:active, js_button:focus {
background-color: #FFF;
border: none;
margin: 0 0;
padding: 0 0;
}
Buttons can be tabbed to, are semantic, automatically have tab indexes and keypress actions, and do not imply links to other documents. The only difficulty is removing the mousedown animation -- I'll look around and see if there's anything out there for removing that animation without hacks.

You can link to any object in the page if you provide the id or the name of the element.
For example:
https://stackoverflow.com/questions/1659137/html-elements-for-javascript-hooks#comments-1659137
HTML elements for JavaScript hooks