I was working with extjs 4 where i created the menu panels using singleton pattern for number of toolbars and it work well, but when i moved my application from extjs 4 to extjs 5 it stop to work, means the menu panel get hidden when mouse move over it. I have created one sample example on fiddle please give me some solution over this problem.
fiddle link: singleton menu panel example
Thanks,
Sandy
In Ext JS 5 menus seem to be linked to their owner components (e.g. button) and cannot be shared between owners. This is why, in your example, the issue happens on the 1st and 2nd panel only but not the last one (3rd) — its button becomes the "legal" owner of the menu and hence it works fine under there.
There is actually no need to share the menu in your example. Instead of repeating the same code three times, leave just one docked toolbar, use the menu in only one place and make it all smarter. See example: https://fiddle.sencha.com/#fiddle/s1b
UPDATE
If sharing the menu between buttons is a requirement, it can be achieved by using custom button that forcibly makes sure that its menu belongs to itself on each menu show request:
Ext.define('SharingMenuButton', {
extend: 'Ext.button.Button',
alias: 'widget.sharingmenubutton',
showMenu: function() {
if (this.menu.ownerCmp !== this) {
this.setMenu(this.menu, false);
}
return this.callParent(arguments);
}
});
See your example working with that in place: https://fiddle.sencha.com/#fiddle/s1g
Related
I remove 2 of the 3 panels of the leftPanel by using disableElements:
setQuickBarPanelContents() {
this.instance.disableElements(['notesPanel', 'notesPanelButton', 'outlinesPanel', 'outlinesPanelButton']);
}
One of the removed panels is the default active one, so when leftPanel is now activated, the remaining panel(thumbnails) isn't active by default and shows up blank with the button on top. You need to press the button to activate and see the actual thumbnails in the panel.
I can't seem to find any way to (default) activate this panel through the PDFNet API. Am I overlooking something or is this a bug?
The API you'd want to use is setActiveLeftPanel: https://www.pdftron.com/api/web/WebViewer.html#setActiveLeftPanel__anchor.
In this particular case you can call instance.setActiveLeftPanel('thumbnailsPanel').
I'm new to Semantic UI and I want to implement following menu as seen in Semantic UI's documentation on right side. I want to implement this functionallity to fixed top menu - so when id of header element is reached, active element in menu should be changed. I was looking at code of docs.js where this is implemented for documentation's site, but this code is pretty complex if you are using Semantic UI for the first time. I have those classes for my menu: ui large top fixed hidden menu
Is there already built-in following menu (probably not since it's not mentioned in docs?) or I add it with jQuery?
semantic-ui only gives you the styling. Once you click on a menu item, it is up to you to update the item's active status.
This is how we have it implemented in our code -
const menuNav = $('.ui.menu.menu-component .item');
menuNav.on('click', function (item) {
menuNav.removeClass('active');
$(this).addClass('active');
});
The other thing to remember is that you need to check the URL on page load so that you can set the appropriate item label to active.
Question 1: I am wokring with tiny MCE 4 and have this bit of code
editor.addMenuItem("item1", {
text: "Name",
onclick: function() {
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
As you can see I am passing in a setting object where the fields text and onclick is set. Also if you look at the example here it uses a setting object with the field text, context, and onclick. But when I look at the documentation for settings attribute I do not see context, or onclick listed there. I looks at the menu and button also and could see anything there. Is there a more complete documentation somewhere?
Question 2: The reason I am asking this is because I want to see if there is a settings somewhere, that I can use to change the menus, for example, in the fiddle mention here instead of additional data displaying list box, I want the menu item used to display list box to be replaces with a textbox/dropdown.
In the example that you mentioned it is already explained that the context is where to you put your new menu item in the existing menu (Example configuration of a menu here). So if you have an context "tools", you can add you new menu item to "tools".
editor.addMenuItem("item1", {
text: "YourItemName",
context: "tools",
onclick: function() {
//The function of your menu item insert some content at the cursor position, is that corrent?
editor.insertContent("<span id='Name' contenteditable='false'>[Name]</span> ");
},
});
For your first question: No, at the moment the documentation of tinyMCE 4.x is still not complete. To learn more about how plugins (menus and buttons incl.) work, I downloaded the complete source code. I looked at some plugins (e.g. link plugin) and tried to understand the code there. At the moment the fastest way to learn some not-well-documented stuff.
For your second question: If you want to edit existing menus (or plugins), you have to download the dev-code and look the sources.
I'm using the 0.3 version of the jQuery jCarousel script to display three carousels on the webpage I'm working on. Those three carousels work just fine.
The trouble is : you can't use them properly using the keyboard.
If you tab through the page, the focus goes to the first link of the first item in the carousel, even if this item is not visible ! (For example : click on a "next" link in one of the carousels, then use the tab key to browse : the focus will go to a link which is not visible inside of the carousel).
If you keep using the "tab" key, the focus will successively go to all the links of all the items in the carousel.
Instead of that : the focus should go to the first link of the first visible item ; then, if the last link of the last visible item is reached, then the focus should go out of the carousel (the next link outside of it, in fact).
A solution could be to use tabindex... but some parts of the page are shared with other pages of the website, so I just can't use tabindex in all the links of all my pages...
Instead of that, I had tried things like this :
$("#carousel-editos li a").focusin(function () {
$("#carousel-editos li.jcarousel-item-first .post-title a").focus();
return false;
});
but then it prevents any further use of the "tab" key...
I hope this is clear... Thanx for any help !
I think you need a combination of the answers that you've already provided. It seems like you should be able to use Javascript to dynamically set tabindex attributes on the HTML that you need to be tabbable (heh, new word). I'm thinking of something like this:
On page load, find all visible items in the carousel. Use jQuery to set the tabindex property for each item that you want in the tab cycle.
Assign tabindex properties to all other links on the page that you want to cycle through.
Add some jQuery to modify the tabindex attributes when the user changes the items in the carousel (click the next/prev buttons).
It would be much easier to help you if you made a simplified example in jsFiddle.
On the carousel createEnd and scrollEnd functions you can reset the contents of .jCarousel so that only the visible carousel items are "tabbable". I have done that in my code as follows:
var bannerSlider_scrollEnd = function(event, carousel) {
var $carousel = carousel.element(),
$items = carousel.items(),
$bannerContent,
$visibleItemsContent = carousel.visible().find('.bannerContent');
$items.each(function (index) {
$bannerContent = $(this).find('.bannerContent');
disableTabbing($bannerContent);
});
reenableTabbing($visibleItemsContent);
$visibleItemsContent.find(':focusable').eq(0).focus();
};
The disableTabbing($container) and reenableTabbing($container) lines refer to helper functions I coded into my site which basically find all :focusable elements in a given container and set the tabindex to "-1", then "0" respectively.
After this processes, users will be left tabbing only through visible carousel items instead of all carousel items.
I have asked question about these two menus before, but the subject was a bit different, for now, all i want is to upgrade the previous code written here: accordion, tab menus, assign select class for both so that the class open_menu doesnt disappear after i click the link in it's sub menu, u can easily understand it from this script: http://jsfiddle.net/bq6tA/11/ in comments i tried to reply the man who wrote this script, but he didn't reply, but i really need to modify this script, right now, and thx for help everyone!
btw, if i refresh the page, the classes are assigned ok, once i click the sub menu link, the class open_menu for top menu link disappear.
Line 86 of tabcontent.js is looping through every item in your list structure and removing all styling classes if they're not the currently selected item:
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
Add an additional click binder to reapply it for each lowest level item:
$("ul.reset a").click(function() {
$(this).closest("ul").siblings("a").addClass("open_menu");
});
See a working demo here.
Can you simply remove the .removeClass('open_menu') from the code?