How to auto-focus after changing display from none to block? - javascript

I have a list of inputs under a list of divs respectively. I have a button that when clicked it will switch one input from from not display to display. This is something like:
if (switched) {
document.getElementById("div-xxx").style.display = "block";
}
However, is there a way I could make the input inside the displayed div being auto focused after this switch? I tried something like
document.getElementById('input-xxx').autofocus = true;
after the display code, but there is no autofocus at all.

document.getElementById('input-xxx').focus() will change the focus to the selected element.
document.getElementById('input-xxx').setAttribute('autofocus', true) will assign the autofocus attribute to the html element

object.focus(); will help
if (switched) {
document.getElementById('div-xxx').style.display = "block";
document.getElementById('input-xxx').focus();
}

The only thing that worked for me was
if (switched) {
document.getElementById('div-xxx').style.display = "block";
document.getElementById('old-input').setAttribute('autofocus', false);
document.getElementById('input-xxx').setAttribute('autofocus', true);
document.getElementById('input-xxx').focus();
}

Related

Change color using querySelector

I'm following a Javascript tutorial using a book.
The exercise is change the background color in a <input type="search"> using document.querySelector. When I try to search something with no text in the search box, the background from <input> changes to red. I did it using onsubmit and some conditional. But in the next part, it must returns to white bckground using onfocus and I'm not getting.
The code that I tried is
document.querySelector('#form-busca').onsubmit = function() {
if (document.querySelector('#q').value == '') {
document.querySelector('#q').style.background = 'red';
return false;
}
}
document.querySelector('#form-busca').onfocus = function() {
document.querySelector('#q').style.background = 'white';
}
Can someone help me? Thanks a lot!
almost got it dude.
change:
document.querySelector('#form-busca').onfocus
to:
document.querySelector('#q').onfocus
revised code:
correct sample:
document.querySelector('#form-busca').onsubmit = function() {
if (document.querySelector('#q').value == '') {
document.querySelector('#q').style.background = 'red';
return false;
}
}
document.querySelector('#q').onfocus = function() {
document.querySelector('#q').style.background = 'white';
}
It sounds like you want the input's background color to change to white when the input element is focused.
Try changing your onfocus selector to:
document.querySelector('#q').onfocus ...
You want the onfocus handler to be on the #q element, not on #form-busca; the form's focus doesn't matter, you want to clear the background when the input element gains focus:
document.querySelector('#q').onfocus = function() { ... }
Try the following code:
// select
var h1 = document.querySelector("h1");
// manipulate
h1.style.color = "red";
This will make the color of h1 red.

How to edit the Label Text in Javascript

I am using Label or Div anything in html
<label id="userId" class="normalWeight editInfo"></label>
When page load, i am assigning the value to that id
document.getElementById('userId').innerHTML = allInfo.details.userId;
When i click the edit button, that is text will be editable. and then i will change the text and store into server. How to do this concept
I want like that. without using textbox. Is it possible?
The label has id of userName and you are searching for userId.
Try
document.getElementById('userName').innerHTML = allInfo.details.userId;
To allow editing, you should add a hidden textbox, that will be toggled when you click the edit button.
Assign this the value on load
document.getElementById('userName_Edit').value = allInfo.details.userId;
Then toggle this to visible, and hide the label.
document.getElementById('userName').style.display = "none";
document.getElementById('userName_Edit').style.display = "block";
You can use ajax and the contenteditable attribute.
Something like this?
function edit_label () {
var l = document.getElementById('userID');
if(this.innerHTML == 'Edit') {
this.innerHTML = 'Save';//we set the button's value to 'save'
l.removeAttribute("contentEditable");
}
else {
this.innerHTML = 'Edit';//we set the button's value to 'edit'
l.setAttribute("contentEditable", false);
//Here you should use ajax to send the data.
var data = l.innerHTML;//this will be sent
}
}
document.getElementById('edit_button').onclick = edit_label;
Demo: http://jsfiddle.net/uwaVL/
You should learn ajax before use it.
Ajax tutorial in w3schools: http://www.w3schools.com/ajax/default.ASP

