Scroll to Element within CKEditor
CKEditor is the outstanding WYSIWYG editor we use on the Mozilla Developer Network. We have many custom plugins and we do everything we can to make writing easy for contributors. One trick I just picked up was skipping to an element within the editor by ID and setting the cursor focus within that element. Here's how!
The JavaScript
You'll start by scrolling the element into view within CKEditor:
var element = editor.document.getById('someHeading');
var range;
if(element) {
element.scrollIntoView();
// Thank you S/O
// http://stackoverflow.com/questions/16835365/set-cursor-to-specific-position-in-ckeditor
range = editor.createRange();
range.moveToPosition(element, CKEDITOR.POSITION_AFTER_START);
editor.getSelection().selectRanges([range]);
}
With the element in view, you'll attempt to insert the cursor at the beginning of the element using a Range.
Firefox will actually insert the cursor for you but Chrome wont, so the Range step is necessary.
![Vibration API]()
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...
![Animated 3D Flipping Menu with CSS]()
CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...
![Facebook-Style Modal Box Using MooTools]()
In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect.
The Imagery
Facebook uses a funky sprite for their modal...
![Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3]()
Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy.
The XHTML
A normal table. The cells...
Instead of
you can simply use
Updated, thank you!
This will work for sure.