When I'm using Kunena on my site I have problems on the navigation bar.
Whenever I'm in a Kunena "page" the navigation is not showing the FORUM as active.
A work around will be to change the active with java script or jquery
add this script to your index template
<script>
var j = jQuery.noConflict();
var isForumActive = <?php if (strpos($_SERVER['REQUEST_URI'], "/forum") !== false){ echo "true"; } else echo "false";?>;
if(isForumActive){
j(".item120").addClass("active");
}
</script>
You will need to change the id (120) with your menu id and be sure that the alias is the correct.
you need jquery as well....
I solved this problem by creating all Kunena menu items as sub-menu items of the Forum menu item in the main menu and using split menus.
Related
My CKEditor fields often contain lots of content with h1, h2, h3, etc headings, and I've written a script that presents all the headings in a sidebar for quick reference. I'd also like to use this sidebar as a navigation menu for the editor content, so clicking a heading in the sidebar scrolls the editor to the related heading, but I can't figure out how to wire it all up.
This post at https://davidwalsh.name/scroll-element-ckeditor leads me to believe that it should be possible, but I can't figure out how to get to the "editor" element described in the post.
My sidebar is built with jQuery from a CKEditor textarea with id="content" like this...
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
I imagine using jQuery :contains() to identify heading elements in the editor based on the text they contain, but I can't figure out how to hook back into the CKEditor instance in a way that enables this kind of DOM activity.
I am using CKEditor 4 but am happy to upgrade to version 5 if it offers a better solution to my problem.
Thanks!
This is what wound up working for me:
var content = $('<div/>').append($('#content').val());
var sidebar = "";
$(content).find('h1,h2,h3,h4,h5,h6').addClass('heading');
$(content).find('.heading').each(function () {
sidebar += this.outerHTML;
});
$('#sidebar').html(sidebar);
$('#sidebar .heading').click(function() {
var element = $('#cke_content iframe').contents().find(':contains(' + $(this).text() + ')')[2];
if (element) {
element.scrollIntoView();
}
});
We would like to only have one menu section open at a time using mmenu and so does anyone know how we could automatically close any opened sections when a section is expanded?
Thanks
OK i managed to come up with this which works, there's probably a better way to do it:
$("#mm-0 a[href^=#]").click(function() {
var clickedMenu = $(this);
$("#mm-0 a[href^=#]").parent().each(function( i ) {
$(this).removeClass("mm-opened");
});
if($(clickedMenu).parent().hasClass("mm-opened")){
$(clickedMenu).parent().removeClass("mm-opened");
}else{
$(clickedMenu).parent().addClass("mm-opened");
}
});
So i basically add an onclick handler to any anchor links in the menu and then update the class.
In order to add items to a kendo menu dynamically, here in the forums, the kendo team suggested to use the append method as described in this example to append submenus.
I've done this, now I have the problem of arrows not rendering for nodes. The issue can be seen in this example: http://jsfiddle.net/MMRCf/16/ if you hover on "Item 1" then click on "Sub Item 2", "Sub Item 2" will be populated with a submenu. This submenu lacks arrows for expanding nodes.
Perhaps this is a bug that needs reporting but I cannot post on Kendo menu forum.
Does anyone know how I could get arrow icons to render?
I think the append method is where a fix could be applied:
append: function (item, referenceItem) {
referenceItem = this.element.find(referenceItem);
var inserted = this._insert(item, referenceItem, referenceItem.length ? referenceItem.find("> .k-group, .k-animation-container > .k-group") : null);
each(inserted.items, function (idx) {
inserted.group.append(this);
var contents = inserted.contents[idx];
if (contents) {
$(this).append(contents);
}
updateArrow(this);
});
updateArrow(referenceItem);
updateFirstLast(inserted.group.find(".k-first, .k-last").add(inserted.items));
return this;
},
Actually seems the updateArrow function is broken. I've updated it for the next release, meanwhile you can also update it to get it working, from this:
item.find(".k-icon").remove();
to this:
item.find("> .k-link > .k-icon").remove();
Excuse me for asking such a general question. I'm creating a website with Orchard CMS. The website's design and interactivity are critical requirements. I have a navigation menu which has a fixed size(900 px wide), but should be able to adjust as many menu items as possible (I do this manually by modifying the css). I've used a bit of jQuery to create some animations on mouse hovers etc. for the menu. Problem is that the css and jQuery parameters are hard coded. So if a user were to change to add a new menu item, they need to know in advance the number of menu items, and sub items, thus it's not very easy for the average user to customize it which the whole point of a CMS. What is the best way of keeping this menu interactive (with the jQuery animations), and such that the user can be able to add content pages to this menu (as they do with the default navigation menu in orchard) and also user friendly such that the non technical user need to have to mess around with the jQuery and CSS of the menu?
What is the best way of doing this, should I create a module (a navigation menu component?) which will dynamically set the css/jQuery values (width etc.)
UPDATE
Also, right now I have my HTML (my navigation menu, Unorderd List etc.) and its jQuery script reference embedded in my Layout.cshtml, and the style for the navigation menu is in my Site.css in my theme, is this considered bad practice?
I eventually got this done in orchard 1.5 by overriding the Menu.cshtml view, coding some logic to check the number of menu items and then rendering navigation menus with different ID's, based on the number of menu items they contained. I then added different CSS selectors in my Site.css, each with CSS suitable for navigation menus of various sizes. Here is what my Menu.cshtml ended up looking like (this goes in the Views folder of your currently active theme).
#
{
Script.Require("jQuery");
var tag = Tag(Model , "ul");
var items = (IList<dynamic>)Enumerable.Cast<dynamic>(Model.Items);
}
#{//if the menu contains 3 items, render a nav called 'ThreeItemNav'
if(items.Count == 3){
<nav id="ThreeItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
else if(items.Count == 4){
<nav id="FourItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
else if(items.Count == 5){
<nav id="FiveItemNav">
#tag.StartElement
#* see MenuItem shape template *#
#DisplayChildren(Model)
#tag.EndElement
</nav>
}
}
//Include the jQuery to add animations to the navigation menu
#using (Script.Foot())
{
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
//Add your script here
$(" #FiveItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
$(" #FourItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
$(" #ThreeItemNav li").hover(function () {
//Do something when the sub menu list items are hovered....
});
});
//]]>
</script>
}
Note that you need to add CSS selectors in your theme for each nav element (ThreeItemNav, FourItemNav and FiveItemNav), for example in your current themes Site.css:
/*Style the Three Item Navigation menu*/
#ThreeItemNav li
{
background-color:#263A79;
}
#ThreeItemNav a:hover
{
border-right:1px solid #333;
border-left:1px solid #333;
}
#ThreeItemNav > ul li.current
{
background:#5882FA;
}
/*Style the Four Item Navigation menu*/
#FourItemNav li
{
background:#Purple;
}
#FourItemNav a:hover
{
background:Orange;
}
.........more styles
This certainly seems like a long winded approach, but it's the best I could think off so that I can maintain the functionality of the Orchard navigation menu and still style it with CSS and add jQuery animations. I figured an initial development cost was worth adding some powerful capabilities to the navigation menu in the long run. I'd love to hear any suggestions on how to do this in a neater way. Also I would definitely recommend using Orchard 1.5, since it has built in support for creating hierarchical navigation menus.
Checking out the inner workings of Menu.cshtml and MenuItem.cshtml views help a lot in trying to understand how the navigation menus are rendered in Orchard as well as inspecting how the default Theme Machine styles the navigation menu and its various levels/sub menus.
I tried to disable unnecessary context menu when I set a grid with ContextMenus. By default, if you click the blank part of the grid, it disables the Delete menu.
However, after adding customized menu like Download, it shows in the context menu even there is no selected item (i.e., How can I download it?). So I want to disable the unnecessary menu or make it invisible except in the grid row context menu.
I'm using telerik ASP.NET AJAX contorl 2009 Q2.
Thanks in advance.
This piece of code should help - basically what you need to do is attach a handler to the menu showing event, check the target element (the element where you right-clicked) and if it is the grid area itself - disable the menu item.
<script type="text/javascript">
function OnClientLoad(explorer)
{
explorer.get_gridContextMenu().add_showing(disableItem);
}
function disableItem(sender, args)
{
var target = args.get_targetElement();
if (target && target.className == "rgDataDiv")
{
var dlItem = sender.findItemByValue("download");
dlItem.set_enabled(false);
}
}</script><telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" OnClientLoad="OnClientLoad"></telerik:RadFileExplorer>