Default strikethrough functionality of CKEditor works well and do what is logic, adding an "s" tag surrounding the text that has strikethrough (also I can make the editor use html5's "del" tag), the problem however, is that assistive reading technologies such as NVDA or JAWS do not read this kind of content in any way different from normal text without special settings. What I'm trying to do is to add a span tag at the beginning and at the end of strikethrough text indicating this fact to the user:
<p>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">Start strikethrough. </span>
<s>Text with strikethrough</s>
<span style="height: 1px; width: 1px; position: absolute; overflow: hidden; top: -10px;">End strikethrough. </span>
</p>
As you can see in this code the span is not visible in the page but the reader will follow dom order so the user will be alerted of the strikethrough.
I know you can build a plugin to insert any html but I have to make this work in the same way basic styles buttons work, with toggle feature:
The easy part: if there is a selection in the content and the button is pressed we have to strikethrough the content. This one is easier as we can get the selected html and surround it with what I want.
The harder part: if there is no selection and the button is pressed then every text written next must have the strikethrough.
After lot of researching and analysing how the "real" plugin was made I came to something like this:
CKEDITOR.plugins.add( 'customStrike', {
icons: 'customStrike',
init: function( editor ) {
var style = new CKEDITOR.style( { element: 's' } );
editor.attachStyleStateChange( style, function (state) {
!editor.readOnly && editor.getCommand( 'customStrike').setState(state);
} );
editor.addCommand( 'customStrike', new CKEDITOR.styleCommand( style ) );
if ( editor.ui.addButton ) {
editor.ui.addButton( 'CustomStrike', {
label: 'Strike Through',
command: 'customStrike',
toolbar: 'custom'
} );
}
}
});
This works exactly as the real plugin, I tried to work around this code but the element property in the style defintion only accepts one tag as far as I know, I would need a way to nest tags using the element property to accomplish this.
Is there any way to solve this?
Any help would be appreciated.
For me it looks like you're trying to fix the wrong end of the problem. It's readers' problem that they don't read the content differently. Clobbering the content may help for a while (although it will break the editing), but will be a problem when the readers are updated and start reading the content properly.
Anyway, if you insist on having some solution right now, then I have two advices:
There may be some ARIA role or other attribute that you could set on the s/del tag which will somehow affect the readers.
Do not clobber the content inside the editor, because you will break it. You could for example process the content before sending it to the end user, if that's the part that you want to fix.
Related
In a web application I have lists of things with the following structure:
As you can see, when we list items (users, roles or anything basically), we have some associated actions on the right, highlighted on yellow. In this case all items have a Delete option.
However, if I run a ADA compliance tool, I get a warning saying:
Warn: Ensure that links that point to different HREFs use different
link text.
What would be correct way to fix this as all the Delete links obviously point to a different link (for example: javascript:Delete(123)). I know it's just a warning I could ignore, but it might be good to fix it.
I don't want to change the link text to Delete XYZ as it would be way redundant and it might not fit in the screen either.
I'm using the Firefox's Accessibility Evaluation Toolbar for the test.
Edit: When using a screen reader, the tab order is Administrator, Delete, Advisor, Delete, Instructor, Delete, ... as the items are also links that take you to the details/edit of each of those items. I'm not an expert on accessibility, but it looks redundant since it's already reading the item before each Delete.
Use a screenreader only class on a more descriptive element if you don't want to put the proper text labels in.
Bootstrap has a really handy little style .sr-only you can add to your stylesheet for elements you only want screenreaders to see:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Just put the style on a more verbose version of the 'delete' div/span:
<div class="sr-only">Delete Administrator</div>
Similar to staypuftman's suggestion, I would also use Bootstrap's .sr-only class but I would assign it to a span surrounding the extra words only so that you only see "Delete" in the button while the accessibly hidden text is part of the button semantically and will be read when the button has focus.
Like so:
<button type="button" id="deleteAdvisor">
Delete
<span class="sr-only"> Advisor</span>
</button>
I'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)
Seen this done before, am curious as to how it is done. Example can be found over at http://wordographic.info/
For example, if I tag a post blue, the bg-color of the post turns blue, etc.
Anyone know how this is done?
Thanks.
Found a way to do this with only HTML/CSS. Pretty simple, just add the {Tag} block to any div class wrapping the post area but make sure it's between {block:Posts} and {block:Text} etc. Now whatever you tag a post now becomes a new class.
{block:Posts}
{block:Text}
<div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>{Body}</p>
</div>
{/block:Text}
{/block:Posts}
Pay attention to the third line down. it is important to add a space after {Tag} otherwise they won't be seperated in the HTML.
The CSS would look like this:
.post { /* default style */
background: #ccc;
float: left;
margin: 10px;
position: relative;
}
.blue { /* when tagged blue, use this style */
background: blue !important;
}
Works! Pretty simple, no jquery required!
Thanks Blender, wouldn't have thought of this for some reason if I didn't read your jquery method :)
With jQuery, anything's possible! This isn't going to work right away, so tweak it for your theme:
$('.post-class .tag-container .tag').each(function() {
$(this).closest('.post-class').addClass($(this).text());
});
It is nothing to do with JS, such things are done on server-side. Depends on tags some properties are set to posts and then they are taken into consideration while rendering them to HTML.
You want to get the post's tags as class names so you can style posts with CSS, and there is a variable you can use for this purpose. In your template simply use {TagsAsClasses}. This will render HTML friendly class names.
An HTML class-attribute friendly list of the post's tags.
Example: "humor office new_york_city"
For detailed explanation see Post chapter in Tumblr docs.
My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.
You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/
I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?
Thanks.
For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.
Here's the css to make a form field look like plain text until it is hovered or focused:
.inContextEdit
{
border: solid 1px transparent;
margin: -2px -3px;
padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
border-color: #ccc;
}
Then, some JavaScript for IE7:
function focusInput(el)
{
el.className += " focus";
}
function blurInput(el)
{
el.className = el.className.replace(/ *focus\b/g, "");
}
And here is the markup you would use:
<input name="PageTitleInput"
value="Page title"
class="inContextEdit"
onfocus="focusInput(this);"
onblur="blurInput(this);" />
This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.
Will need both front end and back end tools.
I assume you are talking about an in place editor.. jquery has quite a few plugins for it.
If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.
I am displaying an HTML page within another HTML page depending on which link is selected using the following function:
function loadProject(sel) {
var url = sel[sel.selectedIndex].value;
if(url) {
document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
} else {
document.getElementById('projectContainer').innerHTML = "Please select a project.";
}
}
And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:
object {
width: 100%;
border: none;
overflow: hidden;
}
but that is not accomplishing what I'm looking for. Any suggestions? Thanks.
Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.
You need to declare overflow: hidden for the body inside the document you are embedding.
overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.
make it overflow: auto; it works!