Close button is not working in the lyte box,while the link is working but i want button instead of link there by i can easily apply css to my button.
thank u
Your question is hard to understand, but by the sounds of it you want to style the close 'button' with css. You say the link still works, do you mean there is a link with the text 'Close'? If so then there is probably a problem with your image linking. Either way you can still style that link it has the id 'lbClose'.
a#lbClose {
}
You are correct, the lytebox close button is not a real button but a hyperlink. To use a button instead of a link, you would have to change the lytebox code (Which you most certainly can). Or, you could set the close button to not display (there is a property you can set to false in the lytebox.js: this.showClose) and in your iFrame code add a button to do whatever you need it to do.
Related
I am working on a UI automation project. I have to fill details in a form and click on 'Save' button. Once save button is clicked in manual flow, it turns grey and disabled. And after that a pop-up emerges to confirmation.
But when I run automation script to hit 'Save' button, script hits the button but it doesn't turn grey and still enabled. And I don't see any confirmation pop-up.
I tried lots of solutions for clicking 'Save' button, some of them are listed below but nothing works
cy.contains('Save').click()
cy.contains('Save').click({force:true})
cy.contains('Save').focus().type("{enter}")
cy.get('button span.MuiButton-label').contains('Save').click({force:true})
cy.get('span.MuiButton-label').contains('Save'). then($btn => {
cy.wrap($btn).scrollIntoView().click({force:true});
})
I am also attaching html for 'Save' button
I would be really thankful, if you please help me in finding solution for it.
What I can see from the image is the button contains some span and other empty elements if you can give the button an id this way you job would be much simpler
cy.get('#form-btn').click()
if not then treaverse from the main-content to the form then to the button
cy.get('#main-content').get('form').get('button').click()
Add data-cy="save" to your button and
Do this:
cy.get("[data-cy=save").click()
You can directly use the button text and click on it.
cy.contains('Save').should('be.visible').click({force: true})
If you have shadow DOM in the HTML, turn on includeShadowDom either in global config or in the test config.
Target the button in the cy.contains(). cy.contains('Save') will target the label, but that may not be clickable:
it('fills form', {includeShadowDom: true}, () => {
// fill form fields
cy.contains('button', 'Save').should('be.enabled').click()
})
All of the above answers were correct.
Additionally, you also want to check the colour change after clicking on the Save button. So you should have to check the CSS file and check the colour. I'm assuming here the button has some property color and you have to just use that HEX code for the colour. I used Charcoal colour as I don't know which grey shade your app used.
cy.contains('Save')
.should('be.visible')
.click({ force: true })
.should('have.css', 'color', 'rgb(54, 69, 79)')
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
I use 2 ng-click to try to do a toggle effect. first one bind to says a button, the other one used on body tag. I expect when I click the button my stuff shows up and when I click anywhere on the body, my stuff hide.
But angularjs seem unlike jquery.
http://plnkr.co/edit/KG4b9B1gac53a8JkRBvu?p=preview
What is the approach to achieve that?
the poblem here is, that clicking the button also triggers clicking the body. here a plunkr to show what i mean.
you could add your click event to the body after clicking the button.
Sorry for the strange title question.
I am wondering how to do the following:
When a user clicks on the blurred out textarea through onfocus, it will display: block the div around it, displaying a "textarea console" and then a "add step" icon beneath the textarea. If you click out, it will blur the textarea along with two extra items.
However, what I would like to add is, if they click either the "textarea console" or the "add step" icon, the div will not blur out.
Here's what I have so far at jsfiddle.net
I've updated the jsFiddle: HERE
I think it was just a few things wrong...you were on the right track.
$("#textareasteinstruc").focusout(function() {
alert('focusout');
$(".textareaconsole").hide();
$("#addPrepStepButtonicon").hide();
The # was missing from focusout function...and classes/IDs were not referenced properly.
It's working the way you want it now I'm thinking :)
UPDATE: I added the $("#addPrepStepButtonicon").show(); to the click event so the 'submit' button will appear again
Check this one http://jsfiddle.net/wAaDz/13/ . Have made changes.
I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);