TinyMCE divs editable in Internet Explorer - javascript

Internet Explorer is giving layout to my DIVs in TinyMCE.
This means that when a user starts editing all the text in the div is selected, rather than the cursor being inserted in the desired position, and it has editable drag handles:
Screenshot: http://puu.sh/knI67/c5c7250e56.png
Can I add some JQuery to my page, or to the TinyMCE init() to move the cursor to the desired position when the user clicks inside the div?
It's fine in Chrome, Firefox. Latest version of Tiny MCE.
Thanks in advance

I've worked around it by wrapping in a contenteditable=false div, and then adding contenteditable=true to the other divs inside the editor. Seems to work.

Related

cursor not hidden after applying cursor:none; only in firefox using javascript

In only fire fox the cursor is not hidden when I change the cursor style "pointer" to "none" using java script over you tube Embeded video. I am using a extra div over Iframe to trigger the event to to hide the cursor. When I am inspect the element I see cursor property is none, but in just display its not hidden but work fine in chrome, edge.
This has to do with the document's height not being filled to 100%. As ridiculous as it may seem, some versions of Firefox require this to display certain CSS attributes properly.
See this thread for specifics. Let me know if that helps.

Ckeditor Balloon Toolbar showing at wrong position in firefox

I am using Ckeditor balloon toolbar in my application. It works fine on Chrome. But on firefox, when I scroll the page, toolbar scrolls down and next time when I select the text it shows at wrong position.
In the below attached image, the balloon toolbar position is at wrong position.
Why is it so? It works fine on Chrome.
I was able to find the solution for the question I posted above.
The issue was related to CSS. CSS in HTML tag i.e position: relative was conflicting with it.
After removing that, it worked fine.

cursor (caret) is not visible in contenteditable div

When I click on a text in a contenteditable div, the cursor does not appear to move.
once text is typed, the cursor becomes visible and text is entered in the clicked location.
its as if the cursor moves, but is not being redrawn.
I am unable to reproduce the bug in a simple jsfiddle environment.
Has anyone encountered such an issue before?
In the meantime I am trying to isolate the cause of the problem by removing css and javascript file references from the page.
and reverse- starting with a blank page and adding js/css in attempt to reproduce.
EDIT IN RESPONSE TO COMMENTS BELOW:
Browser: chrome
Javascript modules: jquery, jquery ui, rangy.
I tried to remove all javascript. and the bug was still there.
It must be coming from the css.
I am trying to single out the css rules involved. It appears to be a combination of things.
the :before psudo class (that I am using to show placeholder text in the div if it has no text) seems to be part of the problem.
The problem was traced to css3 3d transformations on a div that is located in the background of the contenteditable element.
Will try to place the background element in an iframe to resolve the issue.

Force dom reload/resize in Javascript

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.
you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')
The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).
you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that

JQuery drag and drop not working in FF3.6 after I implement CSS3 flexible box layout, any ideas?

I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here:
http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work in FF..
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>
You should also lose the XHTML constructs and the "language" attribute from your <script> tag.
HTH!

Categories