Related
I'm not able to find a description which tag belongs to which position - allways searching for comments from oleg ;-).
I've a table with actionbuttons (edit/del) in the row. Adding ist done over inlinenav add:true:
jQuery(document).ready(function()
{
currentCompanyCode = '<s:property value="currentCompanyCode" />';
jQuery("#grid").jqGrid({
url: "serverAction" ,
pager: true,
pgbuttons:false, pginput:false, pgtext:false,
datatype: "json",
mtype: "POST",
ajaxGridOptions: {async: false},
aftersavefunc: function() {reloadGrid("grid")},
postData: { currentCompanyCode : function () {return jQuery("#availCompanyCodes").val();}},
pager: '#addBtns',
colModel:[
{name:"id", label:"key", hidden:true, key:true},
{name:"priority", label:"prio"},
....
{name: "act", label:"", align: "left", template:"actions"}
],
actionsNavOptions: {delbutton: true, editbutton: true}
}
}) .jqGrid("navGrid", '#addBtns', {refresh:true, edit:false, del:false, search:false, add:false },
{/*edit Options*/},
{/*add Options*/},
{/*del Options*/},
{/*search Options*/})
.jqGrid("inlineNav", '#addBtns', {
save:true, edit:false, add:true,
editParams: {keys: true, successfunc : function() {reloadGrid("grid")}, extraparam: {currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}},
addParams: {addRowParams:{successfunc : function() {reloadGrid("grid")}, extraparam:{ currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}}}
})
});
This is an extract from our grid-definition. Took some time to figure out, how I can set postdata when inlinediting or addding.
Two Questions:
Is there an easier way to add postdata in inlineediting? It looks complicated ;-)
The grid will not reload when I add a new line and press the save-icon in the actions-cell. It reloads when pressing Enter or the Savebutton in the pagerbar. Where should I put the reload-statement?
I don't understand why in edit-mode the successfunc-tag belongs to the editParams block, but in add-mode it has to be in the addRowParams block. Is there anywhere a description where to put these tags?
Thanx oleg - the grid is great, but sometimes I miss a documentation....
The problem, which you describe, is related to the common design of jqGrid. jqGrid provides not only the options used during creating the grid, but it has many other methods used directly or indirectly, which options need be specified.
For example, there are exist editRow method, which its set of options and callbacks. You want to specify keys and extraparam options and the successfunc callback. Direct call of editRow (inside of onSelectRow or ondblClickRow callbacks, for example) will look like
$(this).jqGrid("editRow", {
keys: true,
extraparam: { ... },
successfunc: function() { ... }
});
The problem is that the editRow will be called not only directly, by indirectly, from addRow, from inlineNav or from the action formatter. Every from the methods provides some ways to specify the options, which will be forwarded to editRow, but the usage of such options is not comfortable and the maintain of resulting code isn't so good.
Because of that free jqGrid introduced the possibility to specify default options for the grid context. The grid parameter inlineEditing for example allow to specify default options of editRow on one place and all direct or indirect calls of editRow will uses the options. One can still overwrite the options is needed (inside of editParams option of inlineNav, for example). In the same way, one can use new jqGrid options formEditing, formViewing, formDeleting, searching, navOptions, inlineNavOptions and so on. Additionally some simple options like pager are improved in free jqGrid. One can specify pager: true and jqGrid will create the div for the pager itself, like it does for toppager: true option. One can just skip the pager parameter ('#addBtns' in your case) for navGrid, inlineNav or navButtonAdd. By the way, your original code contains syntax error: you use pager property of jqGrid twice: once as pager: true and once more as pager: '#addBtns'.
Thus you can rewrite your original code to for example the following
jQuery("#grid").jqGrid({
url: "serverAction",
datatype: "json",
mtype: "POST",
pager: true,
pgbuttons: false,
pginput: false,
pgtext: false,
postData: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
colModel:[
//{name: "id", label: "key", hidden: true, key: true},
{name: "priority", label: "prio"},
....
{name: "act", label: "", align: "left", template: "actions"}
],
navOptions: { edit: false, del: false, search: false, add: false },
inlineNavOptions: { add: true, edit: true },
actionsNavOptions: { delbutton: true, editbutton: true },
inlineEditing: {
keys: true,
extraparam: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
aftersavefunc: function () {
var $grid = jQuery(this);
setTimeout(function () {
$grid.trigger("reloadGrid");
});
}
}
}) .jqGrid("navGrid")
.jqGrid("inlineNav");
I'm using tinyMCE 4 in AngularJS (angular-ui-tinymce). I'm trying to use the noneditable plugin to get some variable that I have predefined to show up nicely. I have a plnkr here http://plnkr.co/edit/AImGWCDO6a1J6VC7kD73?p=preview
Now my settings for tinyMCE is as shown
vm.settings = {
menubar: false,
toolbar: 'firstButton | secondButton',
plugins: 'noneditable',
noneditable_regexp: [
/<my-variable>(.*?)<\/my-variable>/g,
/<other-variable>(.*?)<\/other-variable>/g
],
extended_valid_elements :'my-variable,other-variable',
custom_elements: '~my-variable,~other-variable',
content_style: "my-variable: {background: yellow;} other-variable: {background: blue;}",
setup: function(editor){
editor.addButton('firstButton', {
text: 'Insert first',
icon: false,
onclick: function () {
editor.insertContent('<my-variable>MY-VARIABLE</my-variable>');
}
});
editor.addButton('secondButton', {
text: 'Insert second',
icon: false,
onclick: function () {
editor.insertContent('<other-variable>OTHER-VARIABLE</other-variable>');
}
});
}
};
And I just call these on my tinyMCE object with
<div ui-tinymce="vm.settings" ng-model="vm.content"></div>
So it's pretty standard.
My question is: How can I make <my-variable> and <other-variable> have different styles? When TinyMCE translates them they only seem to take on the class of 'mceNonEditable'. I would rather not have to add a class attribute to my custom tags as they are meant to be parsed in a later stage, and it's much easier if there are no attributes on them.
Opening and then closing a popup using Magnific Popup on a fullPage.js site seems to stop the autoScrolling: false, option working.
So once the pop up closes you can no longer scroll manually up and down the site. You can use the menu anchors to snap to sections but not scroll. Its normal again once refreshed but will happen again after opening a popup.
Any ideas why this happens and how to resolve it?
Magnific Popup
https://github.com/dimsemenov/Magnific-Popup
fullPage.js https://github.com/alvarotrigo/fullPage.js/
fullpage code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['section1','section2'],
navigation: false,
scrollOverflow:false,
showActiveTooltip:true,
slidesNavigation: false,
menu:'.menu',
fixedElements: '#header, #footer',
paddingTop:'140px',
autoScrolling: false,
scrollOverflow: false
});
</script>
Magnific Popup code
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery:{enabled:true},
image:{titleSrc: 'title'},
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
});
//]]>
</script>
MagnificPopup HTML
<img src="image.png" width="100%">
Add the plugin's initialization inside the afterRender callback as per fullPage.js FAQs:
My other plugins don't work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Like this:
$(document).ready(function () {
$('#fullpage').fullpage({
anchors: ['section1', 'section2'],
navigation: false,
scrollOverflow: false,
showActiveTooltip: true,
slidesNavigation: false,
menu: '.menu',
fixedElements: '#header, #footer',
paddingTop: '140px',
autoScrolling: false,
scrollOverflow: false,
afterRender: function () {
$('.media').magnificPopup({
removalDelay: 500, //delay removal by X to allow out-animation
gallery: {
enabled: true
},
image: {
titleSrc: 'title'
},
callbacks: {
beforeOpen: function () {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
closeOnContentClick: true,
midClick: true
});
}
});
});
Working on THIS Page:
newsite.702wedding.com/live/
Can't find where to remove the arrows at the bottom left, but keep the functioning slideshow obviously.
Here is what I think I/YouToo should be looking at:
(function ($, window) {
var
// ColorBox Default Settings.
// See http://colorpowered.com/colorbox for details.
defaults = {
transition: "elastic",
speed: 350,
width: false,
initialWidth: "662",
innerWidth: false,
maxWidth: false,
height: false,
initialHeight: "600",
innerHeight: false,
maxHeight: false,
scalePhotos: true,
scrolling: false,
inline: false,
html: false,
iframe: false,
photo: false,
href: false,
title: false,
rel: false,
opacity: 0.6,
preloading: true,
current: "image {current} of {total}",
previous: "previous",
next: "next",
close: "close",
open: false,
loop: true,
slideshow: true,
slideshowAuto: true,
slideshowSpeed: 3000,
slideshowStart: "Play",
slideshowStop: "Pause",
onOpen: false,
onLoad: false,
onComplete: false,
onCleanup: false,
onClosed: false,
overlayClose: true,
escKey: true,
arrowKey: false
},
Thanks for you help
There doesn't seem to be anything in the options that can help you. You will either have to modify the plugin source or find the elements that correspond to the arrows and hide them with JavaScript or CSS.
Inspecting with Chrome, it looks like the 2 arrow keys have IDs of cboxNext and cboxPrevious.
Try the following after the lightbox loads:
$("#cboxPrevious").hide();
$("#cboxNext").hide();
Or add to your CSS:
#cboxPrevious, #cboxNext{
display: none;
}
You actually can do this.
After you include colorbox.js and colorbox.css you have to initialize it. If you do it like below, you can have 3 separate options.
<script language="javascript">
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".photo").colorbox({photo:true, slideshow:false, previous:false, next:false, arrowkey:false, loop:false});
$(".group1").colorbox({rel:'group1', slideshow:true});
});
</script>
class="iframe" can trigger an external page.
class="photo" can show single photo without arrow but just close button
class="group1" will display the gallery and all controls for the gallery.
Note that only group1 contains rel:group1
Others two are classes e.g. iframe and photo and they are called by iframe > true and photo > true instead of group1 that is called by rel > group1
Pay attention in the code and you will know
Go to page
<img src="image.jpg">
<img src="image1.jpg">
Best is to just set the config option rel to false. rel is a the function used to group related colorbox instances.
$(".target").colorbox({rel: false});
The simplest way to disable navigation links is by not defining the rel attribute in the HTML element and using a class selector. For example:
HTML:
<a href="photo-1.php" class="js-colorbox">
<a href="photo-2.php" class="js-colorbox">
Javascript:
$(".js-colorbox").colorbox({iframe:true});
By defining the rel attribute, colorbox will try to find all the related elements (elements that have the same rel value) and create a navigation through them.
And it won't save.
I use the media plugin to insert a video from youtube.
The movie shows up in preview.
I press insert.
This is what ed.execCommand('mceInsertContent', false, h); outputs in media.js: <img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="" /> when I press insert/submit.
I see a yellow box inside the editor.
I check the source html and all I see is a <p> </p> where the move embed stuff should be.
I save and the yellow box is gone.
Here is my current tinymce init script:
tinyMCE.init({
// General
mode: 'none',
theme: 'advanced',
skin: 'grappelli',
dialog_type: 'window',
browsers: 'gecko,msie,safari,opera',
editor_deselector : 'mceNoEditor',
language: "en",
relative_urls: false,
plugins: 'advimage,advlink,fullscreen,paste,searchreplace,grappelli,grappelli_contextmenu,media',
// callbackss
file_browser_callback: 'CustomFileBrowser',
// Layout
width: 410,
height: 500,
indentation: '10px',
object_resizing: false,
// Accessibility
cleanup_on_startup: true,
accessibility_warnings: false,
remove_trailing_nbsp: true,
fix_list_elements : true,
remove_script_host: true,
// theme_advanced
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "formatselect,styleselect,|,bold,italic,underline,|,bullist,numlist,blockquote,|,undo,redo,|,link,unlink,|,image,media,|,fullscreen,|,grappelli_adv",
theme_advanced_buttons2: "search,|,pasteword,charmap,|,code,|,table,cleanup,grappelli_documentstructure",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h2,h3,h4,pre",
theme_advanced_styles: "[all] clearfix=clearfix;[p] small=small;[img] Image left-aligned=img_left;[img] Image left-aligned (nospace)=img_left_nospacetop;[img] Image right-aligned=img_right;[img] Image right-aligned (nospace)=img_right_nospacetop;[img] Image Block=img_block;[img] Image Block (nospace)=img_block_nospacetop;[div] column span-2=column span-2;[div] column span-4=column span-4;[div] column span-8=column span-8",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
theme_advanced_resizing_use_cookie : true,
theme_advanced_styles: "Image left-aligned=img_left;Image left-aligned (nospace)=img_left_nospacetop;Image right-aligned=img_right;Image right-aligned (nospace)=img_right_nospacetop;Image Block=img_block",
// Adv (?)
advlink_styles: "intern=internal;extern=external",
advimage_update_dimensions_onchange: true,
// grappelli
grappelli_adv_hidden: false,
grappelli_show_documentstructure: 'on',
// elements
/*
valid_elements : [
'-p,','a[href|target=_blank|class]','-strong/-b','-em/-i','-u','-ol',
'-ul','-li','br','img[class|src|alt=|width|height]','-h2,-h3,-h4','-pre','-blockquote','-code','-div'
].join(','),
extended_valid_elements: [
'a[name|class|href|target|title|onclick]',
'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]',
'br[clearfix]',
'-p[class<clearfix?summary?code]',
'h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]',
'ul[class<clearfix],ol[class<clearfix]',
'div[class]',
'object[align<bottom?left?middle?right?top|archive|border|class|classid'
+ "|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name"
+ "|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove"
+ "|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap"
+ "|vspace|width]",
'param[id|name|type|value|valuetype<DATA?OBJECT?REF]',
'embed[src|type|width|height|flashvars|wmode]',
'address'
].join(','),
valid_child_elements : [
'h1/h2/h3/h4/h5/h6/a[%itrans_na]', 'table[thead|tbody|tfoot|tr|td]',
'strong/b/p/div/em/i/td[%itrans|#text]', 'body[%btrans|#text]'
].join(',')
*/
// custom cleanup
// setup: function(ed) {
// // Gets executed before DOM to HTML string serialization
// ed.onBeforeGetContent.add(function(ed, o) {
// // State get is set when contents is extracted from editor
// if (o.get) {
// // Remove empty paragraphs (because this is bad)
// tinymce.each(ed.dom.select('p', o.node), function(n) {
// alert(n.firstChild);
// ed.dom.remove(n);
// });
// // Remove douple spaces
// // o.content = o.content.replace(/<(strong|b)([^>]*)>/g, '');
// }
// });
// }
});
Edit:
Ok I added cleanup: false to my init script. And now, all I get in my source is this:
<img src="http://127.0.0.1:8000/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" _mce_src="/media/admin/tinymce/jscripts/tiny_mce/plugins/media/img/trans.gif" class="mceItemFlash" title="src:'http://www.youtube.com/v/b7wJejHIFEc&feature',width:'376',height:'302'" width="376" height="302" align="">
This also shows up in my HTML.
Should TinyMCE not replace this with some embed code, or do I need to do that myself with some javascript?
Solution :
Update tinymce to latest release (3.3.9.2), along with all the plugins. I turned cleanup back on and now it works.