Expand Element, Close button and remove arrow - css

I am trying to display a expand button on my wordpress site. I currently have:
[expand title="<img src='http://homeofdrone.com/wp-content/uploads/2016/11/Read-More-Button.png' />" tag="div" alt="continue button" notitle="true" trigclass="my_center_class"][/expand]
This creates the button and centers it, GREAT! However it still displays the arrow on the left hand side, and the button remains. How do I make it so the arrow on the left isn't showing, AND when the button is clicked and the content is expanded, to hide the button so the content is there until the page is reloaded :)

Related

Generate box shapes on click, if there is no empty space left disable button

I am trying to make a game where with a click of a button I generate random boxes. If there is no space left for another box, the button should be disabled.
CodeSandbox link: codesandbox.io/s/still-wind-w0dygo
Thanks!

How to change the color of a text in a button, when the cursor touch the button?

I have a problem with a specific button of my site.
In the bottom of the site, there is a button with text "Click here to contact us".
When i touch the border of "Click here to contact us" button the color of the button become white and the text, stays white, as a result someone could not see the text. To appear the text (with purple color), i must touch with cursor the text.
My question is how to make the code, so when touch with cursor the button (the color of the button becomes white), to change automatically and the text "contact with us" (the color of text to become purple)?
Thank you in advance!
On popup short code you can see similar like like this
[popup_trigger id="custom" custom_id="eee" tag="H5" classes="greet-text" do_default]
Click here to contact us![/popup_trigger]
remove tag="H2" & classes="greet-text"
It will look/Work like other pop up buttons.
Later you can adjust that button with div#contact-information selectors.

A-Frame "start experience" button

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

Semantic UI Modal fixed position

I am using Semantic UI 2.1. I have a modal which displays pictures. The pictures are varying sizes. I then have nav buttons to move back and forth between the pictures. The modal wants to keep resizing/recentering itself as I move through the photos. What that means is the navigation buttons keep moving up and down so a user can't just click, click, click to move through the photos. They have to click, move mouse, click, move mouse, etc.
Is it possible to have the modal fixed to the top? I am happy for it to resize but at a fixed top position. That way the nav buttons will stay under the user's mouse cursor.

Can watir-webdriver click a css background-image or at an arbitrary position in the browser?

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.

Resources