Pop Up Menu onclick BottomBar Button Windows 8 Metro App - javascript

I want to have a popup menu once I click bottom bar button in windows 8 app, and pop up menu needs to be a multi-select, so that user can select multiple options and based on that I will need to refresh main screen. I need to implement this using Html and JavaScript.
Thanks.

The easiest option is probably to show a Flyout control from an AppBar button. The Flyout will let you compose the form you need (within guidelines), but something like a ListView with multiple select enabled might be what you're looking for.
See the HTML Flyout Sample to get started (scenario 6 shows a Flyout from the AppBar).

the better option will be using SettingsFlyout
<div data-win-control="WinJS.UI.SettingsFlyout"
aria-label="App Settings Flyout"
data-win-options="{settingsCommandId:'defaults',width:'wide'}">
make your custom html layout and then call it on button click event
WinJS.UI.SettingsFlyout.showSettings(ID,Path );
you will find the references here:
WinJS.UI.SettingsFlyout object
sample application : App settings sample

Related

Call a javascrip function in a button's link option from Divi (wordpress theme)

First of all, thank you in advance for any help you can give me.
I'm not a coder, at all.
I'm a photographer (https://lucky4shop.pt/portfolio/) that just happens to know a bit about Wordpress websites and can read css/html but I don't know how to code in any language.
That said, here's my problem...
I'm creating a Wordpress website with the Divi theme/builder for a restaurant that has 2 locations.
On the homepage, I created a button that activates a popup using a plugin called "Popups for Divi" that basically takes a section created by Divi Builder and makes it a popup.
The popup shows 2 buttons that come from an online ordering system called GloriaFood, each button for each restaurant.
The buttons are implemented through a shortcode.
When the user clicks one of the buttons, it shows the Menu that is created in GloriaFood but the popup doesn't go away unless the user clicks on the "X" to close it.
I'm trying to find a way for it to close automatically when the user selects one of the restaurants.
Divi Builder has an option to add a link to the code area that is created through the shortcode and I know that the popups plugin has a "hide function but I don't know how to implement that upon the action of a button click.
I'll leave some links here to relevant information:
How the button is added: https://www.gloriafood.com/restaurant-ideas/add-online-ordering-button-wordpress
Functions of the popup plugin: https://divimode.com/divi-popup/ (you have to scroll down to find them)
Screenshot for the shortcodes
Link option on the builder
Advanced options of the "Code" Module, in case this helps

Simulate click in web.whatsapp.com

My mission is export my whatsapp contacts with profile picrures.
So I decided to make a chrome extension for this purpose.
And Here to collect phone of each I have to click them. And each time go back to contact list I guess. The button I got a problem to click on by javascript code is
I need to click on this button by code and get full contact list
I can find this elem by query like
$('.menu-horizontal span .menu-horizontal-item:nth-child(2)')
But when I tried to click on this element - nothing happens
$('.menu-horizontal span .menu-horizontal-item:nth-child(2)').click()
Any ideas... please!!!!. I just need to open contacts panel each time!!
I have added and used jquery but It's ok to use vanilla JavaScript
I'm using simulating click function in my extension - https://gist.github.com/davojta/3647dfbf006bec75f6ef7e3f8d2f3e70

Run a Shortcode from a Button in Visual Composer - Wordpress

This should be a fairly obvious thing to be able to do. I have a plugin that has a modal newsletter signup form. I am very happy with the plugin and it has a number of options for the way it launches (after x seconds, when user reaches bottom of screen etc) it also has a manual launch option which gives me these following codes.
My theme uses Visual Composer. I want to launch the popup manually when a site user clicks a button on the homepage. I thought this would be simple but apparently not. The options I have with the standard VC button is shown below; I have tried numerous options of adding classes to the button but I cannot add a shortcode or class to any of the fields to launch the modal. I know there is a javascript onClick function but I'm not very good with Javascript. There must be a simple way to click a button and open a modal, maybe I am overlooking something completely obvious.
OK after reading back my question I thought about adding a custom css class to the button field Extra Class Name and it works. I thought that the extra class name here was for styling the button itself and did not realise that this would also trigger the pop-up as well. Guess I should have checked that first.

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

Showing different objects depending on user selection in menu

I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.

Categories

Resources