I have a table created in meteor that is expandable. The initial button that is pressed to expand the table has a plus icon on it. Once the table is expanded I wan't to be able to make the icon on the button change to a minus sign. Basically I want the icon to toggle between a plus and minus sign depending on if the table is expanded or collapsed.
My template for the button:
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
The template is callled in the html and works as expected.
My most recent attemp has been trying to use an event for getting the icon to switch from the plus sign to the minus sign:
Template.expandButton.events({
'click #expand'(event) {
event.toggleClass('glyphicon-plus glyphicon-minus');
}
})
I have also tried a couple other ways, but nothing has worked. I would like to know if this is close to being a way of doing this or if this is completely wrong. And if it is the wrong way to do this, how should I go about doing it?
Thanks for any help. It is appreciated.
In Meteor you have to bind the events on right places. you want to bind the click event to button.
<template name="expandButton">
<button class="btn btn-default btn-xs btn-circle" id="expandBtn">
<span id="expand" class="glyphicon glyphicon-plus"></span>
</button>
</template>
and here is your event
Template.expandButton.events({
'click #expandBtn'(event, temp) {
temp.$('#expand').toggleClass('glyphicon-plus glyphicon-minus');
}
})
Please also note that in meteor events, the first argument is event and second is template so using temp.$ is more efficient then parsing the complete dom i.e $(#id)
Related
I'm building a filter for a site that needs to work with a screen reader and i'm currently facing this problem.
The filter is built in a modal that houses a set of checkboxes and one button that displays how many hits the user has got after selecting each checkbox. The text in the button is dynamic and changes depending on the number of hits there is after a checkbox has been selected.
The text in the button says "Show X hits". I have added a role="alert" to the button so that the screen reader pick ups imidiatly if the value/text changes in the button.
My question is, is it possible for the screen reader to read the text "X hits" when the button is triggerd by the role="alert" and the text "Show X hits" when the user navigtes down to the button?
Example of my button:
<button type="button" role="alert" class="btn btn-primary" v-on:click="search()">
<span class="sr-only">{{amount}} hits.</span>
<span>Show {{amount}} hits.</span>
</button>
UPDATE
Managed to get a working solution using this:
<button type="button" class="btn btn-primary" v-on:click="search()">
<span aria-hidden="true">Show {{amount}} hits.</span>
<div class="sr-only">
<span>Show</span>
<span role="alert">{{amount}} hits</span>
</div>
</button>
You should not put a live region inside a button. The button role has presentational children.
That means that, as per ARIA standard, the role of any child of the button should be ignored. This includes role="alert".
Maybe it works in your browser/screen reader combination, but I wouldn’t rely on that.
I don’t see a reason why the text would be inside the button anyway, since your are hiding it.
So I’d recommend this:
<button type="button" class="btn btn-primary" v-on:click="search()">
Show {{amount}} hits.
</button>
<div class="sr-only" role="alert">{{amount}} hits</div>
I have a table in which column elements have text in them. I click a button and all the text elements become input elements. Based on a condition, there is a button displayed next to the input field.
What i have to do is display a button with an icon in the same column, next to the input field. I have done this, however the result is not as expected.
This is what I am getting.
This is what I am looking for.
<td id="id119ae">
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div>
<div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0">
<button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" name="editContainer:edit" id="edit1923">
</div>
</form>
This is the code that I currently have that gives me the first result. The layout is causing some problems. I need better layout suggestions or ways to fix this.
Use inputgroup classes to show the buttons adjacent to input type
http://getbootstrap.com/components/#input-groups-buttons
There is no unique solution for your request.
It depends on how you are designing? Are you considering the responsiveness? Are you using fixed width? or even are you using a library or framework like Bootstrap?
By the way, I think this one works for you:
use the percentage of width for your input and button.
For example:
<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
<span class="fa fa-bolt"></span>
</button>
<input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923">
What I did was set min-width for the table. The percentage did not help me since it was dynamic. For some reason it was not taking that into account when the new element was added and the button always came in the wrong place.
I set the min-width for that column to 250 px . I tried to set it to say 30% but that did not work either.
solution: use min-width in the header elements. that sets the entire table to follow the least width.
I am looking to implement a menu that a user clicks the first level button, it has a popover effect. Then a user clicks on the second level menu, another popover shows up. I tried looking up online but there isn't much useful information. Is it doable? The mock picture has been attached below.
You need to set your popover content to support html as per
official documentation.
You need to initialise your second popover after your first popover
is triggered.
HTML:
<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
Popover on left
</button>
<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right"> Popover on left
</button>
JS:
var second = $('#secondpopover').remove();
var first = $('#firstpopover');
second.show();
first.data('content', second);
first.popover({html: true});
first.on('shown.bs.popover', function () {
second.popover();
})
first.on('hidden.bs.popover', function () {
second.popover('hide');
})
CSS:
#secondpopover {
display: none;
}
DEMO
Hello I am trying to use angular-strap to put together a multiselect drop down menu. For testing, I am just putting in some dummy data like so. THe issue is that the check mark on selected items displays on almost new line. I am not sure how to go about fixing it.
{value:'BLAH.09', label:'BLAH.09 '}
Couple of things to keep in mind:
1. The extra spaces in label are just a part of the troubleshooting process, it still doesn't work if they are there.
2. The reason the box is so wide in the screenshot is because I manually adjusted the width in css to see if it makes a difference, it doesn't..
Button looks like this:
<button type="button" class="btn btn-default" ng-model="selectedIcons" data-html="1" placeholder="Category Filter" data-multiple="1" data-animation="am-flip-x" ng-options="val.value for val in display_data['fields']" bs-select> Action <span class="caret"></span></button>
Was missing an include to the main.min.css file.
I am using backbone, bootstrap "collapse". I am trying to change the class when the button is clicked..
html
<button id="btnCollapse" class="btn" type="button">
<i id="accordionIcon-{{id}}" class="icon-down"></i>
</button>
js
CollapsePress : function(event) {
//change the class back and forth with every click (icon-down to icon-right)
}
You haven’t given enough information for me to be sure this is correct, but try this:
$(event.target).find('i').toggleClass('icon-down icon-right')