how to hide panel of a dojo splitcontainer / bordercontainer? - javascript

How to hide splitcontainer pane programmatically. I have 3 panels. i want to hide show one panel on press of a button. how to do that ? Don't want to destroy it.

Use SplitContainer's addChild() and removeChild() methods:
splitContainer.removeChild(contentPane3); // to hide pane
splitContainer.addChild(contentPane3); // to show pane
Follow my jsFiddle to see and play with working example including toggling of panes.
Also please note, that SplitContainer is deprecated and you should use dijit.layout.BorderContainer instead. Set data-dojo-props="splitter:true" to enable drag-n-drop resizing.

Related

Activate specific panel in leftPanel in PDFNet Webviewer

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').

jQuery Tooltip - close tooltip dialog without hiding the textbox

I trying to close any open jQuery tooltips which are open.
When I use $(".selector").tooltip("close"), nothing happens.
When I use $(".selector").tooltip().remove(), it removes the tooltip but the textbox also disappears.
Is there a way to just remove only the tooltip dialog?
NOTE: If a user select the text in a textbox and drags the mouse, the tooltip window remains open, that is why I am trying to force-close it.
My believe is that you are removing the element. I will suggest to hide the tooltip with its option hide.
$('#element').tooltip('hide');
https://api.jqueryui.com/tooltip/#option-hide
Can also use the option close if you actually wants to hide/close the tooltip instead of removing it.
$('#element').tooltip( "close" );
https://api.jqueryui.com/tooltip/#option-close

Ext 4 ComboBox custom trigger

I need to customize the trigger in Ext 4.2 ComboBox . I need to customize the icon to Magnifying glass and to be able to switch the icon to X icon as I start typing.
Can someone give me an example of how it's done ?
Thank you !!!
Ext.form.field.ComboBox has two methods: expand and collapse which are called when the field's picker are expanded and collapsed, respectively. Since the icon is set in a CSS class, it seems like you could pretty easily swap the CSS class based on these events.

ui - accordion does not work after empty() and append()

I have Four DIVs and I call accordion function to it. It works fine initially. But it fails after I clear all the content and again append the FOUR DIVs.
Kindly take a look at the link
http://jsfiddle.net/p7vUk/2/
You will see that on clicking divA , divAA will slide toggle.
on clicking divB, divBB will slide toggle.
After you click the 'clear all' Button, the div=content is cleared and same four DIVS are appended, but the jquery accordion fails to work.
The accordion styling and behaviour is defined upon creation. Looks like the accordion does not update when the content changes. Nor does there appear to be a method you can call to trigger an update.
Have you tried 'turning it off and on again'?
//change content, then:
$("#content").accordion("destroy");
$("#content").accordion({ ... your options ... }); //create it again
This may require more related work, such as setting the originally selected tab, etc.

jCarousel with keyboard : wrong focus using the tab key

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.

Categories