I have see some cool effects that put two text input fields in one as a form! I have attached an image for you to see so you know what I mean. Does anyone know how to create such a thing?
Can it be done with CSS?
You can style it up like so - http://jsbin.com/adalot/1/
This should set you off in the right direction
<div id='holder'>
A :<input type='text' id='field1'/>
B: <input type='text' id='field1'/>
</div>
#holder {border: solid 1px red; width: 400px; background-color: white;}
input {border: none;}
input:focus{outline:none;}
It's css .. there is no way to marry 2 distinct <input> into one.
What you saw on the image is a styled <div> containing 2 <input> witch are 'styleless'
test this
table with 4 columns set grouping to rows
and inside insert 2 text box with display style set to none in javascript in any event also with 2 label
and another table with the submit button
Related
I have two texts with different lengths and I'd like to display only one of them (in this case 'come') but preserving as much space as the length of the longer one ('will come') so that I can switch them without changing the sentence width.
Is it possible only with css?
I promise I come to see you in the hospital.
I promise I will come to see you in the hospital.
Yes, it is possible with pure CSS.
You will want to wrap both potential options each in <span> element, and then both of those should in turn be wrapped in another <span>.
You can set each of the child span elements to be display: block; so that they sit on top of each other, and then you can show and hide one or the other by setting height: 0; and overflow: hidden;. This completely hides that one element, but allows it's width to still contribute to the size of the parent.. thus, the parent will be as large as the longest of the two options.
Then, the outer <span> just needs to be display: inline-block; and vertical-align: bottom; to stay in line with the text.
Add some extra styles for prettiness and to do the toggle on hover and you should have something like this:
jsFiddle DEMO
I made this in a few mins you can work off it and improve the basic functionality but here is the gist of what i did.
By using span and visibility:hidden rather than display:none it keeps its space even when its not actually visible.
Giving each button, text input and phrase an id that can use a key to identify it you'll be able to have multiple buttons, phrases and text boxes without needing to name every button, text box and phrase within your jquery.
here is the basic html
<p>A random phrase <span id="word1">to</span> test with</p>
<input type="text" id="txt1"/>
<input type="button" id="btn1" key="1" value="test word"/>
<hr>
<p>Another random phrase <span id="word2">that</span> can be tested</p>
<input type="text" id="txt2"/>
<input type="button" id="btn2" key="2" value="test word"/>
<hr>
<p>Some random text <span id="word3">just</span> to create some test</p>
<input type="text" id="txt3"/>
<input type="button" id="btn3" key="3" value="test word"/>
<hr>
basic jquery
$(document).ready(function(){
$("input[type=button]").on("click", function(){
var which = $(this).attr("key");
var correctWord = $("#word" + which).text();
var userWord = $("#txt" + which).val();
if(correctWord == userWord){
$("#word" + which).html(userWord).css({"visibility" : "visible", "color" : "#00cd00"});
$("#txt" + which).css({"border" : "1px solid #00cd00", "outline" : "none"});
}else{
$("#txt" + which).css({"border" : "1px solid #ff0000", "outline" : "none"});
}
});
});
and the small bit of css
p span{
visibility:hidden;
color:black;
}
You will of course be able to see the correct spelling of the word within the source code but im assuming that wont be an issue with the way you asked the question.
here is a jsfiddle showing it in action
Hope this gets you thinking on a way to carry on with your idea.
EDIT here is an updated JSFIDDLE which is more inline with what your thinking of i think.
You can grab the source code from there and play around with it.
Once again hope this helps.
I have a home search form on frontpage of my website tjsoldit.com. The form is not coded by me, it is provided by my home search real estate company and I embedded it by inserting the two line script calling the form. I can only set some custom css rules for form in my custom css sheet as I am provided with css classes of the different elements of the form. The form is is rendered in a table with rows for all the search fields and their matching labels. The structure of the form can be seen here http://tjsoldit.com/wp-content/uploads/2013/02/4-columns.jpg .
As you can see in the structure, the button is an element of first column of the form. All I want is to center the button so that the button will come in the horizontal center of its line (almost half under column 2 and half under column 3). I have tried all display properties like display:inline;,display:table etc. But not able to do so. Please help.
The css class of search button is: .ds-quick-search-button, class of form fields is .ds-quick-search-name and class of field values is .ds-quick-search-name and more about the structure of form is can be read here: www.diversesolutions.com/design-tips/idx-quick-search-styling-guide-6744
NOTE: I am provided with just an embedding code. So cannot change html. I can just play with its css.
Add colspan="4" (merging of 4 cells) and align="center"
<tr>
<td colspan="4" align="center">
<input type="button" value="Search" class="ds-quick-search-button">
</td>
</tr>
OR
Create an outer div to your table and add the table style to the outer div, increase the padding values padding: 6px 24px 36px 24px;
and then try adding this
.ds-quick-search tr:last-child input{margin:2% 0 0 25%; position:absolute; }
DEMO 2
To give space between column 1 & 2 and between 3 & 4
.ds-quick-search td:first-child{padding-right:15px}
.ds-quick-search td:nth-child(3){padding-right:15px}
Set marging of button 50%, like this:
.ds-quick-search-button {
margin-left:50%;
}
I would like to put a button inside text like this one:
some text1 [button] some text2.
However if I place form&input, line break occures before and after my button like this:
some text1
[button]
some text2
I know I can do this with tables, but I want to avoid it. Is there any CSS based solution to do this? Unfortunately, I can't modify the HTML code, so I have to "inject" that little form statement (with input type submit, and some hidden input tags too) in the generated HTML (done by other software), so it would be hard to reformat it, using tables, etc.
Is it even legal to put form/input tags within text which is enclosed between 'p' tags?
Thanks in advance.
The css solution is white-space:nowrap. Wrap it with a span tag with that rule. For example, assuming you have this rule in the your css file:
.nowrap {
white-space:nowrap
}
You can do it with this html:
<span class="nowrap">some text1 <button>test</button> some text2</span>
If I understand your question correctly, you're injecting a form that contains a button into some text and the form tag is causing the text to wrap (form is a block level element). This is a simple fix with CSS:
HTML:
some text <form><button>test</button></form> some text
CSS:
form
{
display:inline;
}
If you don't want to make a blanket change to all the form elements, simply assign the injected form a CSS class:
HTML:
some text <form class="inlineForm"><button>test</button></form> some text
CSS:
.inlineForm
{
display:inline;
}
Alternative:
You could also add display:inline directly to the form tag:
some text <form style="display:inline"><button>test</button></form> some text
Here's a working jsFiddle.
You should add style="display:inline" to the form tag
hello <form style="display:inline"><input type="hidden" value="blah"/><input type="submit" /></form>world
gives
hello [button] world
try to make all blocks among your text - inline.
like that:
<form style="display: inline">
If there are divs after your form, make them inline too
Hi i would like to know how to change the text box in HTML to just a line rather than a box because i am trying to make a webpage look like a PDF form and for a neat outlook i would like to change the text box design to just a long line so the user can type his name or whatever the field requires him to do..
You'll probably want a more specific selector, but this should make a reasonable starting point:
input {
border-style: none;
border-bottom: solid black 1px;
}
You mean to display a <textarea> as an <input type="text">?
In html, i assume, via <textarea cols="" rows="1"> or via CSS styling the width and height of the element
For single lines of input, I'd use a <input type="text" />, which actually is the default type and can be abbreviated to just <input /> (I'm assuming xhtml in these examples).
I'm trying to recreate a sort of table layout of a contact form.
Here's the current form: http://www.radonsystems.net/contact-us
and this is what the work-in-progress is like
http://www.radonsystems.net/newsite/?do=contact-us
As you can see, there is an issue with the second form - I just don't know how to fix it.
Any ideas on what I'm doing wrong?
The style (CSS) for that part, is nearly 100% copied over, only that I've changed the font, but kept within same family.
OK - the main problem you're having is that there's no HTML element grouping your inputs and labels together (in the same way that the table row groups table cells together). If you add a grouping element, that will go a long way to fixing your layout problems.
A nice way to provide this structure in HTML is to use an unordered list (as the form is, semantically, a list of details that the user needs to provide. A grouped structure could go like:
<ul class="formStructure">
<li>
<label for="field1">Field 1:</label>
<input type="text" id="field1" name="field1"/>
</li>
<li>
<label for="field1">Field 1:</label>
<input type="text" id="field1" name="field1"/>
</li>
</ul>
This will semantically and visually keep the labels and their fields together. You would need to add CSS to turn off the list style (so you don't see bullets), set widths and margins on the labels, etc.
Also, you can improve your HTML practice when laying out your forms. You're missing the <fieldset> and <legend> elements that are part of good (and valid) HTML forms.
Try out float: left; instead of float: right; on your contact-input My testing aligns it all properly.
before
.contact-input
{
border:1px dashed black;
display:table-cell;
float:right;
width:70%;
}
and after
.contact-input
{
border:1px dashed black;
display:table-cell;
float:left;
width:70%;
}