I've this functionality which allows user know when a change has been performed on an item by adding an orange dot next the item icon, so if this is a new item and user clicks on the icon a modal is displayed with a form, if any change on that form is perfomed the orange dot (which is an icon as well) appears next to the item's icon. This functionality is working with Chrome and Edge but I'm also supporting IE11, the problem is IE11 is not showing the orange dot icon when a change is performed. I reviewed the dom and the orange icon is there but is not visible until I click on the dom's element or when I click the section where the orange dot is suppose to be, in that moment the orange dot appears.
following is the original state, when I click the comment icon a modal appears with the form:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
</div>
after a change is performed I got this in the dom:
<div class="action-container">
<span class="action-comment">
<i class="comment-icon" aria-hidden="true"></i>
</span>
<span class="action-orange-dot">
<div class="orange-dot"></div>
</span>
</div>
but in the browser the result is the same:
until I click where the orange dot is suppose to be
I have the compatible meta tag but there is no difference with or without it.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
any idea?
Related
I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()
Originally I thought I have to access my class before trying to click the button.
How can I use below code to click "red trash icon"?
<div class="one wide column">
<div class="ui vertical right floated buttons">
<a class="ui basic button" role="button" href="/admin/assignments/edit/37">
<i aria-hidden="true" class="cog icon"></i>
</a>
<button class="ui basic button">
<i aria-hidden="true" class="red trash icon"></i>
</button>
</div>
</div>
The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:
cy.get('.red.trash.icon').click()
The red trash icon is the <i> element of inside the button, not the button itself.
You should perform click on the button itself:
cy.get('.button').click()
And if there is more than one button with the selector you have set you can give it a specific class or a specific id:
<button id="whatever">...
cy.get('#whatever').click()
Notice the use of # for ids instead of the dot . as a class selector.
The problem is you're using a too broad CSS selector.
You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.
For example you could select the last button with .red class like this
cy.get('button.red:last-of-type')
or the first one line this
cy.get('button.red:first-of-type')
or the X element using something like button.red:nth-of-type() { ... }
As recommended in the Cypress documentation, you should add a custom data-cy attribute instead of using generic selectors
In the code below is a website with a star rating bar. Stars can be clicked. But when I open the chrome developer console to see the javascript code, there are no button tags. Are the 5 stars considered buttons?
Isn't there supposed to be a click event listener?
When I click on a star it turns blue. How can this work?
And which part of the code is exactly the button? Is it this line?
<i class="svi-star ratingicon-full"></i>
<div class="subject-answer">
<div class="ratingbar-container" steps="5">
<div class="ratingbar-wrap" style="height: 40px; font-size: 38px;">
<div class="rating" rel="1">
<i class="svi-star ratingicon-full"></i>
<i class="svi-star-o ratingicon-outline">
</i>
</div>
<div class="rating" rel="2">
<div class="rating" rel="3">
<div class="rating" rel="4">
<div class="rating" rel="5">
</div>
<div class="input-wrapper">...</div>
</div>
</div>
(I just can not copy and paste, I have to buy another coffee first to get a new code to be able to open this website, but I hope the code part I just typed is enough for now)
On the left is the webpage with the rating bar, on the right is the corresponding javascript code (chrome dev console):
![on the left is the webpage with the rating bar, on the right is the corresponding javacode (chrome dev console)][1]
You can have click event on every html element there is. Therefore anything can be a button.
document.querySelector('.div').onclick = () => {
console.log('clicked on a div');
}
document.querySelector('.span').onclick = () => {
console.log('clicked on a span');
}
.div {
background-color: red;
width: 100px;
height: 100px;
}
.span {
background-color: blue;
color: white;
}
<div class="div">
<span class="span">this is a clickable span</span>
</div>
It's possible to create things which are not buttons which can still be clicked (any element can have a click event listener added to it), and in this case, it appears that the website has some italic elements with no contents and some styling with such associated JavaScript.
Best practice is to use semantic HTML which, in this case, would be <button> elements (or possibly <input type="radio">) as these come with all sorts of affordances (which are particularly useful for accessibility purposes as they allow, for example, an arthritic user who can't operate a mouse to navigate with the Tab key or a blind user to access the content with a screen reader).
Note that depending on your geographical location, your audience's geographical location, and the type of service your website offers: You may be legally required to ensure it is accessible.
every HTML element can have an event listener called onClick, it can be a <div> that you can click, it can be <span>, in this case, it's a <i>.
Everything is normal don't worry ;)
Make sure to add the css {cursor: pointer;} so when you hover it will show the hand :)
Comment for more UX questions.
I have 2 components in Vue.js :
Accordion header which open it's content after clicking on it.
Cog icon which open mini-modal menu.
Problem is that when I'm clicking on cog, I don't want accordion to open it's content.
Before click on cog:
After click on cog:
I thought about checking modal menu display status in Accordion (parent component) but I'm not sure it's good approach.
<i class="fa fa-cog" #click="toggleSettings"/>
<div
class="order-settings"
:class="{'order-settings__show':isSettingsOpen}">
<div class="order-settings__option"><p>Re-order</p></div>
<div class="order-settings__option"><p>Convert to subscription</p</div>
<div class="order-settings__option"><p>Download invoice</p></div>
<div class="order-settings__option"><p>Export to CSV</p></div>
</div>
Actual results: Accordion open after clicking on cog (wrong)
Expected results: Accordion doesn't open after clicking on cog
add the stop modifier to the cog click event like so
#click.stop="toggleSettings"
It's how you do event.stopPropagation() in Vue.js
I am using Angular version one, I had created lists of posts in my news feed. Each of the post consists of several action buttons. When I hit button X, the post will bump up to the top. It works same way as OpenStudy.
Illustration
Post#1 ---------------------------------------------------> Post#4
Post#2 ---------------------------------------------------> Post#1
Post#3 ---------------------------------------------------> Post#2
Post#4 (When button triggered in Post#4)------> Post#3
Post#5 ---------------------------------------------------> Post#5
Button X
<li>
<a id="bump-btn" href="javascript:void(0);">
<i class="fa fa-gavel" aria-hidden="true"></i>
</a>
</li>
How can I create such an animation effect in AngularJS?
You can see http://www.nganimate.org/ or you can use native js animation
Via firebug or chrome I could look into the code of the Fb-Like button. I would like to send a click from another place which is a nicer button.
Nothing to do with a scam or anything like that. I would like my good looking icon to be presented and if so it will send that click to the Fb-Like box
This is the jQuery I tried (via square area on the image of my background as trigger):
$('.fbCustomMadeImageMap').click(function () {
// alert("mapFB");
$(".fb-like").find(".pluginButton button").click();
});
Now I have tested the square area to work on a click event and then I put the faceBook - jQuery find function though could not get hold of the correct element which I am supposed to send that click to..
This is the HTML of Fb-like box
What is the right refference for that element . in order to send it a click ?
RE-Edited
I have 2 sections of Like box... and this is the correct one i was reffering to
<div class="pluginConnectButton"><div class="pluginButton pluginButtonSmall pluginButtonInline pluginConnectButtonDisconnected hidden_elem" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon img sp_like sx_like_fav"> </i>אהבתי
</button>
</div>
</div>
<div class="pluginButton pluginButtonSmall pluginButtonPressed pluginButtonInline pluginButtonX pluginConnectButtonConnected" title="">
<div>
<button type="submit">
<i class="pluginButtonIcon pluginButtonXOff img sp_like sx_like_ch"></i>
<i class="pluginButtonIcon pluginButtonXOn img sp_like sx_like_x" title=""></i>
</button>
</div>
</div>
</div>