Here is the code I have: http://jsfiddle.net/Draven/rEPXM/23/
I'd like to know how I can hide that Add submit button until I click the + image to add input boxes to the form.
I don't want to add the submit button next to the input box because I want to be able to add multiple input boxes and submit them all when I click Add.
HTML
<div id="left">
<div class="box">
<div class="boxtitle"><span class="boxtitleleftgap"> </span><span class="boxtitlebulk"><span class="boxtitletext">Folders</span><div style="float: right; margin-top: 4px;"><div class="addplus"> </div></div></span></div>
<div class="boxcontent">
<form method="post" id="folderform" action="page.php?action=list-volunteer-apps" name="folderform">
<a class="even" href="page.php?action=list-volunteer-apps&folder=2">Folder 2 <span class="text">(1)</span></a><a class="even" href="page.php?action=list-volunteer-apps&folder=1">Folder 1 <span class="text">(0)</span></a>
<div id="foldercontainer"><input type="submit" value="Add"></div>
</form>
</div>
</div>
</div>
jQuery
function AddFolder() {
$('#foldercontainer').append('<input name="folder[]" type="text" size="20" />');
}
Just give the button an ID, and make it start hidden
<input type="submit" id="addButton" value="Add" style="display: none;">
Then use the show() jQuery method:
$("#addButton").show();
http://jsfiddle.net/TcFhy/
Here's a way you could do this... also, cleaned up the method used for making these input boxes a bit:
http://jsfiddle.net/mori57/4JANS/
So, in your html you might have:
<div id="foldercontainer">
<input id="addSubmit" type="submit" value="Add">
<input id="folderName" name="folder[]" type="text" size="20" style="" />
</div>
and your CSS might be:
#foldercontainer #addSubmit {
display:none;
}
#foldercontainer #folderName {
display:none;
width: 120px;
background: #FFF url(http://oi47.tinypic.com/2r2lqp2.jpg) repeat-x top left;
color: #000;
border: 1px solid #cdc2ab;
padding: 2px;
margin: 0px;
vertical-align: middle;
}
and your script could be:
// set up a variable to test if the add area is visible
// and another to keep count of the add-folder text boxes
var is_vis = false,
folderAddCt = 0;
function AddFolder() {
if(is_vis == false){
// if it's not visible, show the input boxes and
$('#foldercontainer input').show();
// set the flag true
is_vis = true;
} else {
// if visible, create a clone of the first add-folder
// text box with the .clone() method
$folderTB = $("#folderName").clone();
// give it a unique ID
$folderTB.attr("id","folderName_" + folderAddCt++);
// and append it to the container
$("#foldercontainer").append($folderTB);
}
}
I moved the button out of the folder wrap, and I am showing it when you add a new folder. This way the button will stay at the bottom when adding new folders. I also removed the inline style, and replaced it with a class.
This is used to display the button, just add it to the AddFolder() function:
$('#addBtn').show();
I am hiding it with CSS like this:
#addBtn { display: none;}
I moved the button out of the #foldercontainer, this way it will always stay at the bottom when you add multiple folders, as you wanted:
<div id="foldercontainer"></div>
<input id="addBtn" type="submit" value="Add">
Look here for the jsFiddle: http://jsfiddle.net/kmx4Y/1/
$('form#folderform input[type=submit]').hide();
Then show the add button after you click the submit
http://jsfiddle.net/SQh8L/
Related
i want to disable input meaning unable for user to input something in the input element.
What i am trying to do?
i have two popups (one showing info and other with input element, cancel and submit buttons). now these two are rendered from the same div whose z-index is higher than all other elements in the application. meaning when these dialogues show up the user is unable to click any other element.
Now the problem is i dont want the user to input anything into the input element which is inside the dialogue that i mentioned above.
is there a way that i can do it somehow with z-index? i dont want to add some disabled property to input since it might break the code somewhere.
Below is the html code,
#root {
position: fixed;
z-index: 25;
}
.input_dialog {
flex-grow: 1;
}
.info_dialog {
width: 300px;
}
<div id="root">
<div class="info_dialog">some info</div>
<div class="input_dailog">
<form>
<div class="input_with_actions">
<input>
<div class="actions">
<button>cancel</button>
<button>submit</button>
</div>
</div>
</form>
</div>
</div>
using css you can use pointer-events: none
#root {
position: fixed;
z-index: 25;
}
.input_dialog {
flex-grow: 1;
}
.info_dialog {
width: 300px;
}
<div id="root">
<div class="info_dialog">some info</div>
<div class="input_dialog">
<form>
<div class="input_with_actions">
<input tabindex='-1'>
<div class="actions" >
<button>cancel</button>
<button>submit</button>
</div>
</div>
</form>
</div>
</div>
Update as ankit pointed out the pointer-events doesn't work for the tab navigation. So either you need to give tabindex a negative value , readonly or disabled (will have dimmed css effect)
I have an Import button that I want to look like this:
The HTML for that looks like this:
<button on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();">Import</button>
However, because I want the button to open a file, my research shows I need to use an input control and it looks like this:
Here is the HTML for it:
<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"></input>
I don't need the input box, and I don't need a button to say browse. I want the functionality of the second option, with the look of the first. Is that possible?
Hide the input and use a label whose "for" attribute matches the input's ID. Then simply style the label however you want.
<input type="file" id="abc" hidden>
<label for="abc">Import</label>
Edit
For completeness, here's the actual code that was used. Because the button was wrapped in a label, no extra styling was necessary.
<input id="hiddenImport" style="display:none" type="file" on-read-file="importTasks(contents)" ng-click="importTasks();"/>
<label for="hiddenImport"><button class="btn btn-default" ng-disabled="loading">Import</button></label>
Yes but you will need to use javascript. Make the file input hidden and then make the button click activate it like so
<input id="files" type="file" style="display:none"/>
<button id="upload" type="button"> </button>
<script>
$('#upload').click(function() {
$('#files').click();
});
</script>
You will have to use CSS to make the input box transparent and add a button-like design over it like this:
HTML:
<div class="fileInput">
<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"/>
</div>
CSS:
.fileInput {
margin: 20px;
width: 80px;
height: 20px;
background-color: #FFF;
border: #CCC 2px solid;
overflow: hidden;
text-align:center;
}
.fileInput input {
display: block !important;
width: 80px !important;
height: 20px !important;
opacity: 0 !important;
overflow: hidden !important;
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/h40juz64/
NOTE: If you want the "INPUT" text over the button, you can either add it on a separate div and then use css positioning to move it over the Input box (which can get a bit tricky) OR you can just make an image with the "INPUT" text on it and then use it as a background-image for the button.
I reach my button using tab key and after that when it does a focus, I want it to change color so that it shows that you have reached the button and, when you press the enter key, it should change its color back to original.
<div style="position: absolute; margin: 0; left: 0; bottom: 0">
<input id=" vehicles" class="button calculator large top-right-border transition" type="submit" name="submit" />
</div>
and CSS is
#vehicles:hover{
background: red;
}
#vehicles:focus{
background: red;
}
#vehicles{
background: green;
}
On pressing enter I want my color to go back to green.
Using :active won't revert it back to green for good. You will probably need to use JavaScript to unfocus the button.
<input id="vehicles" type="submit" onkeypress="if (event.which === 13) this.blur()" />
You have a space between the opening parenthesis and vehicles in your id assignment in the input element, so your CSS styling isn't applying to it. It should be
<input id="vehicles".../>
rather than
<input id=" vehicles".../>
Demo
I think you should use :active instead of :focus. It will give you your required solution
<input id="vehicles" class="button calculator large top-right-border transition" type="submit" name="submit" />
#vehicles:hover{
background: red;
}
#vehicles:active{
background: red;
}
#vehicles{
background: green;
}
Find the JSFIDDLE
Its will work for you.
Use jQuery for focus-defocus. for more please go through
http://api.jquery.com/focusout/
hope it helps,
<html><body>
<input type="submit"
id="vehicles"
style="background-color:red;"
onfocus ="change_color()"/>
<script>
function change_color()
{
document.getElementById("vehicles").style.backgroundColor="Blue";
}
</script>
</body>
</html>`
I have the following html that is rendered by a django. Here is an instance of how it could be
html
<div class="treatment container">
<div class="row">
<div class="treatment-phrase col-md-4">
<form action="" method="post" class="inline">
<input type="hidden" name="csrfmiddlewaretoken" value="hbdqhZuNYn83WvZg110TCiENekDqWjUD">
<p class="text-info" data-id="2">TR - 35</p>
<button class="btn btn-default btn-sm edit-phrase">Edit</button>
</form>
</div>
</div>
<div class="row">
<div class="treatment-phrase col-md-4">
<form action="" method="post" class="inline">
<input type="hidden" name="csrfmiddlewaretoken" value="hbdqhZuNYn83WvZg110TCiENekDqWjUD">
<p class="text-info" data-id="3">TR - 34</p>
<button class="btn btn-default btn-sm edit-phrase">Edit</button>
</form>
</div>
</div>
</div>
The css
.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }
.panel-group,
.settings{
padding-top:2em;
}
.diagnosis-phrase,
.treatment-phrase,
.category-item{
padding-bottom: 1em;
padding-top: 0.5em;
border: 1px solid black;
margin-bottom: 0.5em;
}
.diagnosis-phrase input[type="text"],
.treatment-phrase input[type="text"],
.category-item input[type="text"]{
margin-bottom:0.5em;
}
.category-item p{
padding-left: 0.5em;
padding-bottom:0.3em;
border-radius:0.5em;
width:50%;
}
and js
$("#save-phrase").on('click', function (event) {
form = $("form#add-phrase")
form.submit();
});
$(".edit-phrase").on('click', function(event){
event.preventDefault();
var inputBox;
var form = $(this).parent('form');
var p = $(this).siblings('p');
var input = '<input type="text" data-id="'+p.attr('data-id')+'" class="form-control input-sm col-md-4" id="id_phrase" name="phrase" value="'+p.text()+'">';
console.log(input);
if($(this).text() === 'Edit'){
p.replaceWith(input);
form.append('<button name="delete" class="btn btn-default btn-sm">Delete</button>');
form.append('<input type="submit" name="submit" class="btn btn-default btn-sm" value="Save">');
$(this).text('Cancel');
}else{
console.log(p);
inputBox = $(this).siblings('input#id_phrase');
console.log(inputBox);
p.text(inputBox.val());
inputBox.replaceWith('<p class="text-info" data-id="'+inputBox.attr('data-id')+'">'+inputBox.val()+'</p>');
$(this).siblings('input[type="submit"]').remove();
$(this).siblings('button').remove();
$(this).text('Edit');
}
});
What it does is the following:
It replaces a p dom Element with an input element part of a form and posts the editing the phrase or deleting it (if deleted is pressed) Everything works as it should except for one thing. When user hits cancel it replaces the input box with the previous p. But the way I have written the code the older p is lost so when user cancels the value of p that replaces it is the last value typed when it should be the original one (before editing). How can I save the old value. I can't use one global or two because, the phrases are added dynamically. Note that user could be editing three phrases at the same time (but he can save only one at a time). Do you think that is better if editing is limited to one phrase at a time?That would solve the problem of saving the inital value of the phrase before editing.
Here is the bootply of it.
Since you've got a nice id there, how about a hash table
var cache = {};
when needing to cache
cache[inputBox.attr('data-id')] = p.clone();
when you want to retrieve get the old version of the p back grab it from the hash table using the id.
if you want to store multiple versions of a p then use the hash table and have each element be an array implemented as a stack
cheers
I've edited a previous answer to fit this question:
When the p is edited, make a clone of the element for the future, then replace the element with the copy later. By storing the full clone of the p in its own data attribute, it keeps its own history. You can do multiple "undo" clicks since it will continue to pop its own history from its data.
$('.edit-phrase').on('click', function() {
var p = $(this).siblings('p');
p.data('my_clone', $(p).clone(true));
// continue with rest of the logic
});
$('.cancel-edit').on('click', function() {
var p = $(this).siblings('p');
p.replaceWith($(p).data('my_clone'));
// continue with rest of the logic
});
Documentation:
clone
replaceWith
The site is here
I have opt to using the radiobutton's labels as customized buttons for them. This means the radio inputs themselves are display:none. Because of this, the browsers don't tab stop at the radio labels, but I want them to.
I tried forcing a tabindex to them, but no cigar.
I have came up with just putting a pointless checkbox right before the labels, and set it to width: 1px; and height 1px; which seems to only really work on chrome & safari.
So do you have any other ideas for forcing a tab stop at those locations without showing an element?
Edit:
Just incase someone else comes by this, this is how I was able to insert small checkboxes into chrome & safari using JQuery:
if ($.browser.safari) {
$("label[for='Unlimited']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='cash']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
$("label[for='Length12']").parent().after('<input style="height:1px; width:1px;" type="checkbox">');
}
Note: $.browser.webkit was not becoming true...so I had to use safari
a working solution in my case to enable tab selection / arrow navigation was to set the opacity to zero rather than a "display: none"
.styled-selection input {
opacity: 0; // hide it visually
z-index: -1; // avoid unintended clicks
position: absolute; // don't affect other elements positioning
}
Keep the radio input hidden, but set tabindex="0" on the <label> element of reach radio input.
(A tab index of 0 keeps the element in tab flow with other elements with an unspecified tab index which are still tabbable.)
If you separate the label from any field and set a tabIndex you can tab to it and capture mouse and key events. It seems more sensible to use buttons or inputs with type="button",
but suit yourself.
<form>
<fieldset>
<input value="today">
<label tabIndex="0" onfocus="alert('label');">Label 1</label>
</fieldset>
</form>
I have an alternative answer that I think has not been mentioned yet. For recent work I've been reading the Mozilla Developer Docs MDN Docs, Forms, especially the Accessibility Section MDN Docs, Accessible HTML(5), for information related to keyboard accessibility and form structure.
One of the specific mentions in the Accessibility section is to use HTML5 elements when and where possible -- they often have cross-browser and more accessible support by default (not always true, but clear content structure and proper elements also help screen reading along with keyboard accessibility).
Anyway, here's a JSFiddle: JSFiddle::Keyboard Accessible Forms
Essentially, what I did was:
shamelessly copy over some of the source code from a Mozilla source code to a JSFiddle (source in the comments of the fiddle)
create a TEXT-type and assign it the "readonly" HTML5 attribute
add attribute tabindex="0" to the readonly
Modify the "readonly" CSS for that input element so it looks "blank" or hidden"
HTML
<title>Native keyboard accessibility</title>
<body>
<h1>Native keyboard accessibility</h1>
<hr>
<h2>Links</h2>
<p>This is a link to Mozilla.</p>
<p>Another link, to the Mozilla Developer Network.</p>
<h2>Buttons</h2>
<p>
<button data-message="This is from the first button">Click me!</button>
<button data-message="This is from the second button">Click me too!
</button>
<button data-message="This is from the third button">And me!</button>
</p>
<!-- "Invisible" HTML(5) element -->
<!-- * a READONLY text-input with modified CSS... -->
<hr>
<label for="hidden-anchor">Hidden Anchor Point</label>
<input type="text" class="hidden-anchor" id="hidden-anchor" tabindex="0" readonly />
<hr>
<h2>Form</h2>
<form name="personal-info">
<fieldset>
<legend>Personal Info</legend>
<div>
<label for="name">Fill in your name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="age">Enter your age:</label>
<input type="text" id="age" name="age">
</div>
<div>
<label for="mood">Choose your mood:</label>
<select id="mood" name="mood">
<option>Happy</option>
<option>Sad</option>
<option>Angry</option>
<option>Worried</option>
</select>
</div>
</fieldset>
</form>
<script>
var buttons = document.querySelectorAll('button');
for(var i = 0; i < buttons.length; i++) {
addHandler(buttons[i]);
}
function addHandler(button) {
button.addEventListener('click', function(e) {
var message = e.target.getAttribute('data-message');
alert(message);
})
}
</script>
</body>
CSS Styling
input {
margin-bottom: 10px;
}
button {
margin-right: 10px;
}
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
font-weight: bold;
}
.hidden-anchor {
border: none;
background: transparent!important;
}
.hidden-anchor:focus {
border: 1px solid #f6b73c;
}
BTW, you can edit the CSS rule for .hidden-anchor:focus to remove the highlight for the hidden anchor if you want. I added it just to "prove" the concept here, but it still works invisibly as requested.
I hope this helps!
My preference:
.tab-only:not(:focus) {
position: fixed;
left: -999999px;
}
<button class="tab-only">Jump to main</button>
Another great option would be to nest your input + div in a label and hide the input by setting width and height to 0px instead of display: none
This method even allows you to use pseudo-classes like :focus or :checked by using input:pseudo + styleDiv
<label>
<input type="radio">
<div class="styleDiv">Display text</div>
</label>
input
{
width: 0px;
height: 0px;
}
input + .styleDiv
{
//Radiobutton style here
display: inline-block
}
input:checked + .styleDiv
{
//Checked style here
}
Discard the radio-buttons and instead; keep some hidden fields in your code, in which you store the selected value of your UI components.