Exempt some elements from Modalness - javascript

My application has modal dialogs in it, and also a feedback widget that sticks off the side of the page at all times. I'd like users to be able to click the feedback widget without canceling the modal dialog. In effect, I'd like to exempt the feedback widget from the modal rules of the app.
What's the best way to achieve this? I'm using GWT 2.3, and I'm happy to drill down into whatever layer of abstraction I need to.

"Modal" popups actually don't behave well in GWT; that's why setGlassEnabled has been added. If you use setGlassEnabled, you can then simply set a higher z-index to any element that you want to appear on top of the glass pane, it's just CSS.

Looking at the PopupPanel source it appears that adding your feedback widget as an auto-hide partner will do what you want:
Widget feedback;
DialogBox modal = new DialogBox(false, true);
modal.addAutoHidePartner(feedback.getElement());
modal.show();

Related

Xpages: Refresh one component of an Xpage from another

The layout in my app has a menu on the left and content on the right. When a user selects a menu item on the left I open the correct Xpage. This is pretty standard.
I have transitioned to a Bootstrap menu on the left. Once loaded, state changes (menu selection, accordion drop downs) are handled via CSJS. So this gives me the opportunity (if possible) to refresh the content window on the right without having to submit the whole xpage again.
But I do not think you can do a partial refresh from one custom control to another.
Is there any way to do this or anyway to structure the app so I can do this?
May be you can do something with postMessage in CSJS. I have used it to do actions, like resize in a XPages when it is embedded inside a widget in IBM Connections. See the interaction in the OpenNTF project 'Generic HTML and XPages Widgets for IBM Connections', https://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-8YRN3J
More details how to use postMessage. https://davidwalsh.name/window-postmessage
Probably the easiest way is to wrap your right side contents with a panel and give that panel an id. Then when the user changes something on the left menus do a partial refresh of the panel. You might need to type in the panel id as it will not be available on the id picker in partial refresh.
Howard

Tinymce view mode switches after init

My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

How to make the Background behind Alert Box clickable?

I have a application where i make all Divs clickable by using this code :
$("html").click(function(){
alert("Click");
return false;
});
This one work normally for all divs. Well, when Alert popup, the Background behind alert box cannot be clicked. How can i turn that to be clickable too?
PS: Right Click on the Background dont work too.
Thats not possible. You have to use a JS plugin doing the alert, so you can influence the behaviour (like the jquery ui modal widget, mentioned here). But with the browser alert this is not possible, as far as i know.
Not sure how to do exactly what you're asking (if it's possible). Maybe someone else can shed some light on that.
But a solution you could look into would be the dialog widget from jQuery UI. You can easily create pop-ups, modal or non-modal (meaning with the background faded out or not).
http://jqueryui.com/dialog/
They have some demos there, but it's as simple as created a div with some text and calling...
$("#the_div_id").dialog();
Other config parameters can be found from the API:
http://api.jqueryui.com/dialog/
By default its modal popup behaviour ,If you want to clickable
Assuming you are using Jquery Ui dialog
Try with the option modal
$('#selector').dialog("option","modal",false);
http://api.jqueryui.com/dialog/#option-modal

Creating a menu inside a tabbed modal dialog (overlay)

I am going to create a form inside of a tabbed modal dialog (aka modal window, aka overlay). I am wondering which library would be best for this, if one exists at all. It is important that the dialog box have tabs. If there is a great library for creating modal dialogs without tabs but provides an easy way to add tabs, please do suggest that too.
YUI will do what you want. A bit of learning involved though. Worth the effort if you ask me. I'm sure jquery easily allows you to do the same also.

How to make a jquery popup menu

I am trying to make a Login popup window. For example, if someone clicked the login button a popup window will show and it will change the opacity of the main page and give focus to the popup window.
Here is an example of a web site that utilizes what I want to implement.
You can use the jquery dialog referenced in your post for this.
Here is an example of how to create form elements on it.
you could use jqueryUI dialog
you could also use the jQuery BlockUI plugin:
http://plugins.jquery.com/project/blockUI
I've used the Boxy plugin before, it's very lightweight (lighter than JQueryUI, although not as much functionality).
It's very easy to use, it was the first plugin I used when learning jQuery.
http://jqueryui.com/dialog/#modal-form
use this site link
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

Categories

Resources