Hide a fixed footer?

Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?
cheers.
JavaScript
<input type="button" id="myButton" onclick="HideFooter()" />
function HideFooter()
{
var display = document.getElementById("myFooter").style.display;
if(display=="none")
document.getElementById("myFooter").style.display="block";
else
document.getElementById("myFooter").style.display="none";
}
JQuery
$("#myButton").click(function(){
if($("#myFooter").is(":visible"))
$("#myFooter").hide();
else
$("#myFooter").show();
});
If you want some other nice effects
$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show
Another method, as Bram Vanroy Suggested:
$("#myButton").click(function(){
$("#myFooter").toggle();
});
It will require JavaScript. Your button click event handler needs to change the display property of the footer to none.
Here's a javascript only version, with the button having and id of "button" and footer id of "footer". This method will allow you to show the footer again after hiding it, if the user wants to see it again.
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('footer');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Or with jQuery:
$("#button").click(function() {
$("#footer").toggle();
});
A nice tutsplus video tutorial for exactly what you need. It's a simple bit of jQuery.

javascript choose what is going to include element

I have two elements, the first one is the default to print on screen
<input id=post-category value="first">
and the other is this, which will only show if some onclick was made and of course the first element must show off
<select id=cat-sel ><option>second</option></select>
UPDATED
I tried this code
el = document.getElementById("post-category");
el.style.visibility = "hidden";
el2 = document.getElementById("cat-sel");
el2.style.visibility = "visible";
but the problem here is, the 2nd element is indented. because it escapes the space for the 1st element. I don't like that, I wanted them to be on the same position
Change to
el = document.getElementById("post-category");
el.style.display = "none";
el2 = document.getElementById("cat-sel");
el2.style.display = "block";
since visible/hidden does not remove the space the element takes up on the page
You need to set display:none on the field you need to hide initially
Assuming a checkbox have
window.onload=function() {
document.getElementById("categoryCheckbox").onclick=function() {
var chk = this.checked;
document.getElementById("post-category").style.display = chk?"none":"block";
document.getElementById("cat-sel").style.display = chk?"block":"none";
}
}
PS: A little more code is needed for the show/hide to survive a reload by the way...
Define CSS for your ID's and fix the position.

changing input text to textarea just like in facebook

i would like to replicate that you see a regular input text and when you click it changes into textarea.
is this a hidden layer or is it actually changing the input to textarea? how to do it?
I do believe it's always a textarea and on focus they just change the height of the textarea.
Edit: yes, it is. They use scripting to do everything with a textarea, there is no input field.
<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer && UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>
One method that I found was to have a text area that begins with a smaller width and height and then to dynamically resize it.
function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
then you would call your function with an onclick event
onclick="function sz(this)"
I found this here
Fellgall Javascript
One problem that he does mention is that this only functions on browsers that support it.
You can combine the jQuery widget you can find here with some coding
Example:
<div id="myform">
<form>
<textarea></textarea>
<button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
var widget = $('#myform textarea');
var button = $('#myform button');
var tarea = widget[0];
// turn the textarea into an expandable one
widget.expandingTextArea();
var nullArea = true;
tarea.value = "What's on your mind?";
widget.focus(function() {
button.css('display', 'block');
if (nullArea) {
tarea.value = "";
nullArea = false;
}
});
widget.blur(function() {
if ($.trim(tarea.value) == "") {
tarea.value = "What's on your mind?";
button.css('display', 'none');
nullArea = true;
}
});
});
</script>
This code will hide by default the post button and will show it only when the textarea is focused or when you already have written something into it (you may want to hide/show a div instead or anything you want).
If jQuery is an option for you at all, there's a jQuery plugin that does just this called Jeditable.
Check out the demos here.
One way to do this is to code a dynamic textarea. This article explains how to do it: http://www.felgall.com/jstip45.htm
Another way to do it is to change the type of the object. Let's say you place your input text in a div tag (its ID being "commentBox". The code would then be:
//when you click on the textbox
function makeTextArea()
{
document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
document.forms[0].getElementById("comments").focus();
}
//when you click outside of the textarea
function backToTextBox()
{
document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}

Categories

Resources