Given that I have the following html markup:
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
How can I make div id="divTwo" and div id="divthree" appear on the same line? First divthree and then divTwo, using jQuery or css?
Update:
I can't add divs or other elements to the html code, it is rendered like that and I can only change it using js or css.
Change the display property to make them appear inline.
#divTwo, #divthree {
display: inline-block;
}
#divTwo, #divthree {
display: inline-block !important;
}
I updated my answer.
I use jQuery to append new div
var $newdiv1 = $( "<div class='selectInput'></div>"),
existingdiv2 = document.getElementById( "divTwo" ),
existingdiv3 = document.getElementById( "divthree" );
$( ".container" ).append( $newdiv1);
$( ".selectInput" ).append( [ existingdiv3, existingdiv2 ] );
.selectInput{
display: flex;
}
#divthree{
margin-right: 20px;
}
#divTwo{
margin: auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
JS Fiddle link for this code
Related
I'm trying to code a dropdown menu that when a option is clicked, it displays a div with that options name, but I can't figure out how to do just that.
HTML:
<div class="wrapper">
<div class="menu">
<select id="type">
<option value="Gradients">Gradients</option>
<option value="Custom Color">Custom Color</option>
<option value="Custom Image/Video">Custom Image/Video</option>
</select>
</div>
</div>
<div class="content">
<div id="Gradients" class="data">
<h1>gradient</h1>
</div>
<div id="Custom Color" class="data">
<h1>color</h1>
</div>
<div id="Custom Image/Video" class="data">
<h1>image/video</h1>
</div>
</div>
maybe you could try to set the style.display property to block
I hope this will help you
const dropMenu = document.querySelector('#type'),
sections = document.querySelectorAll('.data');
dropMenu.addEventListener('change', function handleChange(event) {
sections.forEach(section => {
section.classList.remove('active');
document.querySelector('#' + event.target.value).classList.add('active');
});
});
.data {
display: none;
}
.data.active {
display: block;
}
<div class="wrapper">
<div class="menu">
<select id="type">
<option value="">--Select--</option>
<option value="Gradients">Gradients</option>
<option value="Custom-Color">Custom Color</option>
<option value="Custom-Image">Custom Image/Video</option>
</select>
</div>
</div>
<div class="content">
<div id="Gradients" class="data">
<h1>gradient</h1>
</div>
<div id="Custom-Color" class="data">
<h1>color</h1>
</div>
<div id="Custom-Image" class="data">
<h1>image/video</h1>
</div>
</div>
I have html with several drop downs. Depending on the each selection a textarea shows for description. Right now I have a show and hide in javascript for each question. Is there a way to concise this so that I dont have to write show/hide for each question. What I mean is, Is there a way that my javascript will be more concise?
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Food Selection</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#spicyFoodField').on('change', function() {
if (this.value == 'spicyFoodDesc') {
$("#spicyFoodDesc").show();
} else {
$("#spicyFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#sweetFoodField').on('change', function() {
if (this.value == 'sweetFoodDesc') {
$("#sweetFoodDesc").show();
} else {
$("#sweetFoodDesc").hide();
}
});
});
$(document).ready(function() {
$('#blandFoodField').on('change', function() {
if (this.value == 'blandFoodDesc') {
$("#blandFoodDesc").show();
} else {
$("#blandFoodDesc").hide();
}
});
});
</script>
</head>
<body>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="spicyFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="sweetFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="blandFoodDesc">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
</body>
</html>
There is certainly a way to achieve what you're after, and my preference is to use a combination of one event listener, and data attributes.
The idea is that you apply one event that fires on the change of any select, rather than having one for each.
$("select").on("change", ...);
To find out exactly which one changed, you can use $(this). Therefore, $(this).val() will tell us if the dropdown is switching to "yes" or "no".
var selectedValue = $(this).val();
We can add the parameter data-for-id to each description, and set it to the ID of the associated select. For example, if you have a select with an id of mySelect, the textarea would have data-for-id="mySelect".
<select id="spicyFoodField">
....
</select>
<textarea data-for-id="spicyFoodField" />
Now we've created a link between our select and its textarea. Let's implement that in our jQuery code, so that when the select gets changed, it knows what textarea to look for:
//Set the associated text area to whatever textarea has
//the same data-for-id as the changing select list
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
Finally, we can implement our logic to hide the area, or show the area:
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
Now, any time we want to add a new Select / Textarea, all we have to do is put data-for-id="associated-select-id" on the textarea, and the code will handle the rest.
Complete example:
$(document).ready(function() {
$("select").on("change", function() { //When a select changes
var selectedValue = $(this).val(); //Check its new value
//Get associated textarea
var $associatedTextarea = $("textarea[data-for-id=" + $(this).attr("id") + "]");
if (selectedValue == "yes") {
$associatedTextarea.show();
} else {
$associatedTextarea.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<div class="w3-row-padding" id="spicyFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like spicy food?</b></label>
<p>
<select id="spicyFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="spicyFoodField" id="spicyFoodDesc" name="spicyFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="spicyFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="sweetFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="sweetFoodField" id="sweetFoodDesc" name="sweetFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
<div class="w3-row-padding" id="sweetFood">
<div class="w3-third">
<label class="w3-text-green" for="blandFoodLabel"><b>Do you like sweet food?</b></label>
<p>
<select id="blandFoodField">
<option value="" disabled selected>Select...</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</p>
</div>
<div class="w3-twothird">
<p>
<textarea class="w3-hover-light-blue" data-for-id="blandFoodField" id="blandFoodDesc" name="blandFoodDesc" rows="2" hidden> </textarea>
</p>
</div>
</div>
My question is how to cleanly put two elements on the same line.
Here is my fiddle: https://jsfiddle.net/duqpn0wd/
CSS:
.inline-block {
display: inline-block;
}
Wrapper:
<div class="inline-block">
</div>
In the fiddle you can see a text with a button underneath it but I need them to be left align and right align like so:
TEXT BUTTON
Right now using inline-block helps but I would need each element to be an inline and the line after that would also be inline so that would merge into my existing first line like so:
TEXT BUTTON TEXT BUTTON
Any ideas on how to do this properly?
Use float: left; for the p inside .inline-block:
.inline-block {
display: inline-block;
width: 100%;
}
.inline-block p{
float: left;
}
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="collapsible">
<h3> Alarm </h3>
<div class="inline-block">
<p>Alarm Horn:</p>
<select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div class="inline-block">
<p>Alarm Light:</p>
<select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
</div>
<div data-role="collapsible">
<h3> Fault </h3>
<div class="inline-block">
<label for="number-input-1">Start Fault Time:</label>
<button id="number-input-1" class="keyboard-input" data-inline="true">100</button>
<label for="number-input-1">seconds</label>
</div>
</div>
Just add this code to your CSS
.inline-block > p {
float: left;
}
You can specify your CSS as :
.inline-block { /* select the class */
display: inline-block;
}
.inline-block *{ /* select all the child element */
display: inline-block;
}
Adding any element to your class will be aligned in a single line.
Just modify your css with this
.inline-block {
display: inline-block;
}
p{
display:inline-block;
}
select{
display:inline-block;
}
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="collapsible">
<h3> Alarm </h3>
<div class="inline-block">
<p>Alarm Horn:</p>
<select name="flipswitch-1" id="flipswitch-1" data-role="flipswitch" data-wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
<div class="inline-block">
<p>Alarm Light:</p>
<select name="flipswitch-2" id="flipswitch-2" data-role="flipswitch" data- wrapper-class="wide-flipswitch">
<option value="off">OFF</option>
<option value="on">ON</option>
</select>
</div>
</div>
<div data-role="collapsible">
<h3> Fault </h3>
<div class="inline-block">
<label for="number-input-1">Start Fault Time:</label>
<button id="number-input-1" class="keyboard-input" data- inline="true">100</button>
<label for="number-input-1">seconds</label>
</div>
</div>
I have this structure in a page
<div style="float: right">
<div>
<label>
Test type</label>
<select id="selTest1">
</select>
</div>
<div>
<label>
Test category</label>
<select id="selTestCat">
<option value="0">--Please Select--</option>
</select>
</div>
<div style="text-align: right; width: 100%;">
<a style="margin-right:0px;" href="Nothing.aspx" class="button" id="btnTest">Select</a>
</div>
<div>
<input id="hdTest1" runat="server" type="hidden" />
<input id="hdnTest2" runat="server" type="hidden" />
</div>
</div>
everything is aligned properly in IE7
except
<div style="text-align: right; width: 100%;">
<a style="margin-right:0px;" href="Nothing.aspx" class="button" id="btnTest">Select</a>
</div>
in IE8 and other browsers, this div also takes the whole width, and the button is aligned to the right.
But in IE7 the button's div takes the width of the button only.
Try applying display:inline to your button. I have done it for you below, see if it works:
<div style="float: right">
<div>
<label>
Test type</label>
<select id="selTest1">
</select>
</div>
<div>
<label>
Test category</label>
<select id="selTestCat">
<option value="0">--Please Select--</option>
</select>
</div>
<div style="text-align: right; width: 100%;">
<a style="margin-right:0px; display:inline;" href="Nothing.aspx" class="button" id="btnTest">Select</a>
</div>
<div>
<input id="hdTest1" runat="server" type="hidden" />
<input id="hdnTest2" runat="server" type="hidden" />
</div>
</div>
I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!
Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>