Creating hidden text (and then subsequently showing it) in Bootstrap? - html

In the atoms tab of my Periodic Alchemy game, I have dropdowns that allow users to select how many protons, neutrons, and electrons they want in their atom. If a user strikes upon a certain atom, say, hydrogen, (1 Proton, 1 Neutron, 1 Electron), then the text "Hydrogen: 1" should appear signifying that you've discovered Hydrogen. Unfortunately, I can't find anything in the Bootstrap Information website: getboostrap.com
Other than Modals, which didn't suit my needs. Is there a solution to this?


This isn't a bootstrap feature. You can hide text with the CSS: display: none;. You can show it with the jQuery .show().


Does that fit your needs?
JSFiddle
HTML:
<select class="selection" id="protons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="selection" id="neutrons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="selection" id="electrons">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="1">Hydrogen</div>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="2">Whatever</div>
JS:
$('.selection').change(function() {
$('.atom').addClass('hide');
$('.atom[data-protons=' + $('#protons').val() + '][data-neutrons=' + $('#neutrons').val() + '][data-electrons=' + $('#electrons').val() + ']').removeClass('hide');
});

Related

Adding title groups to select options

currently working on an assignment and trying to code it to have titles as shown in the picture. Current code looks like this:
<section for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option selected disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option selected disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>
Picture of what I need for formatting, Hogwarts and Other is how I want it to look

Looks like you had it, just have to take the selected off of the 2 disabled options!
<label for="Pick up Location">Pick up Location:</label>
<br><br>
<select id="Pick up" name="Pick up">
<option disabled>Hogwarts</option>
<option value="Dining Hall">Dining Hall</option>
<option value="Chamber of Secrets">Chamber of Secrets</option>
<option disabled>Other</option>
<option value="Forbidden Forest">Forbidden Forest</option>
<option value="Hagrid's Shack">Hagrid's Shack</option>
</select>

Saving and adding up integer values of multiple selections

I am attempting to have 10 drop down selections with 3 choices: 1,2, or 3, and save each selection as an integer, then add them all up and have them displayed. I'm not sure how to do this in HTML and would like some help.
This is an example of a selection I have attempted to use (from w3schools), but I don't see how to temporarily store the input as an integer and then use it later.
<!DOCTYPE html>
<html>
<body>
<h1>The optgroup element</h1>
<p>The optgroup tag is used to group related options in a drop-down list:</p>
<form action="/action_page.php">
<label for="number">Choose a number:</label>
<select name="numbers" id="numbers">
<optgroup label="Numbers">
<option value="three">3</option>
<option value="two">2</option>
<option value="one">1</option>
</optgroup>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Any kind of help is appreciated.

Most of the html you posted is not necessary, all you really need is your selects. The form element is really only used for communicating information from a user to a server. As far as what your HTML should look like:
<body>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
To collect input from multiple selects, as you are describing would use javascript. The following code returns a list of html elements with the class of '.select'.
let selectArray = document.querySelectorAll('.select');
Next you would want to loop through and add them to a variable.
let number = 0;
for(let i = 0; i < selectArray.length; i++){
number += parseInt(selectArray[i].value);
}
There are a few ways to save variables, for your use I recommend using localStorage.

Select gets highlighted on clicking select label in IE

How to remove select highlight on clicking the select label in IE.
It is working fine in all other browsers.
<label class="fieldLabel specialinput" for="9d95e2bb-6b28-4153-96b5-9ebcd1937c44">Age</label>
<select name="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" id="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" data-val-required="Age" data-val="true">
<option value=""></option>
<option value="24">24</option>
<option value="54">54</option>
<option value="3">3</option>
</select>
enter image description here

The highlighting of select will not occur by making label not clickable.
label{
pointer-events:none;
}

Try to remove the label's for property, like this:
<label class="fieldLabel specialinput" >Age</label>
<select name="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" id="9d95e2bb-6b28-4153-96b5-9ebcd1937c44" data-val-required="Age" data-val="true">
<option value=""></option>
<option value="24">24</option>
<option value="54">54</option>
<option value="3">3</option>
</select>

bar rating - wanting default selection to be no selection

From http://netboy.pl/demo/jquery-bar-rating/examples/ - I'm using the first rating system using 10 bars. However, I want the default to be no selected option at all (i.e. no bars). Right now the default selection is option #1 - any thoughts? I did try adding an empty option but all it did was add another bar to the front (for a total of 11 bars which is not what I want). I want the 10 bars but none highlighted/selected. Any thoughts?!?
<div class="input select rating-a">
<select class="example-a" name="content_rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>

Since you're using jquery you can do something like this:
$('.example-a').prop("selectedIndex", -1);
http://jsfiddle.net/GAXBf/

