I have a pop up window that appears on the page randomly. Usually about 20 seconds after I go on a page.
<div class="bluecoreActionScreen" id="bluecoreActionScreen">
<form novalidate="novalidate" class="bluecoreEmailCaptureForm" id="bluecoreEmailCaptureForm" name="bluecoreEmailCaptureForm">
<div class="commonScreenElement" style="width: 550px;height: 500px;display: block;background-color: #181a1cfc;">
<<<< OTHER HTML >>>>
</div>
</form>
</div>
Is the best way to deal with this just to wait for the selector to appear and then click it off?
Or would is there another way to deal with dialogues (popups).
await page.waitForSelector('.bluecoreActionScreen');
Then click it off?
You can use waitForSelector like this:
await page.waitForSelector('.bluecoreActionScreen')
and then remove the element by CSS or DOM after that:
await page.evaluate(() => {
let popupElement = document.querySelector('.bluecoreActionScreen')
// BY CSS DISPLAY NONE
popupElement.style.display = 'none'
// OR BY REMOVE THE ELEMENT DOM
popupElement.parentElement.removeChild(popupElement)
})
Related
I am currently working on the accessibility for the React modules at our company.
Although I am just a hobby webdev I would still really like to solve this.
What's going on is:
We have a module with 6 steps, after clicking a next button it should hop to the top of the next step after being mounted, this does not seem to work in any kind of way and it keeps focusing the body.
What I've tried:
I have made use of useRef() and when I log the referred element it
works like it should, but when I use focusRef.current.focus()
nothing is happening.
In document.activeElement within the console it shows body as the active element after the new element is mounted.
NerdeFocus (a focus plugin) also shows the body as focussed
I also tried just selecting the element with document.getElementById("focusRef") with no result
The code of step 1:
export default function Step1(props) {
const focusRef = useRef();
useEffect(() => {
focusRef.current.focus();
}, []);
const {
reservationItems,
setStep,
setSelectedReservation,
step,
setAddresses,
setSelectedAddress,
} = props;
const classes = useStyles();
function onSelectReservation(reservation) {
setSelectedReservation(reservation);
setStep(2);
}
return (
<>
<Typography variant="srOnly">
Stap 2, kies waar u wilt reserveren
</Typography>
<h1 ref={focusRef} className={classes.title}>
Kies waar u wilt reserveren
</h1>
<div className={classes.addressButtons}>
{reservationItems?.map((reservation, i) => {
return (
<div
key={i}
className={classes.addressButton}
onClick={() => onSelectReservation(reservation)}
>
<span>{reservation.Description}</span>
<span>
{reservation.Street +
' ' +
reservation.Housenumber +
' ' +
reservation.City}
</span>
</div>
);
})}
</div>
<Button
className={classes.buttonPrev}
variant="contained"
startIcon={<KeyboardArrowLeftIcon />}
onClick={() => {
setStep(step - 1);
setAddresses([]);
setSelectedAddress([]);
}}
>
Terug
</Button>
</>
);
}
I hope someone can help me with this issue, thanks in advance Tom.
I can't speak to the React side but in general with single page applications (SPA) when you go to the next step, you want to move the focus to the new heading on the next step. It sounds like that's what you are attempting to do.
With non-React applications, this works fine. Perhaps there's a timing issue with React? Does the element you're trying to move the focus to exist in the DOM when you call focus()?
In some browsers, you can't move the focus to a non-interactive element unless that element has tabindex="-1". I didn't see a tabindex in your sample code so perhaps that's the issue.
For example, if I have:
<h1 id="myID">Step 2 of the process</h1>
and I try to call
document.getElementById('myID').focus();
some browsers will not move the focus to the heading. But if I change my HTML to:
<h1 id="myID" tabindex="-1">Step 2 of the process</h1>
then it works.
I have a lot of divs, they are the same but the data are differen(I use variable(array of objs) and for loop) but these details aren't important
<div class="item_wrapper">
<div class="item_wrapper_info">
<div class="left-line"></div>
<div class="subject">1</div> <== click here
</div>
<div class="additional_info"> <== display this block
some text
</div>
</div>
I want to achieve this:
If I click .item_wrapper_info div then I want to show .additional_info div
It should be probably done using this keyword.
If I click . item_wrapper_info block I want to find a div with the class name of . additional_info and make display = flex but I don't know how to trigger exactly its . additional_info div.
Probably I can click on .item_wrapper_info > . subject and then show its next neighbour
SOLUTION:
$(document).ready(() => {
$(".item_wrapper").click(function(){
var index = $(".item_wrapper").index(this); get index of a certain clicked .item_wrapper element on my page
$('.additional_info').eq(index).toggle(); using .eq toggle that certain element
});
})
It works for me
I haven't tested this code. Feel free to test it in a runnable snippet.
$(document).ready(() => {
$(".item_wrapper").click(function () {
var index = $(".item_wrapper").index(this)
$('.additional_info').eq(index).css("display","flex");
});
});
I have a div with some text and I want when the cursor is hover this div to select the text. If I let this div as it is, when trying to select all (CTRL+A) then I select all page content, meaning all body text.
To get rid of this, I need to use contenteditable attribute for this div.
But I don't want to let people to change the text / copy / cut and so on
I try to use readonly for this div, but doesn't working.
Any advice please ?
PS1: This div has also other tags inside (html content), but I don't think that this is a problem.
PS2: An example is here: jsfiddle.net/msakamoto_sf/wfae8hzv/ - but with a problem. You can cut the text :(
Use event.metaKey in the keydown event to check if ctrl (or cmd on mac) keys are being pressed. You also have to disable the cut and paste events.
<div
contenteditable="true"
oncut="return false"
onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;">
content goes here
</div>
You can prevent the user from cutting by handling the "cut" event and calling its preventDefault() method. This will prevent cut with any user input (including the browser's context menu or edit menu), not just via a particular key combination.
This example uses jQuery because your jsFiddle uses it:
$("#editablediv").on("cut", function(e) {
e.preventDefault();
});
set contenteditable to false and it should work !! that simple.
use contenteditable attribute for div to make it editable or not
and use readonly attr for form input elements.
<element contenteditable="true|false">
<input readonly="readonly" />
Here's an example in React, but it would work with basic HTML and JavaScript as well because I'm just leveraging the default events.
// import CSS
import './DefaultSettings.css';
// import packages
import React, { Component } from 'react';
// import components
const noop = (e) => {
e.preventDefault();
return false;
};
class DefaultSettings extends Component {
render() {
return (
<div className="DefaultSettings"
contentEditable={true}
onCut={noop}
onCopy={noop}
onPaste={noop}
onKeyDown={noop}>
</div>
);
}
}
export default DefaultSettings;
To prevent ctrl + x (Cut) from div you need to use following JQuery :
if (event.ctrlKey && event.keyCode === 88)
{
return false;
}
It will prevent to cut text from div.
Check Fiddle Here.
on user id condition set contentEditable="false"
for JavaScript,
document.getElementById(divid).contentEditable = "false";
this will work
I'm new to Angular but I'm trying to implement a textbox that allows users to enter in links. I only want to support links, and otherwise I want to block all html from being presented as such. I could theoretically use something other than a textarea, but my requirements are that it must be bound to a variable in my scope (right now with ng-model) and I cannot accept html tags other than '< a >'
Here is my example plnkr
In the example, I would like the second seeded item to display as a link, blue and underlined. However, the third item should display as it is currently shown (without interpreting it as html).
HTML:
<textarea maxlength="160" ng-model="val.text"></textarea>
<div class="btn" ng-click="submit()">Submit</div>
<br><br>
<div ng-repeat="item in items">
{{display(item)}}
</div>
JS:
$scope.submit = function() {
if (!$scope.val.text) return
$scope.items.push($scope.val.text);
}
$scope.display = function(txt) {
return txt;
// something here? if txt contains <a> and </a> indicate
// that we should display as html
}
I have a little issue with mootools 1.4 and interaction between multiple separate elements. I have a menu like this :
<div id="links">
<a class="readmore" href="#1" title="1">Read More</a>
<a class="readmore" href="#2" title="2">Read More</a>
<a class="readmore" href="#2" title="3">Read More</a>
...
</div>
And an other element like this :
Code PHP:
<div id="content">
<div id="1">Lorem Ipsum</div>
<div id="2">Lorem Ipsum</div>
<div id="3">Lorem Ipsum</div>
...
</div>
Both are the same length (each link of the menu have a correspondant div element). What I need to do is to create a listener on each menu link so when it’s click it display the div. And that’s where my problem is because for the moment I use the title of the menu link to open the div that have the same ID. I don’t think that is the most performant, maybe I can do all this in one loop with the index ?
Other little question (not as important at all) : How to put add the same event on 2 element in one line of code (to avoid the multiplication of line of code to do exactly the same thing if the user click on different button) ?
Thanks a lot !
several things can be done.
- event delegation
idea: attach a single event to parent of menu items which fires dependent on the child el that has matched the event condition
so:
document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
var id = element.get('title');
// do something.
});
downside is that you need to read the id but you can remove the ids from the target els if they are in the right order.
(function() {
var els = document.getElements('#content div');
document.id('links').addEvent('click:relay(a.readmore)', function(event, element){
var id = element.get('title'),
hint = els[id-1];
showHint(hint);
});
}());
that's about it. less events attached.
- looping to attach the events has a reference to index, which will match target
(function() {
var els = document.getElements('#content div'),
clickHandler = function(trigger, target){
};
document.getElements('#links a').each(function(element, index){
element.addEvent('click', function(event) {
event.stop();
clickHandler(this, els[index]));
});
});
}());
upside to that is, you don't need ids on hint els and no title tags or anything on source. downside, each link has its own click event.