I have a table with some text data. One of the columns should be clickable: a pop-up for editing this row will appear.
What is the best way to explain for user that clicking on this row will cause a pop-up?
I see 4 variants:
Hyperlink
<td>Smith</td>
Not good cause usually links open new pages.
Dotted-underline link
<td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
User will expect a hovering help window.
Button
<td><button>Doe</button></td>
Looks bad and also not clear what will happen after click.
Clickable icon
<td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
I'd like to avoid repeating the same element many times.
Here is a fiddle with all of these variants.
The icon is the most appealing as the other ones just show that you will be taken to more info. While the icon is clear that the user will edit.
I would also make it a hover affect for it like so:
$(document).ready(function() {
$('#test2').hover(function(){
$('#test').addClass('glyphicon glyphicon-edit');
},
function(){
$('#test').removeClass('glyphicon glyphicon-edit');
});
});
the #test2 is the cell and #test is the span.
http://jsfiddle.net/Ugc9C/2/
Related
I need to create a dropdown with "change password" section in it, the dropdown is supposed to appear on click, let the user change the password and close when the button is clicked again.
This is how it looks like at the moment:
The popup closes as soon as the user clicks on it, so the user cannot update the password.
I know it might be a dumb question, but I'm new to programming and just learning..
This is what I got so far:
$('.ui.dropdown')
.dropdown({
on: 'click'
})
<div className="ui dropdown link item" tabIndex="0" href="/Account/Profile">Hi {this.props.username}
<div className="menu">
<div className="item">
<ChangePassword/>
</div>
</div>
</div>
Thank you so much in advance!
I'll just point out why this is happening for you, there's a few updates you could make to your code but I'll let you figure that out as you go :)
Firstly, onClick() will trigger whenever a mouse click occurs on the element you've set it on, as well as all the children of that element:
e.g (this is just semi-psuedo)
<div onClick={} >
<button />
<button />
</div>
In this case, onClick will trigger when you click the parent div which, on the page, will be wrapping both buttons.
If you've set the method to trigger when the ui-dropdown component is clicked, this will occur whether the drop down is open or not.
The usual way to do this would have two separate components:
Button (The thing you click on to open the dropdown)
The Dropdown
If you put the onClick function on the Button element, but have it activate the Dropdown element, your problem will be solved :)
I am trying to be as clear as possible without just downright fixing it for you, let me know if you need any more clarity!
I have an element roughly like this:
<a class="parent" tabindex="0">
<span class="info">One line of data.</span>
<span class="info">Another line of data.</span>
<button class="action">Click here to do stuff.</button>
</a>
Because of reasons, I have a link that takes users to a certain page, and inside that link is a button that does something related to the link, but functionally different. When I tab over the parent link with a screen reader, it reads the text of everything inside - both info spans and the button, which is not the behavior I'm looking for. What I want to happen is:
If a user tabs to the parent link, it reads off the contents of the two info spans, but not the button, as this would mislead users about what the link does.
If a user tabs specifically to the button, the contents of the button is read off.
I tried assembling a custom aria-label for the parent link to do what I want, but it proved to be very difficult because some of the content I want to be read is interpolated HTML, which doesn't go very easily into an English string. Is there an easier way of doing what I want to do?
I am working on a collapsible table.
I have a table with a ng-show. The header panel of the table uses an ng-click that toggles the ng-show piece to be true or false. However, I want to have a button at the top that toggles all the tables to one way or the other. It works unless I click on an individual table. If an individual table is clicked the toggle button ignores that table. Here's an example of what the code looks like.
<h3>{{page.name}}
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
</h3>
<div>
<div class="panel-heading" ng-click="isOpen=!isOpen">
<h3>{{table.name}}</h3>
</div>
<table ng-show="!isOpen">
~~table contents~~
</table>
</div>
The tables start out open, then close when either the toggle button is pressed or their headers are clicked. However the toggle button fails to change a table if it has been altered by clicking on the header.
One button would be the best, but having two buttons (one that opens them all, and one that closes them all) would work well too, and I feel might be the only way.
<button type="button"ng-click="isOpen=!isOpen">Toggle</button>
//lose a space.... and did you init the isOpen?
<button type="button" ng-click="isOpen=!isOpen">Toggle</button>
I have bunch of links and I need to change the texts color to red after user clicks them
I have something like:
<li class="test" ng-repeat="item in items">
<a href="" ng-click="clickMe()" class="test-li">
{{item.name}}
</a>
</li>
Currently the style is like
.test-li {
color: black;
}
I want my texts to turn red after user clicks them.
So I do:
.test-li:visited {
color:red;
}
It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!
You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.
Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.
jQuery exmample:
$('li a').click(function(){
$(this).addClass('visited');
// or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});
I'm trying to make the background of a button change color, depending on the property of it's neighboring checkbox. But since I'm dependent on the HTML rendered by the questionnaire software I use, I'm unable to change the markup.
Let me show you what I mean:
![This the first situation: everything is OK here [1]http://i.stack.imgur.com/QEoUa.png
Upon clicking 1 of the 8 options, it get's highlighted. But once you click on the "next" button below, and then on the "back"button in the following screen you will encouter the following...
![D'oh!][2]http://i.stack.imgur.com/RCq1S.png
Here the option is still selected, but the button is no longer highlighted. This is a problem, as I want to hide the checkboxes later on.
I want to solve this problem using CSS only. However the checkbox and buttons are automatically placed inside a table. The table uses the following structure:
<table>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="item">
<span class="Option">
Answer
</span>
</td>
</tr>
</table>
I've tried using:
input[type=checkbox]:checked + a{background-color:red;}
This only works when checkbox and answer button are siblings.
Hope you can help me with this...