URL : http://netboy.pl/demo/jquery-bar-rating/examples/ (This url is not working)
If i am not wrong, you are using jquery bar rating like (http://antenna.io/demo/jquery-bar-rating/examples/).
In this jquery bar rating library, we can set no value selected by default on bar.
<script>
$('#rating').barrating('show', {
theme: 'bars-1to10',
deselectable: true
});
</script>
HTML:
<select id="rating">
<option value=""></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
.
.
<option value="10">10</option>
</select>
Hope, It will resolve your problem.

In case its still relevant. You can add a empty Option.
<select id="rating">
<option value></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
This will give 5 stars with zero filled. Off course this will only work if there is no initial value defined.

<select id="example">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Just in case anyone was wondering, in the latest version of the jQuery Bar Rating Plugin (v1.0.5) you can add the following option to do the trick:
<option disabled selected>Select an option</option>
So your select box will look something like this:
<select>
<option disabled selected>Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<!-- etc. -->
</select>

I was having the same issue as the original poster with jQuery Bar Rating (http://antenna.io/demo/jquery-bar-rating/examples/)
When called each option within the select field was transformed to a link wrapped in a div with a class of "br-widget"
I only wanted to display 5 stars for the user to choose from, however the amount of options in the select would determine how many star ratings would show on the screen. The solution I found was to add a "Please Select" as an option and then to hide this using jquery as shown below.
$(document).ready(function() {
$(\'#rating\').barrating({
theme: \'css-stars\'
});
//HIDE THE FIRST STAR OPTIONS
$(".br-widget a:first-child").css( "display", "none" );
});
<select name="rating" id="rating">
<option value="0">Please Select</option>
<option value="1">1 Star</option>
<option value="2">2 Stars</option>
<option value="3">3 Stars</option>
<option value="4">4 Stars</option>
<option value="5">5 Stars</option>
</select>

I had the same problem with this latest 2016 version and i solved it by adding this javascript AFTER the function call and now everything works (hope this help someone):
$(document).ready(function() {
// remove the selection on the dropdown menu
$("#rating").val([]);
// remove all "selected" css to show as "unselected" by default
$(".br-widget a").removeClass('br-selected');
// remove default "selected text", if any
$(".br-current-rating").empty();
});
Here is my full code:
<script>
// 5-star rating script
$(function() {
$('#rating').barrating({
theme: 'fontawesome-stars',
initialRating: null, // initial rating
showValues: false, // display rating values on the bars?
showSelectedRating: true, // append a div with a rating to the widget?
deselectable: true, // allow to deselect ratings
reverse: false, // reverse the rating?
readonly: false, // make the rating ready-only?
fastClicks: true, // remove 300ms click delay on touch devices?
hoverState: true, // change state on hover?
silent: false, // supress callbacks when controlling ratings programatically
});
});
$(document).ready(function() {
// remove the selection on the dropdown menu
$("#rating").val([]);
// remove all "selectec" css to show as "unselected" by default
$(".br-widget a").removeClass('br-selected');
// remove default "selected text", if any
$(".br-current-rating").empty();
});
</script>
<style>
.br-wrapper{
width: auto;
display: inline-block;
}
.br-widget{
width: auto;
}
</style>

Dropdown default values return null?

I have html in my JSP which ask simple questions, as well as having drop-down boxes for users to select their responses. I also set default responses as well incase they decide to just hit next however I always get null returned. JSP:
<div id="startQrtQuestion" align="left">1) When did you first arrive here?</div>
<div id="startQrtResponse" align="left">
<select name="quarterStart">
<option value="summer">Summer Quarter</option>
<option value="fall" selected="selected">Fall Quarter</option>
</select>
</div>
<div id="programQuestion" align="left">2) What program are you taking?</div>
<div id="programResponse" align="left">
<select name="programSelect">
<option value="bscs" selected="selected">BSCS</option>
<option value="bstm">BSTM</option>
<option value="bsgd">BSGD</option>
<option value="bswd">BSWD</option>
</select>
</div>
<div id="extendedQuestion" align="left">3) Will you be staying extra quarters?</div>
<div id="extendedResponse" align="left">
<div name="extendedStayResponses">
<input type="checkbox" name="extendedStay" id="extendedStay"/>Yes
</div></br>
<div id="extendedFullTime" style="display:none">
Full Time:<select name="extraFullQuarters">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>(Taking 12 Credits or More)
</div></br>
<div id="extendedPartTime" style="display:none">
Part Time:<select name="extraPartQuarters">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
This is all wrapped in a form that will call the post method in my servlet. However when I retrieve those values like so:
String startQuarter = request.getParameter("quarterStart");
String programSelect = request.getParameter("programSelect");
String extendedStay = request.getParameter("extendedStay");
I get null pointer exceptions. Is the value not automatically set to what I have as my default selected option?
Am I not accessing these inputs correctly?

I found out it wasn't any of this code. But another set of code in my group's project.
It turned out to be a session attribute that's suppose to be set, but isn't.

it might be your request object is null.Check it once.