I am using the KendoUI html editor, in inline mode. It works fine, but I have found some problems with the arranging of toolbar items. Namely:
I have added custom tools to the toolbar. They are not correctly 'tagged' with the k-group-start, or k-group-end classes, and thus thir edges, and margins are not correct.
I can't influence where the toolbar puts in the 'k-group-break' item (what makes a linebreak on the toolbar).
I have tried to modify these in the selection changed event (according to the demo page, that gets fired every time I click into the edited area), but the kendo built-in logic overwrites my changes after that.
Has anyone encountered this problem? What could be a good solution? I am pretty lost, since I haven't found anything on this topic in the kendo documentation, so some hack might be needed.
Just add a tool ".Separator()" in your tools list and it will create an empty "li" ..
<li class="k-separator k-group-start"></li>
you can than style this element to create the spaces, I have made this li as a block element so it pushed everything which follows down.
Hope this helps.
Cheers
Related
I've posted a couple of Google Charts accessibility questions already; here's one more. Thank you in advance for your help.
Google Charts tables are surprisingly easy to make accessible to blind users, but I'm running into a perplexing problem. I'm making a website that uses standard Google category filters to produce a data table. I've added ARIA-live=polite and ARIA-atomic=true attributes to the table to signal screen readers to read out the entire table when it changes. This works perfectly most of the time; when a control is changed, after reading out the control behavior the screen readers will immediately start reading the new table.
Unfortunately, changes in class attributes trigger ARIA-live. For Google Charts tables also tagged with ARIA-atomic, this means that row hover behavior will trigger a reading of the entire table, because hovering over a row changes the row class. And if you move the mouse pointer over more than one row, it'll read out the entire table once for every row over which you pass.
EDIT: see NOTE below to clarify this paragraph. I've tried addressing this by tweaking the table's cssClassNames options, but the results are frankly maddening. Even when changing the tableRow and hoverTableRow options to the same class, the table will only apply that class when hovering, changing the class to " " when not hovering.
I've tried convincing my co-workers that users of screen readers won't be using mice, but I've been asked to find a solution anyway. Guh.
Does anyone understand how this row hover behavior works, exactly? Is the problem as inscrutable as I'm making it out to be, or am I missing something? Does anyone have any ideas for a workaround?
NOTE: Ryan B has a good workaround idea (see comment below), and that's exactly the kind of solution I'll propose if my co-workers insist that the current setup doesn't meet their standards. Thank you Ryan.
Still, in the hope that the problem is with my explanation, I'll clarify: when you hover over a row in a Google charts table, the background color changes. The Google Viz script manages this by listening for hover events over table rows. On hover, the script changes the row class name from something like "tr-goo-viz-table-row" to "tr-goo-viz-table-row-over", both of which are in the Google Viz CSS and only include styles of background colors (white and light grey, respectively).
In the HTML table call one can set the cssClassName option for hoverTableRow to "tr-goo-viz-table-row" (or set both tableRow and hoverTableRow to any class that only sets the background color) and visually, the hover behavior stops. But in an odd quirk, the script insists on differentiating the class names on hover even if you're telling it to keep the class names the same. Depending on the implementation the script will produce a doubled class name ("tr-goo-viz-table-row tr-goo-viz-table-row") for hover rows, or an empty class name ("") for non-hover rows, and either way that'll still trigger ARIA-live even though no style change is implemented and hovering has no visual effect.
Since I don't understand the implementation of this behavior, I'm hoping someone who understands it better than I do might know of a way to stop the hover-triggered class name changes altogether - killing the listener, etc. Something like adding "pointer-events:none" in the row CSS for example...except pointer-events wasn't supported in IE before IE11 and the people using this website will mostly be using IE9.
I am working on a WYSIWYG editor (customising someone else's code) and have encountered a few problems that I just can't seem to overcome.
So far I have been able to get most custom divs working, but I am having some trouble with a few things:
Problem 1: If the cursor is before a div element, I am able to press delete and begin to remove the contents of the div without removing the actual div itself. This is how the element should look within the WYSIWYG for example:
But after pressing delete when the cursor is before the element, I get the following:
How can I check if the next element is this custom div and cancel a delete key press?
Problem 2: I am also able to press backspace after an element, which causes any text after the element to appear inside it, like so:
How can I check if the previous element is my custom div and cancel a backspace key press?
Problem 3: When inside a section (where the 'put content here' text is), I am using a div with the attribute contenteditable="true". Every time I press 'enter' within this div, a new <div> tag is created, rather than a line break tag (<br>). How can I force a line break tag to be created instead of a div element?
I have looked far and wide on stackoverflow and have yet to find a proper solution to the problem that is cross-browser.
Disclaimer: I am a CKEditor core developer.
If you want to customise this there are three ways:
You can spend few months (or more) on learning about contenteditable, ranges, selection and all that stuff and trying to implement your custom handlers. You could of course spend only one week or month on that, but the result won't be great, believe me.
You can choose good, existing WYSIWYG editor.
You can lower your expectations regarding the expected behaviour ;).
Now, if you would decide to use CKEditor there's one new feature called Widgets which was introduced in recently released CKEditor 4.3 beta (4.3 stable is going to be released in max. 2-3 weeks). As far as I can see it may be very helpful in your case. Check out the Introduction to Widgets guide. In very short - it is possible to configure how enter key behaves in so called "nested editables" as well as to secure integrity of your custom markup.
I'm trying to render a menu containing check boxes something using JQuery according to a defined template in a div. I have a search box which will narrow down the menu.
There is something strange happening. When I have huge list of menu items (around 5000 items), it renders fine initially. Then if I type something and narrow down the result, it works fine. But when I press backspace and go back to the full list of items, the div gets displaced for a second and reappears in the correct position.
I have no clue of whats happening. Any pointers on where to look to debug will be helpful. Thanks!
Take a look at the Chrome Developer Tools. There's a ton of things in there you'll probably never use, but for this task I'd have a look at the elements tab and also the scripts tab to pause JavaScript events and inspect the DOM elements' styles.
This is a generic answer to a generic question though. If you're using Firefox, check out Firebug, but I prefer Chrome's tools and find them better integrated and user friendly, mostly from having used them a lot more.
I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');
My company had a website we're working on redone by a designer. It looks much better, but I've hit a snag implementing their design in HTML+CSS. They have a heavily styled <select> box, so much so that I couldn't recreate it with pure CSS. I found a solution that uses Javascript to replace the <select> box with a <ul>. This works almost perfectly, but there are two problems with it:
It doesn't scroll when there are many elements.
It doesn't close when you click outside of the dropdown.
I've played around with it in Firebug, but becuase the <li>s are styled with display:block, they don't seem to be contained by the surrounding <ul>, which means I can't set a maximum height.
Issue #2 is not as important, but it would be nice to know how to fix that as well.
Here's a link to the problem page: http://www.truwindshield.com/test2/
Since you're using jQuery and the solution isn't, you could consider replacing it with a relevant jQuery plugin. This one seems to be working and degrading nicely: jQuery SelectBox
This implementation also solves the two issues you're having and might save you some working trying to hack the other solution into doing what you want it to.