I'm trying to create a toggle that will display:block and display:none for different blocks of code similar to the code box at lob.com beside "
An intuitive RESTful API".
I have been trying to get this to work based of this jsfiddle but I can't get it to work but I'm not sure if this code is what I need to achieve what's done at lob.com
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
JavaScript:
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
Ultimately it will need to be able to toggle between the two drop downs like on lob.com so there would be 8 sets of divs if there were 4 options on the left and then 2 on the right.
Could anyone point me in the right direction to learn how to do this as I'm not sure if I should be using JQuery or not. Basically I'd like to know exactly how lob.com did it so I can go down the right road!
Thanks if anyone can point me.
The website lob.com is build up with alot of pre's inside a container. Start with the HTML:
<pre class="jayOption prettyprint" style="display: none;"><code>Jay</code></pre>
<pre class="samOption prettyprint" style="display: none;"><code>Sam</code></pre>
<pre class="admOption prettyprint" style="display: none;"><code>Admin</code></pre>
Adding your selectbox:
<select id="getFname" onchange="admSelectCheck(this);">
<option value="jayOption">Jay</option>
<option value="samOption">Sam</option>
<option value="admOption">Admin</option>
</select>
we can toggle the <pre> elements with the following code:
function admSelectCheck(nameSelect)
if(nameSelect.value){
var preElements = document.getElementsByClassName('prettyprint');
for(var i=0; i < preElements.length; i++){
//if the class contains the selected value, then show it, else hide it
preElements[i].style.display = preElements[i].classList.contains(nameSelect.value)?'block':'none';
}
}
}
Making use of classList
fiddle
You can't hide an element of a dropdown list like that. Try setting it's "disabled" attribute instead. Either that, or recreate the list dynamically.
I forked your jsfiddle to give an example of how you might acheive this using a naming convention on the divs like
<div id="admDivCheck0" style="display:none;">
corresponds to the value in
<option id="admOption" value="0">Admin</option>
http://jsfiddle.net/v7Rmh/ here is the fiddle :D
Related
How to display different images when an option is selected?
Here is my markup:
<select name="brand-range">
<option value="Brand1">BFS</option>
<option value="Brand2">FS</option>
<option value="Brand3">PS</option>
</select>
<div class="option-image" id="thumbs">
<div id="bfs"><img src="images/hotel0.jpg"/></div>
<div id="fs"><img src="images/hotel1.jpg" /></div>
<div id="ps"><img src="images/hotel2.jpg" /></div>
</div>
I'm looking for a jQuery solution.
Any suggestions highly appreciated!
Based on your HTML code, i've written script, since option text and image div id value is same i've written script based on that. Refer and the code do changes accordingly.
Here on change of dropdown, i'm getting options values and since images parent div's value are id are same i'm getting that element and changing its css.
Note: you have to change your HTML structure so that you can make changes through jquery accordingly.
$("#brandrange").bind("change", function() {
var image_element = ($("option:selected").text()).toLowerCase();
$("#thumbs").find("div").css("display", "none");
$("#thumbs").find("#" + image_element).css("display", "block");
});
Here is JSfiddle link https://jsfiddle.net/90sybgyw/1/
I am relatively new to Spring MVC and Dojo/Dijit widgets and I am stuck with a problem. I need to unblock a particular div based on the option selected from the dropdown i.e. when the user selects the reason as "Unexperienced" I am supposed to unblock a div with id = "unexpUser" style="display:none;" to collect some additional information.
JSP -
<select data-dojo-type="dijit.form.Select" name="userReason" id = "reason">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</select>
JC -
<script>
if(dijit.byId('reason').value == "opt1"){
unexpUser.style.display = 'block';
}
</script>
When the page loads, the option displayed on the dropdown is "Experienced". When I change the option to "Not experienced" , I need to unblock the div but this particular code doesn't seem to be the right code for comparing. Please help.
.value is not the right way to get value from a dijit widget instead use:
dijit.byId('reason').get("value")
Use onchange listener :
dijit.byId('reason').on("change",function(evt){
alert(evt); //(evt == value of option )
// your code here
});
okay I got my mistake. This is the solution. #Harpreet Singh your solution works perfectly with this code.
JSP-
<form:select data-dojo-type="dijit.form.Select" path "" name="userReason" id = "reason" onchange="myFunction1();">
<option value="opt0">Experienced</option>
<option value="opt1">Not experienced</option>
</form:select>
and in my JS I created a function for the String comparison.
JS -
<script>
function myFunction1(){
if(dijit.byId('reason').get("value") == "opt1"){
unexpUser.style.display = 'block';
}
</script>
this works. Thank you so much for your help!
I visited a website a few weeks ago and came across a dynamic drop down menu. I came across a functionality that I am now trying to replicate but do not know how. In the dropdown you picked the desired number of cars and then it reiterated input fields according to the number of cars chosen. I believe this was done through javascript and a loop was involved. Is there a term for this action or way to display things? Also an example of how to accomplish something similar would help?
This is done using java script ,
and here a hint
create a div and put inputs that you want inside it
<div id='controls'>
<input type="text" name="car_name" />
</div>
and using jQuery change event you can iterate view of controls div
i.e if you have a div with id container , where you will place new controls
$('select').change(function(){
var number = parseInt ($(this).val ());
//And do for loop here
for (var i=1;i<=number;i++){
$('#controls').clone().appendTo($('#container');
}
});
Please enhance this code to fit your requirement.
It's unlikely that this would be done with PHP, since that would require a page refresh.
It's more likely that it would be done with Javascript listening for the onChange event of the Select element (the drop down menu). When the event is detected, Javascript could show / hide div elements (one for each Car), or dynamically create / destroy them.
If you want it without refresh, you need use javascript, i have made one example here using jquery:
HTML CODE
<label>How many cars?</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="fields"></div>
JAVASCRIPT CODE
$('select').change(function() {
var option = $(this).val();
showFields(option);
return false;
});
function showFields(option){
var content = '';
for (var i = 1; i <= option; i++){
content += '<div id="field_'+i+'"><label>Car '+i+'</label><br /><label>Model:</label> <input id="model_'+i+'" /><br /><label>Maker:</label> <input id="maker_'+i+'" /><br /><label>Year:</label> <input id="year_'+i+'" /><br /><div><br />';
}
$('#fields').html(content);
}
Here the example: http://jsfiddle.net/zbzjm/1/
I am creating a way-finding app using HTML5, jQuery and Javascript. There are 3 total html pages and each page has a different legend. In this app I have buttons that call a jQuery click function to display stars on the map above the location you have selected. Each button has an id and the buttons work how I want them to work. The problem is that I want to add a drop down list that will provide the same functionality as the buttons on the legend. So basically what I want to be able to do is select a section from the drop down list and then jump to the page that has that section and have the stars already displayed for the selected section. IE: If I select Restrooms, I want to be able to jump the ground floor and have stars displayed over the restrooms. Is this possible to do? I tried using a Javascript function to make the URL navigate to the value of the select list option I wanted but that didn't make the stars show up. I am fairly new to Javascript and jQuery so please help. Thanks! Here is my code:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}
Try this:
<select name="locations" onchange="gotoSection(this.value)">
function gotoSection(cururl) {
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
EDIT:
Maybe i should read the entire question before i answer, i thought the problem was that your navigation didn't work, i apologize.
But as to the question about the stars, if i understand your question and example code correctly, you're navigating within the same page, just with diferent #hash tags. And if thats the case, your document.ready won't run.
Instead you can make a function that triggers the stars and call that from your gotoSection method, after you've assigned the new url.
I have 2 tables "iu" and "si" and I put a dropdown list for users to select which one they want to see. Once the option is selected, the corresponding table will appear.
Another one is supposed to be hidden but when the page is loaded, default table "si" is shown.
Here is my JavaScript code:
<script>
$(document).ready(function()
{
$('#iu_table').hide();
});
$('#iu').onchange=function()
{
$('#si_table').hide();
$('#iu_table').toggle();
}
</script>
And HTML code:
<select>
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
The table ID is "si_table" and "ui_table" respectively.
I used the code above but it doesn't work. No matter which one I select, only the "si" table is shown.
I hope that someone could help.
You should probably work with the Tutorials of jQuery and familarize yourself with the workings of the libraries.
There are multiple errors in your code:
There is no field onchange. What you want is the change function of jQuery, which is described here: http://api.jquery.com/change/
The code for the change function belongs into the $(document).ready function, so jquery executes it, when the document is loaded. The code has to be executed there, so that the function is called when the select is changed.
You want to work with the change of the select not with the change of the option.
In the body of your change function you hide the one table and toggle other: toggle both, so the first can be shown too, when the option is selected. Also this construct only works for exactly 2 options. If you want more options, you have to work something out like in the answer of Paritosh.
Here is a working sample:
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$(document).ready(function()
{
$('#iu_table').hide();
$('#selector').change(function()
{
$('#si_table').toggle();
$('#iu_table').toggle();
});
});
</script>
</head>
<body>
<div id="si_table">si</div>
<div id="iu_table">iu</div>
<select id="selector">
<option id="si" selected="selected">SI</option>
<option id="iu">IU</option>
</select>
</body>
There are many ways of achieving this. One is below - I have added id attribute to dropdown control
<select id="myselection">
<option id="si" selected>SI</option>
<option id="iu">IU</option>
</select>
<script>
$('#myselection').bind('change', function(){
if($('#myselection option:selected').attr('id') == "si"){
$('#si_table').show();
$('#iu_table').hide();
}
else if($('#myselection option:selected').attr('id') == "iu"){
$('#si_table').hide();
$('#iu_table').show();
}
});
</script>
There is a method in jQuery which does hide/show matched elements called toggle()
As you need to hide the IU table at first, you may need some css trick for that. So put display:none; for the IU table and do toggle on changing the dropdown values. Working fiddle is here