How to make a clone of html element in _hyperscript?
For example, I want to see a copy of a button after clicking on it. Something like:
<button _="on click put me after me">Test</button>
If you want the hyperscript to work for new nodes I currently do something like this:
<div id="test123">
<div _="on click log 'Test' then put my outerHTML after me
_hyperscript.processNode(#test123)">Copy Me</div>
</div>
<button _='on click put my outerHTML after me'>Test</button>
However, only clicking the original button produces a copy this way.
Related
For example, I was using this:
<button onclick="editor.chain().focus().toggleBold().run()">
But I got the solution from the kind folks on the discord server.
For the menu item, specify type=button (otherwise browser might think it's a submit button type)
<button type=button onclick="editor.chain().focus().toggleBold().run()">
Using simple HTML code, no JavaScript, nothing fancy, I use this HREF
Click here
Clicking on the link in IE, FireFox, Edge does open a new tab for https://www.example.com on click. In Chrome (version 79), the click just redisplays the current page.
This happens on Chrome desktop and phone (Android). There are no add-ins to my installation of Chrome; no popup or ad blocking installed.
Why doesn't Chrome open a new tab when target="_blank" is used? Thanks.
Added
The issue seems to be with an HREF being inside a FORM element. The FORM element is as follows:
<form action='' method='post'>
An HREF with target="_blank" outside the FORM element works properly. Just not inside the FORM element.
But still puzzled as to why that would be the case...and for a workaround or solution.
Added more - plus code
There's a button inside the form, and the button contains an image, and the link in the button will not open up a new tab.
Simple form with the button
<form action='' method='post'>
<p>inside the form</p>
<p><button><img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' /> that's a button</button></p>
<p><button>that's a button </button></p>
</form>
So, with even further testing, the click to open a new tab won't work in Chrome when the HREF is wrapped around an button with an image inside a form. But works in FireFox and Edge.
Why?
There are four image/buttons inside the form. The fourth one is the HREF/blank. Items 1-2-3 are form submittals; values need to be passed to the form processing page. The 4th item doesn't need to be processed by the form, but it is inside the form so that all four items will be on the same line. If I place the 4th (HREF/blank) outside of the form, then the 4th item is wrapped around to the next line.
a
The <button> tag cannot be opened in a new tab the same way an <a> does.
You can use this instead:
<p>
<button onClick="window.open('https://www.bklnk.com/B004RVZRL0');">
<img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' />
that's a button
</button>
</p>
I am using the Firefox webdriver for Selenium to scrape a webpage that looks to be rendered with React on the client side. The classes in the rendered DOM look dynamically generated, and seem to change with every new request. There are also many button elements on the page, some of which are not in the viewport. So my strategy is to search for a way to click on a button that contains text that I enter using selenium. Several buttons will contain the text, and I want to just find the first such button.
Using selenium/xpath, how would I select the first button that contained the text E9 1QJ?
<button>
<div><svg ...> </div>
<div>
<div>London</div>
<div>E9 1QJ</div>
</div>
</button>
<button>
<div><svg ...> </div>
<div>
<div>London Foo Bar</div>
<div>E9 1QJ</div>
</div>
</button>
Thanks
This should work:
{driver}.find_element_by_xpath("//button[div/div[text()='E9 1QJ']][1]")
But keep in mind that a solution like this it is not very flexible and could break with a minimum change in the html structure.
Below is the html code when I inspected the 'Submit' button. When I inspected with firebug, it came like this,
.//*[#id='step-content-2']/div/md-step-actions/button[2]
But the #id='step-content-2' keeps on varying which is difficult for me to find the right xpath
Below is the inspect element code when i clicked the 'submit' button
<button class="md-primary md-raised md-button md-ink-ripple" ng-transclude="" type="button" ng-click="submit()">
<span> Submit </span>
<div class="md-ripple-container" style=""/>
</button>
//span[contains(text(),'Submit')]
You can use this XPath for clicking the submit button:
//span[normalize-space()='Submit']/parent::button
This XPath will always be unique.
If you visit www.arbetsformedlingen.se from a mobile, you will find a menu.
If you open that menu, you can only access items within that menu since tapping outside of the menu will close the menu.
If you for some reason are using a keyboard, you cannot tab out of
that menu.
However, visitors who uses the screen reader VoiceOver in IOS can simply move out of that menu by using the swipe left/right gestures to access the previous/next object in the DOM.
Question: Is there some way to prevent those users to access objects outside of the menu when the menu is visible?
An unsuitable solution due to the CMS would be to place the main content and the menu on the same node level, like in the simplified code below:
<body>
<div class=”maincontent” aria-hidden=”false”>
// Main content.
</div>
<div class=”mobilemenu” aria-hidden=”true” style="display:none">
// Menu.
</div>
</body>
When the menu is opened, the aria-hidden and display:none are toggled in order to just show the page contents or the menu.
Another unsuitable solution would be to toggle aria-hidden to every other object when the menu is opened, but that is impossible due to performance issues.
So, any piece of advice, thoughts etc are very welcome!!!
Using HTML5, you can set the "tab-index" to positive numbers on the elements within the menu. This will set focus to those elements. `
<div class="menu-container">
<div class="menu">
<div tabindex="1">Menu Item 1</div>
<div tabindex="2">Menu Item 2</div>
<div tabindex="2">Menu Item 3</div>
</div>
</div>
This may not be the best solution depending on what your trying to accomplish and what your code structure looks like.
You'll want to be sure to use the "tab-index" attribute correctly as to not break accessibility.
Good description and example
WebAIM-tabindex-accessibility