views:

64

answers:

0

Hello,

I am developing a webpage editor tool which is based around using an iframe to load the page into, and setting various defined elements in that page as "contenteditable" to allow text to be entered/changed. My editor UI has a "fullscreen mode" option which allows the editor iframe to take up the entire width/height of the browser's viewport, essentially overlaying the rest of the system interface. I accomplish this by changing the iframe's position to absolute, and setting its top/left properties to 0, all via jQuery.

This all works great with no problems in Chrome/Safari, however in Firefox (tested on 3.6 XP, Win7, and Mac) upon toggling the fullscreen mode on I am no longer able to see the text caret position nor can i set it by clicking on any contenteditable element on the page. Even when I exit fullscreen mode, and make the iframe's position static again, I still cant get the caret position back. However, in both fullscreen and normal view modes I can still enter text, I just can change where in the text its being entered.

The code changing the editor to full screen is as simple as:

$('#editor_container').css(
{
    'position': 'absolute',
    'top': '0px',
    'left': '0px'
});