I'm working on a calculator script which is working fine. (got it form a tutorial). Now I want the buttons to be images. for example 1.jpg 2.jpg etc.
<html>
<form name="calculator">
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
You can simply use image as input type for your form elements. That should work for you i think. :)
If you use the <button> tag instead of <input type="button" you can just do this:
<button>
<img src="example.jpg" />
</button>
Moshiach now!
You should use the <img src="image.jpg"> tag, like:
<html>
<form name="calculator">
<img src="1.jpg" onClick="document.calculator.ans.value+='1'">
<img src="2.jpg" onClick="document.calculator.ans.value+='2'">
<img src="3.jpg" onClick="document.calculator.ans.value+='3'">
<img src="4.jpg" onClick="document.calculator.ans.value+='4'">
<img src="5.jpg" onClick="document.calculator.ans.value+='5'">
<img src="6.jpg" onClick="document.calculator.ans.value+='6'">
<img src="7.jpg" onClick="document.calculator.ans.value+='7'">
<img src="8.jpg" onClick="document.calculator.ans.value+='8'">
<img src="9.jpg" onClick="document.calculator.ans.value+='9'">
<img src="minus.jpg" onClick="document.calculator.ans.value+='-'">
<img src="plus.jpg" onClick="document.calculator.ans.value+='+'">
<img src="mult.jpg" onClick="document.calculator.ans.value+='*'">
<img src="div.jpg" onClick="document.calculator.ans.value+='/'">
<img src="0.jpg" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</html>
Note that this assumes your images are in the same folder as your .html file. If they are in a sub folder, like "images", you would do <img src="images/image.jpg">.
If you want to use that code and just want to add images to the buttons, you can use CSS:
<style>
Form input[type=button]:first-child {background: url(/image/btn1.png) no-repeat;}
Form input[type=button]:nth-child(2) {background: url(/image/btn2.png) no-repeat;}
</style>
You can read more about CSS pseudo-class here:
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
Also, Maybe this old quetions (and answers) will help:
How to add background image for input type="button"?
html input with background image
BTW - I think you should write your own calculator script - it is a basic must...
Good Luck!
Related
I have following HTML button in my webpage:
The buttons have to be fixed width and if texts overflow it's width it should be wrapped by white-space:normal. The Search Staff (F2) and Select Item(F3) are wrapped correctly. But don't know why Company(F8) and Product(F4) buttons are not wrapping inside button. Here is the HTML layout for those button:
.menu_button {
width: 100px;
height: 50px;
background-color: #D0D0D0;
color: #0000FF;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-width: 4px;
white-space: normal;
vertical-align: middle;
}
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company(F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />
</div>
How to fix it?
Try adding a space before the open bracket.
You can use the word-wrap property.
The word-wrap property allows long words to be able to be broken and wrap onto the next line.
CSS syntax:
word-wrap: normal|break-word|initial|inherit;
p.test {
word-wrap: break-word;
}
Another way you can the same result is add an space between parenthesis and the last word letter.
Add space to before "(F8)" and before "(f4)"
I am not sure what you are trying to achieve from this, but still you can add space between "Company" and "(F8)", that would do exactly what you require like in Search Staff (F2), similarly you can do this for Product (F4).
<div id="option_bar">
<input id="check" type="button" class="menu_button" name="list_item" value="Item
(F1)" />
<input id="check" type="button" class="menu_button" name="company" value="Company (F8)" />
<input type="button" class="menu_button" name="search" value="Search Staff
(F2)" />
<input type="button" class="menu_button" name="select_item" value="Select Item
(F3)" />
<input type="button" class="menu_button" name="product" value="Products
(F4)" />
<input type="button" class="menu_button" name="bid" value="Bid
(F6)" />
<input type="button" class="menu_button" name="letter" value="Letter
(F7)" />
<input type="button" class="menu_button" name="price" value="Price
(F9)" />
<input type="button" class="menu_button" name="print" value="Print
(F12)" />
How can I do some arithmetic operation in thymeleaf. I have tested so many ways. But unable to get the output. If U know, Please let me know.
Here is my code:
/*Dummy Content */
<p class="quan-inc-dec">
<input type="hidden" name="productId" th:value="*{product.id}" class="productId"/>
<input type="hidden" name="orderItemId" th:value="*{id}" class="orderItemId"/>
<input type="button" name="minus" class="minus" value="-" autocomplete="off"/>
<input type="text" name="quantity" value="1" class="result" autocomplete="off" th:value="*{quantity}"/>
<input type="button" name="plus" class="plus" autocomplete="off" value="+"/>
</p>
/*Dummy Content End*/
<span th:text="${${obj.baseRetailPrice}*${obj.aa}}"><!-- I need the Result Here --></span>
Like this:
<div th:with="result=${obj.baseRetailPrice * obj.aa}">
<span th:text="${result}"></span>
</div>
I want to have the view like above.
But i am getting something like below.
I was wondering how i can achieve it using bootstrap.
My html code.
<div class="controle-group">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<input id="_spring_security_remember_me"
name="_spring_security_remember_me" type="checkbox" />
<fmt:message key="remember.password.time" />
</div>
I think you want to do something more like..
<form class="form-inline">
<button type="submit" class="btn btn-primary" id="loginButton">
<fmt:message key="authentificate" />
</button>
<label class="checkbox">
<input id="_spring_security_remember_me" name="_spring_security_remember_me" type="checkbox" class="form-control">
<fmt:message key="remember.password.time" />
</label>
</form>
This assumes you're using Bootstrap 2.x
Demo: http://www.bootply.com/73070
Apart the fact you mispelled control in your class, it seems you inserted a screenshot from bootstrap3 but you're using bootstrap2.
I am trying to get form buttons to display inline in a row. I am using CSS to style HTML output from someone else's script, so I have to understand the structure in HTML. I can't change it to something I do understand. See the code below.
What are the default styles for these elements when used in this way? I was under the impression that was a block element and was inline. No matter how I try to style this with CSS, I can't change their position (except with a float, which I'd like to avoid in this case). Help! Thank you :)
<html>
<head></head>
<body>
<div class="comment_buttons">
<form class="button discussion__edit" method="get" action="/doku.php#discussion__comment_form">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="edit" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Edit" class="button" title="Edit" />
</div>
</form>
<form class="button discussion__toogle" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="toogle" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Hide" class="button" title="Hide" />
</div>
</form>
<form class="button discussion__delete" method="get" action="/doku.php">
<div class="no">
<input type="hidden" name="id" value="start" />
<input type="hidden" name="do" value="show" />
<input type="hidden" name="comment" value="delete" />
<input type="hidden" name="cid" value="f871dd5933621b4fe9070bab542ff3ea" />
<input type="submit" value="Delete" class="button" title="Delete" />
</div>
</form>
</div>
</body>
</html>
The form elements are inline, but the form and the div inside the form are block elements.
So change them to inline:
form, form div { display: inline; }
http://jsfiddle.net/fbCgk/
I have the following html code
gogu#yahoo.com wants to be your partner. Do you agree?
<br><input type="button" id="1" name="btn1" class="button" value="Yes" onclick="window.location='confirm/gogu#yahoo.com';" />
<input type="button" id="2" name="btn2" class="button" value="No" onclick="window.location='decline/gogu#yahoo.com';" />
The problem is when i click on the No button it gets me on the same address confirm/gogu#yahoo.com.
How can i redirect properly?
Try using window.location.href=