I want to create a start experience like button on my A-Frame design. My experience needs to hide until you press a button and then it appears
Two approaches:
1) Hide the a-frame scene until a html button is pressed
This one is simple. Bring a white <div> up front (by setting up a high z-index), and hide it (display: none) when a button is clicked.
Fiddle here.
2) Hide the experience content "in-game"
This one is a bit harder. Hide the a-camera within a white sphere with a button, and hide the sphere, when the button is clicked.
Fiddle here
Related
This is happening in Safari and can be viewed here by clicking the "chat now" button in the lower right side of the screen: https://online.calvin.edu/
When you click on "chat now" button the minimize button in the chat window has a focus outline on it. I can't figure out why it defaults to having that outline applied to it anywhere in the CSS.
screenshot
When the dialog opens, the browser thinks that <embeddedservice-chat-header> has focus. You can see this by issuing the command document.activeElement in the console panel of the code inspector. If you tab through the rest of the dialog and issue document.activeElement after every tab, you'll see the focus moves to the "welcome" <div> (why?), the three <input> elements, the "by submitting" <label> (again, why?), and then the "start chat" <button>.
(The <div> and <label> elements are not interactive elements which is why I was asking "why" the focus is moving to them.)
Keep tabbing and the focus moves back to the top of the dialog. It moves to the minimize button and then the close button. However, rather than the actual <button> elements receiving focus, the <embeddedservice-chat-header> receives focus. So that leads me to think that the custom <embeddedservice-chat-header> element might have some built in javascript that is moving the focus to an internal element.
I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
I have a problem with an icon I'm overlapping over other image
Originally, the image I'm showing has a hover popover that displays information about that product, we're aggregating a new feature to mark the products for example as removed or forbidden, the problem is that when the image icon overlaps the product's then it takes the mouse over event causing that when the mouse is over it the popover doesn't display.
Adding a listener to the icon to trigger the popover would be problematic (a bit difficult and disrupts the continuity of the popover being displayed)
Is there css trick or other way in which the icon can be inhibited from taking events and letting the underlying image to throw the events, kind of making the icon "transparent" for events? (don't know if this is possible at all)
Thanks in advance!
Sample overlapped images
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.
i want to add minmun/maximum button on tabnavigator header.......how i could be possible
put the tab navigator and a button in a canvas
set the X and Y of button Y=0 and X=tabnavigator.width - button-width-10
on click of button use Resize function set HeightTo=0 and heightFrom= tabnavigator.width
then play() the resize
to restore heightFrom=0 and heightTo=previous size of navigator
then you got the illusion of minimizing ang maxizing the tab navigator.. please do add some more effects of your desire..
Hope this gives you a idea on it..
Forget how it looks at first. Create a button that simply hides the TabNavigator. I'm sure there are plenty of tutorials out there on how to animate show/hide. Once you have that, move the button where you want it and style it as you wish.
Ive never heard of a tabNavigator header, but if you mean adding buttons to the tabs themselves, then theres an example and source code you could work from with FlexLib SuperTabNavigator