i have a problem with the #click.stop in my vue application. I also use quasar and leaflet.
So in my app you can click different objects on a leaflet map. If an object is selected a q-drawer pops open. In the drawer I can click a few buttons and input fields to do some other actions.
If I click on them everything is working as intended, but if I click on the empty space of the drawer the drawer gets closed. This is because the map behind the drawer reacts through event bubbling on the click.
If I add the #click.stopto the drawer the event does not bubble up to the map, but also does not reach any buttons I wanna click...
Any advice what to do?
Related
I'm making a React website where I display popups using createPortal and my popups have buttons that take you to different popups (e.g. there's one popup where a user can confirm a session, and when they click the confirm button, another popup comes up saying their session has been confirmed). I want to create an animation where the text from the first popup slides out and the text from the second popup slides in when the button is clicked, but I can't find any suitable ways of doing so without glitches or bugs. I tried Framer Motion, but there was an issue where the components would only animate when entering the DOM, not when leaving.
Here's my component structure:
<CustomPortal> // made with createPortal
<Modal>
<ConfirmSession /> // this should slide out
<SessionConfirmed /> // this should slide in
</Modal>
</CustomPortal>
Any ideas on how to accomplish this?
I downloaded this template from themeforest: http://themeforest.net/item/-medic-medical-health-and-hospital-html5-theme/full_screen_preview/8331329
Move your mouse over navigation item "Contact" and you will see a google map. Remember position of the map. Then close contact item and move your mouse over position, where map was placed. Contact window should appear again, without opening it by clicking on Contact item. I am unsuccessfuly trying to repair this bug. Is there a way how to do it?
You can hide the maps when the menu is hidden and show it before it is showed, that will solve the bug. Do $('.map').hide() when the menu is hidden and $('.map').show() before the menu is showed
I'm developing with Ionic Framework an app where the main view is a map (working with Leaflet). And in the side menu, there are some forms in order to allow differente searches on the map (shortest path between 2 points...).
The thing is, every time I click in one of the inputs (text, checkbox...) of the forms, the side menu closes.
Is there anyway to avoid that? It is possible that the side menu only closes and shows when I tap in the 'burguer' button?
It's as simple as remove the 'close-menu' class from all the 'ion-item' elements inside the ion-side-menu
Im using a mx:MenuBar component with xml data to bring a menu. The basic behaviour as I see is, initially on clicking the top level menu item (i.e on the horizontal bar), the pop-up sub menu opens. Then without clicking anywhere, if I mouse over / roll over on the horizontal menu bar, the pop-up sub menus of the other top level menus opens up.
This behaviour seems to be inconsistent. The pop-up sub menus should open either on click of any top level menu item (horizontal menu bar) or only on mouse over / roll over of the menu bar items.
I want the pop-up submenus to open only on click of the top level menu (horizontal menu bar). So I added event handlers for mouseOver as well as rollOver events (don't know which event actually gets generated on hovering over the horizontal menu bar). In the event handlers, I called the event.preventDefault() method to prevent the default behaviour(i.e opening of pop-up sub menus). But, nothing works. I felt like, I don't have control over it.
Could anyone say how to suppress the default behaviour and open the pop-up submenus only on click event of the menu bar.
You could use "monkey patching" to redefine the behaviour of the MenuBar class. It is not easy to do it through overriding of the methods, because they are private.
Here is a working example with an active "view source" property.
The function to be rewritten is
private function mouseOverHandler(event:MouseEvent):void
{
}
One should delete the code lines, which activate a new menu.
In my metro style app (windows 8) I have created an page overlay and a flyout displaying an message. When the user clicks on the page the flyout message goes to hidden. But I want flyout to remain even when the user clicks on the overlay page. I am using HTML5 and WinJS.
Is there anyway I can achieve the above scenario using someother control or can I prevent the page to stop reacting to events when the user taps/clicks on the screen.
This is not really supported -- the Flyout itself doesn't have the concept of being persistent/sticky/modal. If you look at the code in base.js, you'll see that it doesn't expose any code to leverage the inbuilt sticky behavior that is used in the appbar (which is kinda of flyout, it turns out.
There are a couple things you can do:
Pass "_sticky: true" to the constructor of the flyout. e.g <div data-win-control="WinJS.UI.Flyout" data-win-options="{ _sticky: true}">
Attach a click handler to the top of the document, and if it's on the click eating div that the flyout creates, cancel the event
Create your own UI by simply adding a new div to the body, and absolute positioning it.