I'm using Ctrl+Left / Ctrl+Right in a GreaseMonkey script as a hotkey to turn back / forward pages. It seems to works fine, but I want to disable this behavior if I'm in a text edit area. I'm trying to use document.activeElement to get the page active element and test if it's an editable area, but it always returns "undefined".
document.activeElement works for me in FF3 but the following also works
(function() {
var myActiveElement;
document.onkeypress = function(event) {
if ((myActiveElement || document.activeElement || {}).tagName != 'INPUT')
// do your magic
};
if (!document.activeElement) {
var elements = document.getElementsByTagName('input');
for(var i=0; i<elements.length; i++) {
elements[i].addEventListener('focus',function() {
myActiveElement = this;
},false);
elements[i].addEventListener('blur',function() {
myActiveElement = null;
},false);
}
}
})();
element.activeElement is part of HTML5 spec but is not supported by most browsers. It was first introduced by IE.
Related
The Oracle Application Express code editor is just plain back text on white background. No Code highlighting. Also I can't press "tab" without the textfield loosing focus.
I am using firefox 31 (can't upgrade, rescricted by Admin at work here) Also I can't install plugins. I know you can change css on specific sites using a special folder in firefox ("chrome"-folder / userContent.css). I already used this to change die default size of the textfield, because it was frickin small everytime I opened the edit page.
So do you know any framework or script I can use in Apex ? (I could copy that shit to jsfiddle.net every time but that sucks
(I also found the scratchpad in Firefox, which can run js and jquery. Does that help ?)
[SOLVED]
since you can't use
<script src = "">
etc. in plain js, I had to use loadScript. For css files it was even more complicated, but I got it all working.
This is my code, I run it in scratchpad (firefox). It uses ACE to change a div to an editor with highlighting. When clicking apply I revert the editor-changes in the DOM but keep the text/code.
// Load Ace js
loadScript("http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js", function(){
//initialization code
});
// Load Ace css
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId)){
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css';
link.media = 'all';
head.appendChild(link);
}
// change textarea to div
var editorRegion = document.getElementById('F4000_P4651_PLUG_SOURCE_fieldset');
editorRegion.innerHTML = editorRegion.innerHTML.replace("textarea","div");
// run ACE
highlight();
// Modify the apply Button in Apex to first revert ACE-Editor to normal, then do the usual apply.
var applyChanges = document.getElementById('B3456326662');
applyChanges.setAttribute("onclick","modifiedApply()");
function modifiedApply(){
close();
setTimeout(normalApply, 500);
}
function normalApply(){
javascript:apex.submit('Apply_Changes');
}
// Revert ACE-Changes, but keep changed text/code.
function close(){
var value = editor.getValue();
editor.destroy();
var oldDiv = editor.container;
var newDiv = oldDiv.cloneNode(false);
newDiv.textContent = value;
oldDiv.parentNode.replaceChild(newDiv, oldDiv);
newDiv.outerHTML = newDiv.outerHTML.replace("div","textarea");
var old_new_old = document.getElementById('F4000_P4651_PLUG_SOURCE');
old_new_old.textContent = old_new_old.textContent.substring(0, old_new_old.textContent.length - 6);
}
var editor;
function highlight() {
editor = ace.edit("F4000_P4651_PLUG_SOURCE");
editor.setTheme("ace/theme/monokai");
editor.getSession().setUseWorker(false);
editor.getSession().setMode("ace/mode/javascript");
document.getElementsByClassName('ace_print-margin')[0].setAttribute("style","left:1000px");
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
I have been looking into this issue for a few hours now and I can't find a way to fix it. I am using ckeditor 4.3(also try 4.5) with a custom colour picker to change font colour.
All work well in chrome, firefox, opera and safari yet not in IE. The problem come from
editor.getSelection().getRanges()[0].startContainer
which gave me a span in chrome which is what I want and p in IE which is one level high.
Here a litle exemple :
_me.editor.focus();
var range = _me.editor.getSelection().getRanges()[0];
AddLinkColor(range.startContainer, value.Value);
var AddLinkColor = function (element, color)
{
var selectedChild = null;
if (element.getChildren) { selectedChild = element.getChildren(); }
if (selectedChild)
{
if (selectedChild.count)
{
for (var i = 0; i < selectedChild.count() ; i++)
{
var childElement = selectedChild.getItem(i);
if (childElement.getStyle && childElement.getStyle('color') != '' && childElement.getStyle('color') != color) childElement.setStyle('color',` color);
if (childElement.getChildCount && childElement.getChildCount() > 0) AddLinkColor(childElement, color);
if (element.$.tagName == 'A') element.setStyle('color', color);
}
}
}
};
Any other face the same issue?
I have tried all the variant of startContainer that gave a dom element, like commonAncestor and such still same problem.
Selection behaves differently in different browsers, because there's no specification as well as the platforms behave differently in general. As long as the results reflect the real position of the selection everything is fine. That's nothing surprising and nothing to worry about. The only problem is that you need to handle all those different selections and this makes creating an editor so hard. Therefore, CKEditor API contains many tools to simplify this job.
Yea I was afraid so, thanks, made a litle fix not quite sexy but it work
if(element.getName() != "span") { selectedChild = element.getChildren().getItem(0).getChildren(); }
else { selectedChild = element.getChildren(); }
I'm working to simulate files and directories structure ,using drag and drop,
my code is working fine in IE, Chrome but not working in Firefox ,
while i'm searching i found this fiddle .
> http://jsfiddle.net/G9mJw/20/
same problem works on IE,Chrome but not Firefox !
http://jsfiddle.net/G9mJw/140/
var dropzone = document.getElementById('dropzone');
var draggable = document.getElementById('draggable');
draggable.addEventListener('dragstart', onDragStart, false);
dropzone.ondragover = function(e){e.preventDefault(); }
dropzone.ondrop = function(e){ onDragOver(e); }
function onDragStart(event) {
event.dataTransfer.setData('text/html', null); //cannot be empty string
}
function onDragOver(event) {
var counter = document.getElementById('counter');
counter.innerHTML = parseInt(counter.innerHTML) + 1;
}
I'm trying to determine with Javascript if anything is selected within the CKEditor. I wish there was a bool like editor.hasSelection(). I started out using editor.getSelection().getSelectedText() === "", but if an element with no "text" is selected (like an img) then that will be a blank string, giving me a false negative. I also looked into editor.getSelection().getSelectedElement(), but that gives null if more than one element is selected.
Is there anything that does this that I'm not seeing in the API?
Looks to me as though there is nothing in the CKEditor selection API to do this directly. However, I think the following will do it, although I agree that it's a shame (and surprising) there is no equivalent of the isCollapsed property of the native browser Selection object.
This is untested but looks as though it will work:
function hasSelection(editor) {
var sel = editor.getSelection();
var ranges = sel.getRanges();
for (var i = 0, len = ranges.length; i < len; ++i) {
if (!ranges[i].collapsed) {
return true;
}
}
return false;
}
// Example:
alert( hasSelection(editor) );
I'm a newbie to jQuery and I have a map with a highlight plugin, when mouse over an area I want to change the text in a div with an ID and the text I will get it from the area attribute Alt="some text"
Here is the code that used for area loops, I'm pretty sure I can add a small function here but I couldn't figure it out.
//map
clicks$(".tabs area").click(function(){
//areas loop:
$(".tabs area").each(function(){
var d = $(this).data('maphilight') || {};
if(d.alwaysOn == true){
d.alwaysOn = false;
}
});
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
Any help or suggestions on how I can get this done would be highly appreciated.
I'm not familiar with the highlights plugin, but I think you just wanna add a mouseover event to each area like so (you would place this before/after your .click declaration):
$(".tabs area").mouseover(function() {
var alt_text = $(this).attr('alt');
$("#YOUR_TEXT_DIV_ID").html(alt_text);
}).mouseout(function() {
//do something on mouseout
});