How do you configure mmenu to indicate the current page in the (m)menu? Is there just something to include on each page?
Mmenu will style the current page based on it's class. If you are using Wordpress for example the current page is given the class "current-menu-item". When you are loading mmenu you need to tell it what class you have given the current page (default is 'selected'):
jQuery("#menu-top").mmenu({
//options
}, {
//configuration
classNames: {
selected: "current-menu-item"
}
});
Related
I use "CKEDITOR.stylesSet.add(...)" in a custom .js for my CMS. I can add custom styles for headlines, p-tag, ul here...but how can I add a "div", so that two children div will be in it?
I start to add a "div" in this way:
CKEDITOR.stylesSet.add("ifmstyle", [
{
name: "Custom DIV",
element: "div",
attributes: {
class: "custom-div",
},
},
]
..that means, that I have a div where I can place images, p-tags, a-tags for example. But I would like to make it like this (My custom div will have two children divs):
Custom DIV
children-div1
children-div2
image example
You're basing your code on this doc page, right?
https://documentation.bloomreach.com/14/library/concepts/document-types/html-fields/customize-ckeditor-styles.html
This is about the content perspective. You can change styling there but you can't change the markup unless you fork/rewrite some underlying Wicket code.
HTH
Jeroen
BTW community.bloomreach.com is more active then SO here
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
I've got everything working well except the drop area element doesn't hide after moving back off the page.
For example, if I drag something to the page, the drop area element shows, but then if I decide not to drop, it stays visible instead of hiding. It looks like in the demos on the site, it should hide again.
I've been studying this page: http://docs.fineuploader.com/branch/master/integrating/options/fineuploader.html#draganddrop-option-properties
There doesn't seem to be a callback for when there is no longer a file about to be dropped in the browser window. My code looks just like the examples, but has my own element id and class names, both of which work.
Any ideas?
Update - here is some code:
<div id="file-upload-well" class="well text-center">
<div id="file-upload-drop-area" style="display:none;">Drop files here</div>
Upload Files
</div>
and here is the DND js:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('file-upload-drop-area')],
classes: {
dropActive: "dropActive"
},
callbacks: {
processingDroppedFiles: function () {
$('#file-upload-drop-area').hide();
},
processingDroppedFilesComplete: function(files) {
uploader.addFiles(files);
}
}
});
The issue was setting the hideDropZonesBeforeEnter is set to false by default and needed to be set to true.
Both the variable name and the help documentation make it seem it will only show the drop zone when a file is directly over it, but instead it hides and shows the dropdown when a file is over a compliant browser.
I am new to JQM and I'm using Phongeap with JQM for a new project.
My javascript is in one single js file and I'm loading the views from multiple html files.
As the transitions of the siede panel are poor, when I change pages via <a href="page2.html"> I tried to to use event listeners for the Menuitems.
function setPanelListeners(){
$('#menu_search').click(function() {
switchPageTo('search.html');
});
$('#menu_schedule').click(function() {
switchPageTo('program.html');
});
$('#menu_news').click(function() {
switchPageTo('news.html');
});
}
I call this function on the pagebeforeshoe event of each page. To fix the transitions to the way I need it, I use this function
// Close Panel then change page
function switchPageTo(url){
$('#menupanel').panel('close');
setTimeout(function() {
$.mobile.changePage( url, { transition: 'fade'} );
},200);
}
So here is the Problem. It actually works fine on the first page. But on the second page the Menuitems won't work, I guess the event listers are not listening for the new panel, because in the html the panel is loaded twice! And the Event listeners only listen for the first panel (from the first page) which is not displayed on the second page.
Any help is appreciated!
Are you adding panel dynamically on the second page? In JQM 1.3 you have to add panel separately to each page, although this restriction will be removed in future versions.
Use event delegation for dynamic panels:
$(document).on('click' ,'#menu_search' function() {
switchPageTo('search.html')
});
I'm learning backbone / marionette js and i'm using a boilerplate to do so : https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate-Lite
I have created 2 view (welcome / files) and 2 regions : mains and header.
In my headerRegion there is my navbar and I would like to handle the "active" class of my menu (template: header.html) on change or reload... but I can't figure out what is the best way to do it
I have defined a Region in my App.js :
App.addRegions({
headerRegion:"header",
mainRegion:"#main"
});
In my controller i create a new HeaderView on init:
initialize:function (options) {
App.headerRegion.show(new HeaderView(options));
}
And this is my HeaderView :
define([ 'marionette', 'handlebars', "App", 'text!templates/header.html'],
function (Marionette, Handlebars, App, template) {
//ItemView provides some default rendering logic
return Marionette.ItemView.extend({
template:Handlebars.compile(template),
initialize: function (options) {
_.bindAll();
},
onRender : function(options){
$('ul.nav li', this.$el).removeClass('active');
}
});
});
});
Thanks for your help :) !
What I do in my book on Marionette is to use Backbone.picky to manage which header model is the active one, and add the proper CSS class in that case. You can see the relevant header model selection here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/header/list/list_controller.js
And when the user enters the app via a direct URL (e.g. a book mark), I set the proper active header (e.g. https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/contacts_app.js)