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
});
Related
Anyone please tell me how can i select next consecutive row from first page to second page of my kendo grid and reverse back to the previous page ? Kendo Grid API just only gives me information on 'select' and from there I have no clue at all how to implement my desired selection. What I have now is only selecting the row of the selected/active cell. Any insight/references are also appreciated. So far I haven't came across with any examples or article.
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
data.select($("#grid_active_cell").closest("tr"));
},1);
}
});
http://dojo.telerik.com/eSUQO
var data = $("#grid").data('kendoGrid');
var arrows = [38,40];
var navrow_uid; ** add this tracking variable;
data.table.on("keydown", function (e) {
if (arrows.indexOf(e.keyCode) >= 0) {
setTimeout(function () {
data.clearSelection();
// break this up
// data.select($("#grid_active_cell").closest("tr"));
// fetch next row uid and compare to tracker
var nextrow = $("#grid_active_cell").closest("tr");
var uid = nextrow.data('uid');
if (navrow_uid == uid ) {
console.log("last navigable row");
data.dataSource.page(1+data.dataSource.page());
// best option here would be to set auto-page flag for databound event handler
} else {
data.select(nextrow);
navrow_uid = uid;
}
},1);
}
});
You will want to add a grid data bound handler, and have that check the aut-page flag to see if you need to select first or last row of page.
I am using the inline shared CKEditor (version 4.5.7) in a CMS.
To simplify editing new elements in the page-builder, I use the following code if the text in the container is dummy-text:
editor.on( 'focus', function(ev) {
if(obj.isDummyText($(ev.editor.element.$))) {
ev.editor.execCommand( 'selectAll' );
}
});
The problem is, if the container has a initial styling set, like a h-tag, the h-tag gets stripped when you start typing.
I want to maintain that h-tag in the element so an initial style is already set and the UX is a bit better.
I have tried fixing this with the CKEDITOR.config:
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
config.forcePasteAsPlainText = false;
CKEDITOR.dtd.$removeEmpty['i'] = false;
CKEDITOR.dtd.$removeEmpty['h1'] = false;
CKEDITOR.dtd.$removeEmpty['h2'] = false;
CKEDITOR.dtd.$removeEmpty['h3'] = false;
CKEDITOR.dtd.$removeEmpty['h4'] = false;
CKEDITOR.dtd.$removeEmpty['h5'] = false;
CKEDITOR.dtd.$removeEmpty['h6'] = false;
config.allowedContent = true;
Sadly this didn't change anything, the h-tags still get stripped when you start typing:
Before selection:
While selecting:
And after I started typing:
Is there any way to fix/hack this issue?
The solution I found was to create a new selectionRange for the content of the h4 element (without the h4 element itself):
editor.on('focus', function(ev) {
setTimeout(function() {
var element = element = ev.editor.document.getElementsByTag('h4').getItem(0).$;
var textNode = element.childNodes[0];
var startIndex = 0;
var endIndex = textNode.length;
var range = document.createRange();
range.setStart(textNode, startIndex);
range.setEnd(textNode, endIndex);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}, 100);
})
The code worked great on all browsers but IE without the setTimeout function, so I added this.
Here is a working example:
https://jsfiddle.net/dhxpyobo/
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've read this excellent answer to pretty much the same question. However, I have tried every technique that #Reinmar recommended, and none of them seem to work.
The situation is that I am taking the current HTML from the editor and wrapping certain pieces in span tags. I then set the now modified HTML back and try to restore the user's cursor location. No technique works.
Here is a very simple example to reproduce the issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="cktest"><p>Sometimes Lorem. Sometime Ipsum. Always dolor.</p></textarea>
<script type="text/javascript">
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks();
};
var restoreCursorLocation = function(editor) {
editor.getSelection().selectBookmarks(bookmark);
};
var validateText = function(editor) {
storeCursorLocation(editor);
var data = editor.document.getBody().getHtml();
data = data.replace("Lorem", "<span class='err-item'>Lorem</span>");
editor.document.getBody().setHtml(data);
restoreCursorLocation(editor);
};
CKEDITOR.replace('cktest', {
on: {
'instanceReady': function(evt) {
},
'key' : function(evt) {
clearTimeout(checkTimeout);
checkTimeout = setTimeout(function () {
validateText(evt.editor);
}, 1000);
}
}
});
})();
</script>
</body>
</html>
This code starts a timer when a user presses a key, and then waits for 1 second after they stop pressing keys to do the check.
Copy this to a new .html file and run it in your favorite browser (I am using Chrome).
When the CKEditor loads, use the mouse to place your cursor somewhere in the middle of the text. Then press the CTRL key and wait 1 second. You will see your cursor jump back to the start of the text.
This code example uses
editor.getSelection().createBookmarks();
to create the bookmark. But I have also tried:
editor.getSelection().createBookmarks(true);
and
editor.getSelection().createBookmarks2();
I have also tried just saving the range using
var ranges = editor.getSelection().getRanges();
and
editor.getSelection().selectRanges(ranges);
in the restoreCursorLocation function.
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function( editor ) {
bookmark = editor.getSelection().createBookmarks( true );
};
var restoreCursorLocation = function( editor ) {
//editor.focus();
editor.getSelection().selectBookmarks( bookmark );
};
var validateText = function( editor ) {
storeCursorLocation( editor );
var data = editor.document.getBody().getHtml();
data = data.replace( "spaceflight", "<span class='err-item'>spaceflight</span>" );
editor.document.getBody().setHtml( data );
restoreCursorLocation( editor );
//fire this event after DOM changes if working with widgets
//editor.fire( 'contentDomInvalidated' );
};
var editor = CKEDITOR.replace( 'editor1', {
extraAllowedContent : 'span(err-item)',
on: {
"pluginsLoaded" : function( event ){
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'keyup', function( e ) {
clearTimeout( checkTimeout );
checkTimeout = setTimeout(function () {
validateText( editor );
}, 100 );
});
});
}
}
});
})();
I have checked your code, made some corrections and the above seems to work fine. I know you said you have tried it but for me createBookmarks(true) has done the trick.
Explanations and Notes:
You needed to use createBookmarks(true) which inserts unique span into HTML. Such bookmark is not affected by changes you are doing inside the DOM (there are limits of course e.g. your custom changes remove bookmark).
It was clever to use getBody().getHtml() and getBody().setHTML(). If you have used editor.getData() this would have removed empty spans that represent bookmarks.
Please note however that such approach may break widgets so it is required to fire contentDomInvalidated event after such changes.
I was also focusing editor before restoring selection but this is “just in case” solution, as I have noticed that editor selects bookmark without it. If however, for some reason, you are losing the selection, this would be another thing to use.
Here you have working example: http://jsfiddle.net/j_swiderski/nwbsywnn/1/
Check the default behaviour when you set innerHtml in https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element
The bookmarks in CKEDITOR are hidden span elements and setting innerHtml will remove all those elements.
Anyway the solution is very simple.
Change your storeCursorLocation function to this
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks(true);
};
When you pass true as parameters it will use the ids as the reference instead of storing the DOM elements so you can restore then after an innerHtml change.
{Edit}
Reading Solution 2 from #Reinmar he says
If you can avoid uncontrolled innerHTML changes and instead append/remove/move some nodes, then just remember that you have to preserve these elements and this method will work perfectly. You can also move bookmarks' elements if your modifications should change the selection as well.
This is how you do it if you can't replace the contents of the element innerHtml.
This solution is less efficient but might work in some scenarios
Change the validateText function to this.
var validateText = function(editor) {
storeCursorLocation(editor);
var parent = editor.document.getBody().$.firstChild,
nodes = parent.childNodes,
nodeText,
words,
index = 0,
current,
newElement;
while (index < nodes.length) {
current = nodes[index];
nodeText = current.nodeValue;
if (current.nodeType === Node.TEXT_NODE && nodeText.indexOf('Lorem') !== -1) {
words = nodeText.split('Lorem');
newElement = document.createTextNode(words[0]);
parent.insertBefore(newElement, current);
newElement = document.createTextNode(words[1]);
parent.insertBefore(newElement, current.nextSibling);
newElement = document.createElement('span')
newElement.className = 'err-item';
newElement.innerHTML = 'Lorem';
parent.replaceChild(newElement, current);
break;
}
index++;
}
restoreCursorLocation(editor);
};
Basically I'm transversing the nodes of the first p in the chkeditor body and replacing only the node of type text that contains Lorem with a span and add the remaining text before and after as text elements. If you replace the whole text like you were doing it will remove from the DOM the bookmarks so when you tried to restore they don't exist.
I change the color of some cells in the gridComplete: function(){ . This override the hover or selected color. I want to make the hover and selected colors the highest level. i.e. if I selected a colored row, it changes to the selected color.
I suppose your question continues your previous question about the the color of the some cells. I created another demo which code is longer as my previous example from my answer to your previous question.
The main problem with the setting of the color of the cell (<td> element) is that the class of cell has of course higher priority as the classes of row because by the definition of the row classes was no "!important" attribute used. So to be able to make the selected of hovered cell be exactly like other standard cells one have to remove the cell class which changes its color. After "unselecting" or "unhovering" the corresponding row one should restore the removed cell class (the 'ui-state-error ui-state-error-text' classes). I implemented this behavior with the following code:
var grid = $("#list");
var saveErrorStateInData = function(ptr) {
var redCells = $("td.ui-state-error",ptr);
if (redCells.length > 0) {
var errorCells=[];
$.each(redCells,function(index, value) {
errorCells.push(value);
$(value).removeClass("ui-state-error ui-state-error-text");
});
$(ptr).data('errorCells',errorCells);
}
};
var restoreErrorStateFromData = function(ptr) {
var errorCells = $(ptr).data('errorCells');
if (errorCells && typeof errorCells.length !== "undefined"
&& errorCells.length>0) {
$.each(errorCells,function(index, value) {
$(value).addClass("ui-state-error ui-state-error-text");
});
}
};
grid.jqGrid({
// all jqGrid parameters
beforeSelectRow: function(rowid, e) {
var selrowid = $(this).getGridParam('selrow');
restoreErrorStateFromData($("#"+selrowid)[0]);
ptr = $(e.target).closest("tr.jqgrow");
saveErrorStateInData(ptr);
return true;
}
}).bind('mouseover',function(e) {
var ptr = $(e.target).closest("tr.jqgrow");
if($(ptr).attr("class") !== "subgrid") {
$(ptr).addClass("ui-state-hover");
saveErrorStateInData(ptr);
}
return false;
}).bind('mouseout',function(e) {
var ptr = $(e.target).closest("tr.jqgrow");
var selrowid = grid.getGridParam('selrow');
$(ptr).removeClass("ui-state-hover");
if (ptr.length === 1 && ptr[0].id !== selrowid) {
restoreErrorStateFromData(ptr);
}
return false;
});
On the demo you will see how all this work.
Sorry for answering this old question, but I hope someone else might find it useful. After searching quite a while for a solution, I came up with this:
Add a dummy class (with no styles) to the column using the jqGrid colmodel option 'classes'.
Add a style setting the background using a selector like this:
tr.jqgrow:not(.ui-state-hover):not(.ui-state-highlight) td.mydummycol {
background-color: #ffd !important;
}
This way the background is only applied if the row is not selected or in the hover state.