I just started using semantic UI and I have a silly question.
I have two checkboxes with class name as "ui toggle checkbox".
When page is loaded, I want to check these checkboxes based on some condition.
<div class="ui toggle checkbox " id="ssl">
<input type="checkbox" name="SSL" >
<label>3</label>
</div>
<br>
<label>Web Service Request Logging : </label>
<div class="ui toggle checkbox" id="wsl">
<input type="checkbox" id="Logging" >
<label>7</label>
</div>
Javascript Code:
$(document).ready(function () {
var wsl = Math.floor((Math.random() * 10) + 1);
var ssl = Math.floor((Math.random() * 10) + 1);
alert(wsl);
alert(ssl);
if (ssl <3) {
$('.ui.toggle.checkbox').checkbox('check');
}
if (wsl <7) {
$('.ui.toggle.checkbox').checkbox('check');
}
});
The problem is, When the number is say 5, it checks both the check boxes. How to differentiate between the two checkboxes with the same class in semanti UI.
Any help will be appreciated.
I would just use the id attribute and get the checkbox input element and toggle the checked attribute with .attr() like:
$(document).ready(function () {
var wsl = Math.floor((Math.random() * 10) + 1);
var ssl = Math.floor((Math.random() * 10) + 1);
alert(wsl);
alert(ssl);
if (ssl <3) {
$('#ssl input:checkbox').attr('checked', true);
}
if (wsl <7) {
$('#wsl input:checkbox').attr('checked', true);
}
});
Related
I'm working on making my existing tab component accessible, I'm basing my design off of the W3C's Example of Tabs with Manual Activation.
You can access my demo here
HTML
<div class="tab-container" lang="en">
<div class="tabs" role="tablist">
<button class="tab" aria-selected="true" href="#" role="tab" data-tab-name="tab1" tabindex="0">
<!-- tab name -->
</button>
<!-- more tabs -->
</div>
<div class="tab-content" data-name="tab1" role="tabpanel" tabindex="0">
<!-- tab panel content -->
</div>
<!-- more tab panels -->
</div>
JQuery
function getTabContent($tabContents, tabName) {
return $tabContents.filter('[data-name="' + tabName + '"]');
}
function setSelectedTab($tab) {
var tabName = $tab.data('tab-name'),
$tabSet = $tab.closest('.tabs'),
$tabContents = $tab.closest('.tab-container').find('.tab-content');
// update the tab indices and aria attributes
$tabSet.find('.tab').attr('aria-selected', 'false').attr('tabindex', '-1');
$tab.attr('aria-selected', 'true').removeAttr('tabindex');
$tabContents.addClass('hidden');
getTabContent($tabContents, tabName).removeClass('hidden');
}
function handleTabSelection(event) {
var $tab = $(event.target);
if ($tab.data('tab-name')) {
event.preventDefault();
setSelectedTab($tab);
$tab.focus();
}
}
// Our tab control needs to be used in many places on our site, we cannot guarantee that all devs will use unique IDs
// so we need to generate them here
function initTabs($tabContainer) {
var $tabList = $tabContainer.find('.tabs'),
$tabContents = $tabContainer.find('.tab-content'),
tabSetName = $tabList.data.name,
tabIdPrefix = 'tab-',
contentIdPrefix = 'tab-content-';
// add unique ids and labels
$tabList.children().each(function() {
var $tab = $(this),
tabName = $tab.data('tab-name'),
$tabContent = getTabContent($tabContents, tabName),
tabId = getUniqueId(tabIdPrefix + tabName),
contentId = getUniqueId(contentIdPrefix + tabName);
// add the unique id and associate the link with the content
$tab.attr('id', tabId).attr('aria-controls', contentId);
// add the unique id and use the link as the label for the content
$tabContent.attr('id', contentId).attr('aria-labelledby', tabId);
});
}
function getUniqueId(id, index) {
var newId = id;
if (index) {
newId += '--' + index;
index++;
} else {
index = 1;
}
if (document.getElementById(newId)) {
return getUniqueId(id, index);
}
return newId;
}
function handleKeyPress(event) {
var $tab = $(event.target);
if ($tab.is('.tab')) {
var keyCode = event.which,
$tab = $(event.target);
if (keyCode === 13 || keyCode === 32) {
// user pressed enter, or space
setSelectedTab($tab);
event.preventDefault();
} else if (keyCode === 37 || keyCode === 39) {
// the user pressed left or right
var $newTab = $tab[keyCode === 39 ? 'next' : 'prev']();
// move the focus
if ($newTab.length > 0) {
$newTab.focus();
}
event.preventDefault();
}
}
}
$('.tabs').click(handleTabSelection);
$('.tabs').keyup(handleKeyPress);
$('.tab-container').each(function() {
initTabs($(this));
});
A user can use the left and right keys to move focus within the tab list, and enter or space to select a tab.
When a user selects a tab however, the screen reader simply announces "selected" where on the W3C's example, it announces the tab name followed by "selected".
I'm testing using NVDA in Firefox and here are my steps to reproduce:
Set the focus on the "Nils Frahm" tab
Press TAB
You should hear "Agnes Obel tab two of three"
Press ENTER
You should hear "Agnes Obel tab selected tab two of three"
This is exactly what happens in the W3C's example, but in mine, the final step only reads "selected".
I've tried to match their example as closely as possible but I have yet to figure out how to get my example to announce the tab name when activated.
What could cause NVDA to skip reading the tab name once it is activated?
I discovered how to solve the problem, but as of yet, not why the problem exists.
When I add an after CSS rule on my selected tab, the screen reader starts reading the content when selected.
.tab[aria-selected="true"]::after {
content: '';
}
If I add the after tag to all tabs, the problem persists; it needs to only be on the selected element.
My guess is that this is fooling the screen reader into thinking that the content has changed, so it reads the new tab name.
Here is the working demo
I'm trying to display sum value in template page using meteor.js.
Here is my html code:
<head>
<title>Sum</title>
</head>
<body>
<h1>Sum of two values</h1>
{{> sumForm}}
</body>
<template name="sumForm">
<form>
<input type="text" name="value1"> + <input type="text" name="value2"><p>Total: {{totalSum}}</p>
<input type="submit" value="Sum">
</form>
</template>
and my js code:
if(Meteor.isClient){
Template.sumForm.events({
'submit form': function(event){
event.preventDefault();
value1Var = parseInt(event.target.value1.value);
value2Var = parseInt(event.target.value2.value);
Template.sumForm.totalSum = value1Var + value2Var;
return Template.sumForm.totalSum;
}
});
}
But this does not work.
Can any one help?
You can user reactive-var to achive what you want
First you have to add the lightweight reactive-var package
meteor add reactive-var
Then at your Template file add:
if (Meteor.isClient) {
Template.sumForm.created = function () {
//We set default value
this.counter = new ReactiveVar(0);
}
Template.sumForm.helpers({
totalSum: function () {
return Template.instance().counter.get();
}
});
Template.sumForm.events({
'submit form': function(event, template){
event.preventDefault();
value1Var = parseInt(event.target.value1.value);
value2Var = parseInt(event.target.value2.value);
var sum = value1Var + value2Var;
return template.counter.set(sum);;
}
});
}
Template.sumForm.helpers({
totalSum: function(){
return Session.get("sum");
}
});
And at the end of your submit event
Session.set("sum", value1Var + value2Var);
For a cleaner solution also consider using reactive-var instead of session variables.
I have a simple problem. I want to update my classes inside my inputs on form submit.
<div class="form-group">
<input class="form-control" ng-class="{'has-error': signup.$submitted && signup.name.$invalid}" type="text" name="name" ng-model="formData.name" required minlength="2" placeholder="Full Name">
</div>
Here's my app.js:
spinnrApp.controller('FormController', ['$scope', '$http', '$state', function (scope, http, state){
// get list of cities and store it to select
http.get('cities.json').success(function(data){
scope.cities = data;
})
// we will store all our form data in this object
scope.formData = {};
// function to process the form
scope.processForm = function(isValid) {
scope.$submitted = true;
if(isValid && state.$current=='registration.spinnrapp') {
state.go('registration.artist');
} else if(isValid && state.$current=='registration.artist') {
state.go('registration.share');
} else if(!isValid && state.$current=='registration.artist') {
alert('Please make sure you have selected an artist.');
} else if(!isValid && state.$current=='registration.spinnrapp') {
return;
}
};
}]);
When I execute my submit via ng-click calling this function, my signup.$submitted still stays as false. I also have a reference from this Plunker: http://plnkr.co/edit/xDIzC0A50cXxMpIHeP3C?p=preview
That Plunkr updates its class. Why isn't mine doing the same? Am I doing something wrong?
Iam trying to show/hide a div based on the radio button click in Yii form. But the onclick event is not working for me. Please help me to fix this as Iam a new bee to Yii.
Iam using this code for radio button
<?php echo $form->radioButtonList($model,'service_type',array(
'0'=>'Yes',
'1'=>'No',
'separator'=>'',
'onclick'=>"setVisible('Yes_box',true);setVisible('No_box', false)")); ?>
<div id="Yes_box" style="visibility: hidden"> contents of Yes type </div>
<div id="No_box" style="visibility: hidden"> contents of No type </div>
This is my script:
<script>
$(document).ready(function () {
$("input[name$='type']").click(function () {
var value = $(this).val();
if (value == 'Yes') {
$("#Yes_box").show();
$("#No_box").hide();
} else if (value == 'No') {
$("#No_box").show();
$("#Yes_box").hide();
}
});
$("#Yes_box").show();
$("#No_box").hide();
});
</script>
When Iam using this code only the last condition is working i.e, Yes_box is showing. I think the onclick value is not passing here. Please help me to recover this problem.
I thin your code is written correctly . only few changes / may be that will work .
I have edited the your code .Check this out :
<script>
$(document).ready(function () {
$("input[name=type]").click(function () {
var value = $(this).val();
if (value == 'Yes') {
$("#Yes_box").show();
$("#No_box").hide();
} else if (value == 'No') {
$("#No_box").show();
$("#Yes_box").hide();
}
});
});
</script>
Also NOTE :- check with an alert if you are able to get data into the value variable .
I have this form where the user can insert a quantity in an input field, and see the total in another input field. It works when you insert the numbers manually and I want it to work with buttons too, but i just can't get it to work.
Here's the code:
HTML
<form id="buyForm" method="post" action="cart.php">
<label>Choose quantity</label>
<div>
(+)increase
<input type="text" id="qty1" name="qty[]"/>
(-)decrease
</div>
<input type="text" id="cost1" value="50" style="display:none; visibility:hidden;" name="cost[]" />
<input type="text" id="price1" name="price[]" />
</form>
Js
// Calculate
function calc(idx) {
var price = parseFloat(document.getElementById("cost"+idx).value)*
parseFloat(document.getElementById("qty"+idx).value);
// alert(idx+":"+price);
document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
}
window.onload=function() {
document.getElementsByName("qty[]")[0].onkeyup=function() {calc(1)};
document.getElementsByName("cost[]")[0].onkeyup=function() {calc(1)};
}
//Increase/decrease buttons
$(function() {
$(".button").click(function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
// AJAX save would go here
} else {
// Don't allow decrementing below zero
if (oldValue >= 1) {
var newVal = parseFloat(oldValue) - 1;
// AJAX save would go here
}
}
$button.parent().find("input").val(newVal);
});
});
Here it is as jsfiddle: http://jsfiddle.net/rcheH/5/
Can someone please help me with this?
Thanks in advance!