We Keep Coding

Attributes / vars in tooltipster are ignored

I've been trying for two days to figure out why tooltipster (which is great btw) is not taking into account any var declared in the javascript / head section. For instance:
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
var data = 'toto';
contentAsHTML: true,
animation: 'slide',
delay: 100,
content : $(data)
});
});
</script>
with:
<img src="Pics/winter.png" alt="winter" border="1" class="tooltip" />
is not working at all (meaning the tooltip is not showing up in the HTML page). I tried several coding variations, including adding ' ; ' etc. but it doesn't change the result.
I also tried to get an element's attribute using:
content : '$(this).attr('alt')'
which is my final goal, and it doesn't work either. What am I missing?

The most probable reason is
var data = 'toto';
contentAsHTML,animation,delay,content etc are options that tooltipster accepts.
But when it is coming across var data = 'toto'; it will through an error since it is not an option which tooltipstercan accept

I've made a quick jsFiddle to demo the "correct" way of setting the content of the tooltip from the originating element - on it's intialization.
The reason this wasn't working before was due to:
You declaring the variable data within the JSON object passed to the tooltipster function - this is invalid syntax for JavaScript.
Your second attempt was closer, but using this in the content property is an ambiguous reference to an "outside" this scope - likely unrelated to the tooltipster instance or HTML node you were after.
Here's the amended code that should do what you want:
$(document).ready(function() {
$('.tooltip').tooltipster({
contentAsHTML: true,
animation: 'slide',
delay: 100,
functionInit: function(instance, helper) {
var alt = $(helper.origin).attr('alt');
instance.content(alt);
}
});
});
I hope this helps :)

Using <br> instead of <p> in Summernote?

Needed to use <br> tag in the summernote editor instead of <p> while user clicks on the Enter button, so here is my code:
var $this = $(this),
box = $('textarea.CommentsFields');
box.summernote({
height: 100,
focus: true,
toolbar: [
[ 'all', [ 'bold', 'strikethrough', 'ul', 'ol', 'link' ] ],
[ 'sided', [ 'fullscreen' ] ]
],
callbacks: {
onEnter: function(){
box.summernote('insertNode', document.createTextNode("<br>"));
console.log('uiwdbvuwecbweuiuinsjk');
}
}
});
I wrote a custom callback of the onEnter event, when the user hit the return button it raises a callback, and write the <br> tag which is not what I am looking for.
I read their documentation but can not understand how to stop the default action of the enter button and write <br> tag instead of wrapping the element in <p> tag.
Any idea? Thanks

This code worked for me:
$("#summernote").on("summernote.enter", function(we, e) {
$(this).summernote("pasteHTML", "<br><br>");
e.preventDefault();
});
This interceps the Enter press event and changes its default behaviour, inserting a <br> instead of a new paragraph.

If you don't want to change or fix the summernote library itself, you can use the shortcut keys for adding a line break.
Use Shift + Enter for giving a line break.
Use Enter for changing a paragraph, as summernote add a div/p to start a new line when you press Enter.
Hope this works.

There appear to be at least 10 or so bugs filed about this over at SummerNote, with no fix or plan to fix it unfortunately.
Fortunately you can fix it in a sneaky way, that is going to be pretty brittle to future versions - so upgrade carefully. You Monkey Patch it:
$.summernote.dom.emptyPara = "<div><br/></div>";
box.summernote(options);
The first line is the fix - the Monkey Patch. I included the second line, where SummerNote is initialized, just to demonstrate you MUST do your Monkey Patch before you start SummerNote - or the Monkey Patch will not make it in and you'll still get p tags on enter.

Guaranteed 2 liner & no plugin:
$.summernote.dom.emptyPara = "<div><br></div>"; // js
.note-editor .note-status-output{display:none;} /*css*/

Today summernote has no way to do what you want. You can check https://github.com/summernote/summernote/issues/702, so, the only way is to create your own pull-request with fixed logic for different paragraph style.

This worked for me
Replace (in Summernote.js line 3786)
if (event.keyCode === key.code.ENTER) {
context.triggerEvent('enter', event);
}
in
if (event.keyCode === key.code.ENTER) {
return;
}

I encountered this problem and the solution is below.
onKeydown function in callbacks solves your problems.
Example:
$('.textarea-editor').summernote({
height: 250, // set editor height
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing summernote
htmlMode: true,
lineNumbers: true,
codemirror: { // codemirror options
theme: 'monokai'
},
mode: 'text/html',
callbacks: {
onKeydown: function(e) {
e.stopPropagation();
}
}
});

Proper Way Of Modifying Toolbar After Init in TinyMCE

I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.
The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.
The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.
So I accomplished this in a moderately hacky way:
tinyMCE.on('AddEditor', function(e){
e.editor.on('init', function(){
tinyMCE.ui.Factory.create({
type: 'button',
icon: 'icon'
}).on('click', function(){
// button pressing logic
})
.renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
});
});
So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.
Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?

I found a more elegant solution, but it still feels a bit like a hack. Here is what I got:
// get an instance of the editor
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever
//add a button to the editor buttons
editor.addButton('mysecondbutton', {
text: 'My second button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my second button!</b> ');
}
});
//the button now becomes
var button=editor.buttons['mysecondbutton'];
//find the buttongroup in the toolbar found in the panel of the theme
var bg=editor.theme.panel.find('toolbar buttongroup')[0];
//without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
//append the button to the group
bg.append(button);
I feel like there should be something better than this, but I didn't find it.
Other notes:
the ugly _lastRepaintRect is needed because of the repaint
method, which makes the buttons look ugly regardless if you add new
controls or not
looked in the code, there is no way of adding new controls to the
toolbar without repainting and there is no way to get around it
without the ugly hack
append(b) is equivalent to add(b).renderNew()
you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:
Code:
bg.add(button);
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0];
var bgElement=bg.getEl('body');
buttonElement.renderTo(bgElement);

TinyMCE opened in jqueryUI modal dialog

When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?

This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)

It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');

This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});

Add 1 to z-index onclick for IE compatibility

I'm putting together a map using Raphael. What I have so far works in Chrome and Firefox, but how can I make this compatible with IE? Here's a link to my test map. http://www.imsmfg.com/imsepracks/sales-reps.php
Here's the javascript:
st[0].onclick = function () {
var maxZ = Math.max.apply(null,$.map($("#paper > *"), function(e,n){
if($(e).css("position")=="absolute")
return parseInt($(e).css("z-Index"))||1 ;
})
);
document.getElementById(current).style.display = "block";
document.getElementById(current).style.zIndex = maxZ+1;
current = state;
};

One thing I can tell you is that in IE an element appearing lower in the markup (but not a child of the same parent) will always have higher z-index.
There are two possible solutions to that:
1) rework you code to not rely on z-index (absolute positioned elements should always appear over top of the relative or static ones anyway)
2) physically move your positioned div at the bottom of the document body.
Also your maxZ calculations looks awkward and messy. Are you sure max() actually works with arbitrary array of values (i.e. with number of elements more than 2)? In IE, more specifically.
If you need more help, post your markup.

I get an error in my IE console on IE8:
Object doesn't support this property or method - line 31 in imsep.js
$(function() {
$("#accordion").accordion({
autoHeight: false,
navigation: true,
active: false,
collapsible: true
});
});
From what i have seen, the problem lies with setting display:block; so it might be related to this js error.
Edit:
When i set display block manually via the ie dom inspector, i see the div.
Edit2:
I don't find #accordion on your page, you may want to do something like:
$(function() {
if($("#accordion").length > 0)
$("#accordion").accordion({
autoHeight: false,
navigation: true,
active: false,
collapsible: true
});
});