Sorry for the confusing I caused. I did not paste my code because it is part of my big assignment. Also, I do not sure what parts of code cause the problem. So I paste the parts of the code that contains these three buttons
I want to make these three button display horizontally( Which I think is default). However, the website shows them vertically. Could anyone tell me the reason behind it? what should I do to make them horizontally.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
display: inline-block;
This should solve your problem.
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode.
You could write the following CSS rule:
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you.
Edit:
Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. Instead, set the display property to inline or inline-block to achieve the desired effect.
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set.
Change the display of your buttons to 'inline' instead of 'none'.
First I would place all the buttons within a div so you can property CSS them.
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this:
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
Related
I am trying to add text after each numerical weight value.
Here's what the html looks like:
<table class="shop_attributes">
<div class="field" data-field-id="product_size">
<strong class="field__label field__label--above">product_size</strong>
<div class="field__content">
<p>66 x 81 x 61</p>
</div>
</div>
<div class="field" data-field-id="product_weight">
<strong class="field__label field__label--above">product_weight</strong>
<div class="field__content">
<p>128</p>
</div>
</div>
</table>
The results I want to display is:
product_size
66 x 81 x 61 in
product_weight
128 lbs
From what I know, we can select the data field using
div[data-field-id=product_size]
div[data-field-id=product_weight]
And we can use > p to select just the p elements under the data fields.
This is what I've done
div[data-field-id="product_weight"] > p{
white-space: nowrap;
content: " lbs";
}
However this does not work. What am I doing wrong?
Hello dear I have read your problem carefully, after that I have solved your problem which I have attached as below code.
div[data-field-id="product_size"] > div > p::after {
content: " in";
}
div[data-field-id="product_weight"] > div > p::after {
content: " lbs";
}
I hope my solution will solve your problem.
Note:- If you want to add content after and before any element then you need to use CSS Pseudo-elements (like ::after and ::before)
I am writing an HTML code for the sites.google.com.
I have found the code to wrap the text around the image but I am unable to display the image itself. The image is in google drive(share status is 'viewer for anyone with the link'). Attached below are the code and a snapshot of the error.
<!DOCTYPE html>
<html>
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=default'></script>
</head>
<body>
<h1>Coulomb's Law </h1>
<div><p style="float: right;">
<img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p>
<!--img src="https://drive.google.com/file/d/1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9/view?usp=sharing" width="200px" height="200px" border="1px" allow="autoplay"--></p> </div>
Coulomb's law states that the electrical force between two charged objects is directly proportional to the product of the quantity of charge on the objects and inversely proportional to the square of the separation distance between the two objects.</p>
<p align="justify" style="color:black;font-size:18px;" >
In equation form, Coulomb's law can be stated as</p>
$$ {F = \frac{k* Q_1 * Q_2}{r^2} }$$
<!$$ {J(\theta) =\frac{1}{2m} [\sum^m_{i=1}(h_\theta(x^{(i)}) - y^{(i)})2 + \lambda\sum^n_{j=1}\theta^2_j} $$>
<p align="justify" style="color:black;font-size:18px;" >
where Q<sub>1</sub> represents the quantity of charge on object 1 (in Coulombs), Q<sub>2</sub> represents the quantity of charge on object 2 (in Coulombs), and d represents the distance of separation between the two objects (in meters). The symbol k is a proportionality constant known as the Coulomb's law constant.</p>
</body>
</html>
You have using an invalid HTML (and url).
<img src="https://drive.google.com/thumbnail?id=${1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9}&sz=w${width || 400px}-h${height || 400px}></p>
Use this instead:
<img src="https://drive.google.com/thumbnail?id=1rd3VIZ4tjO4GKNZNSFs4nZr-md0z9jy9&sz=w400px-h400px"></p>
I'm trying to implement a scenario, where a student can answer fill in the blanks type question. There can be multiple number of blanks in a single question. The question is comping from API.
What I'm trying to achieve is, replacing each of the special characters with "text box", students can type their answers in that text boxes. When I'll save the answer, the entire string will be saved.
Eg:
Question: John ___ going ___ school. He is ___ good boy.
This should be rendered as:
John going school. He is good boy.
When sending it to API, I'll send this as a string, like John is going to school. He is a good boy.
How I'll achieve this in Angular with TypeScript..
Any help or idea to do this in other way, is really appreciated.
Thanks.
Here is a stackblitz
You need to split the question by ___ and then append an input after every index of the split result.
parts = [];
inputControls = [];
parts = this.question.split('___');
Then in your template
<div>
<span *ngFor="let p of parts; let i = index;">{{p}}
<span *ngIf="i < parts.length -1">
<input type="text" [(ngModel)]="inputControls[i]" /></span>
</span>
</div>
<div>
<button type="button" style="margin-top: 40px; background-color: green; color: white" (click)="submit()">Submit</button>
</div>
Inside submit method, compose your answer like
submit(){
let answer = '';
for(let i = 0; i < this.parts.length; i++){
answer += this.parts[i];
if(i < this.inputControls.length)
answer += this.inputControls[i];
}
console.log(answer);
}
I have a slider that I am using the following code for
<form>
emails: <br>
<div>
<input type="range" id="item1" min="0" max="100" value="0" />
<span class="spanoutput">0</span><br/>
</div>
Total is: $<span id="endprice">0</span>
</form>
Here's the fiddle: https://jsfiddle.net/j2bh9stu/1/
What I am trying to figure out is to how to set up the slider to show a price of $2 everytime the slider passes the 10,000 mark on a 1mil scale. Right now I have it outputting $2 for every single number, while I need it to output $2 if the slider is between 0-10k, $4 if its between 10,001 and 20k, ect.
I've forked your fiddle and modified the js a bit: https://jsfiddle.net/tfqym7cp/2/
main change is here, in the showTotal function:
// it's always a good idea to give readable names to variables
let emailCount = $(this).val();
// fist, compute the number of units you want to charge
let units = Math.floor(emailCount/1e4) + 1;
// then it becomes easy to compute the total price
total += parseInt(units * prices[myid]);
Cheers!
So in a project I am working on, I have the following code:
foreach (string answer in Model.Answers)
{
<div class="col-sm-2 DANNYSNEWCLASS">
<label class="PreviousAnswerLbl">
#if (answer == Model.PreviousAnswer)
{
<input type="radio" name="answer" value="#answer" checked="checked" /><span>#answer</span>
}
else
{
<input type="radio" name="answer" value="#answer" /><span>#answer</span>
}
</label>
</div>
}
and the number of elements here can change anywhere from 2 to 5, so how do I do some CSS/bootstrap trickery to make it so that the radio buttons are all centred, when currently they all seem to float to the left. All this is already inside a <div class="container"> and <div class="row" and all of that bootstrap stuff.
I want it so that, for example, if there are 5 labels, then the middle of the 3rd label is in the middle of this whole div with 2 labels on either side etc, as well as when there are only 2 labels, there is one on the left side of the screen, and one on the right, preferably without too big of a gap. Hopefully that makes sense, let me know if there is any more clarification needed. Thanks in advance
Its just a little bit of calculations required to decide on how many col-sm-* space to allot to each div. So here is a little trick. First get the number to decide on the each col width
#{
var colWidth = 12 / #Model.Answers.Count();
}
since bootstrap has 12 columned layout.
Then in your for loop you can do this..
foreach (string answer in Model.Answers)
{
<div class="col-sm-"+ #colWidth +" DANNYSNEWCLASS">
....
....
</div>
}
Note: if your count is 5 then the colWidth will be 2. that means total of only 10 columns will be occupied. So that might leave out some space on to the right. For this we can use col-sm-offset-1 which will give a offset of 1 column on left and now we will have 1 column on right. so all the divs will be centered.
So add this to your First Div
<div class="col-sm-"+ #colWidth +" DANNYSNEWCLASS "+ #Model.Answers.Count() == 5 ? "col-sm-offset-1":"" +"">
Just don't use the Bootstrap grid classes. Labels and inputs are inline elements, so you can center them like any bit of text. Just apply a wrapper div around all the labels and apply the text-center Bootstrap class.
<div class="text-center">
foreach (string answer in Model.Answers)
{
<label class="PreviousAnswerLbl">
#if (answer == Model.PreviousAnswer)
{
<input type="radio" name="answer" value="#answer" checked="checked" /><span>#answer</span>
}
else
{
<input type="radio" name="answer" value="#answer" /><span>#answer</span>
}
</label>
}
</div>