When appending to a jquery dialog, it automatically resizes the dialog to fit the new content.
That's great.
After moving the dialog, this functionality breaks.
That sucks.
As you can see in this fiddle, the dialog works great UNTIL you move it.
$("#dialog").dialog({
resizable: true,
autoOpen: true,
});
window.setInterval(function(){
$("#innerdiv").append("<br>Append!");
}, 2000);
https://jsfiddle.net/f8dtd8bg/
Anyway to work around this apparent bug in jquery?
Oops, I was using an old version of Jquery UI. Works now :P
https://jsfiddle.net/f8dtd8bg/1/
$("#dialog").dialog({
resizable: true,
autoOpen: true,
});
window.setInterval(function(){
$("#innerdiv").append("<br>Append!");
}, 2000);
I have CKEDITOR in my webpage to allow users edit HTML paragraphs, headers, etc. for custom editable content. I looked up into this to remove inline editor default toolbar, as long as I'm creating my own "toolbar" into a floating dialog.
Using the answer into the link I posted, when I try to edit any element doing double-click (because I attached a dblclick event to all elements that creates a CKEDITOR instance to that element) it works perfect, but after 2-3 seconds my icons for boldering text, changing alignment, etc. in dialog blink (disappear and reappear) as if you reloaded something into the document.
Anyone knows why? It's pretty frustrating to see like something is reloaded, but it is not (apparently).
Thanks in advance.
EDIT
Sorry, I couldn't post my code before, because I was working. Here is what I have:
CKEDITOR.disableAutoInline = true;
if (!CKEDITOR.instances.editorId) {
CKEDITOR.inline('editorId', {
plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
autoParagraph: true,
allowedContent: true,
forcePasteAsPlainText: true,
disableNativeSpellChecker: false,
resize_enabled: false,
stylesSet: 'default:styles.js',
contentsCss: ['http://www.youblue.es/css/fonts.css'],
title: false,
removePlugins: 'toolbar'
}); // I loaded all config here, taking advantage that I had to remove toolbar
}
And here is what I tried so far without the expected results:
CKEDITOR.appendTo('editorId', {
plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
autoParagraph: true,
allowedContent: true,
forcePasteAsPlainText: true,
disableNativeSpellChecker: false,
resize_enabled: false,
stylesSet: 'default:styles.js',
contentsCss: ['http://www.youblue.es/css/fonts.css'],
title: false,
removePlugins: 'toolbar'
}, '');
////////////////////////////////////////////////////
CKEDITOR.inline('editorId', {
plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
autoParagraph: true,
allowedContent: true,
forcePasteAsPlainText: true,
disableNativeSpellChecker: false,
resize_enabled: false,
stylesSet: 'default:styles.js',
contentsCss: ['http://www.youblue.es/css/fonts.css'],
title: false,
removePlugins: 'toolbar'
});
////////////////////////////////////////////////////
CKEDITOR.replace('editorId', {
plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find',
autoParagraph: true,
allowedContent: true,
forcePasteAsPlainText: true,
disableNativeSpellChecker: false,
resize_enabled: false,
stylesSet: 'default:styles.js',
contentsCss: ['http://www.youblue.es/css/fonts.css'],
title: false,
removePlugins: 'toolbar'
});
The most accurate was the inline function call, but as I mentioned, the icons blink when the editor loaded.
Hope this helps.
Hopefully I found a solution. Seems like something went wrong in my CKEditor build when trying to remove toolbar plugin, but it worked when I removed 'toolbar' from this line in config:
CKEDITOR.inline('editorId', {
// ...
plugins: 'toolbar,basicstyles,wysiwygarea,indent,link,list,find', // <- This one
// ...
}
And stopped blinking icons when I removed this line:
removePlugins: 'toolbar'
Seems like it reloads the editor when you use removePlugins, but only when removing toolbar plugin. It didn't remove toolbar without removing the plugin manually maybe because something went wrong/in conflict with CKEditor when loading. To avoid that, just be sure that all your JS are loaded in the correct order, check that JS paths are the right ones and check that you don't have any JS overwritting other JS.
I felt pretty stupid and newbie when I found the solution after posting here. I felt ashamed =(
Sorry guys.
I have been searching myself silly for this and can't find anything to help.
I want to add 2 buttons to my nav_menu one for register and one for login.
also i want it to popup with the ajax and can't seem to find that either.
I don't want to use the pages for registration or login.
Can somebody help me on this.
Thank You
You can accomplish this in a few ways. I would suggest using jquery/javascript to bind to those menu options and use jquery dialog to view the page in a popup.
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'EDIT',
draggable: false,
width : 300,
height : 40,
resizable : false,
modal : true,
});
$("#loginOption").click( function() {
$("#dialog").load('path/to/file.html', function() {
$("#dialog").dialog("open");
});
});
jQuery Dialog Docs: https://jqueryui.com/dialog/
I have a google map with popup alerts which used to work but for some reason isn't now.
It is supposed to be modal and have an x to close it. It ought to expand to include all text. This worked before but not any more.
It has a close button instead of the x. The text overflows the size of the window.
I copied the code from a working map but that did not help.
Here is the code:
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:200,
resizable: true,
modal : true,
close: function(ev, ui) {
$(this).remove();
}
}).css("background", "lightgrey");
}
What could have broken this code. (It is embedded in a Drupal 7 page.)
I resolved this by completely removing the various jquery libraries I had added to the Drupal configuration and using the explicit definitions in the code. I must have introduced something that conflicted with the behaviour of alerts.
I need to have a jQuery UI dialog box that pops up and shows a basic form, which also includes an external javascript file.
The modal pops up, but none of the script contents load. Not sure why. If I go directly to the page the modal is loading, it works fine.
Modal content:
<link rel="stylesheet" href="http://www.bankrate.com/free-content/css/bankrate-fcc-calculators.css" type="text/css"/>
<input id="mrtgCal" type ="text" value="1,Arial,600" style="display:none" />
<script language="Javascript" src="http://js.bankrate.com/free-calculators/free-simple-mortgage-calculator-widget.js" type="text/javascript"></script>
<script type="text/javascript">mrtgCalcinit();</script>
Modal call:
$(function(){
$('.modal-popup a, .email-button a').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #region-content')
.dialog({
autoOpen: false,
width: 600,
draggable: false,
resizable: false,
modal: true,
show: "fade",
hide: "fade",
closeText: 'X'
});
$link.click(function(){
$dialog.dialog('open');
return false;
});
});
});
The scripts are not running because of the way you're calling .load(). The library will not run embedded scripts when you use a selector after the URL. By that I mean the addition of ' #region-content' to the end of the "href" value.
Why? I don't completely know; I suspect it has something to do with the fact that jQuery doesn't know whether the embedded <script> bodies rely on scripts in the <head> (or elsewhere) to work.
As stated before, load wont load the scripts (read the Script Execution section). However it is not necesary to extend the dialog, you can use .delegate(), .on() or even a very to use plugin called liveplugin to manage the dynamic content loaded into the dialog.
The best variant is to write your custom jquery ui widget, extending jquery ui dialog with your functionality.