We Keep Coding

How to Center Text in a JavaScript Function?

I have a JavaScript function that displays text based on input in a text field. When a value is entered into the text field, my program will check to see if the value is correct. If it is correct, my program displays, "You are correct!" and if it is incorrect, my program displays, "Try again!"
The text field and button are both centered horizontally on the page, but I cannot figure out how to center the "You are correct!" and "Try again!"
I feel like I have tried everything, but obviously I haven't, considering I can't get it to work.
Here is the code for my JavaScript function:
<center><p>Can you remember how many books I listed at the bottom of the page?</p></center>
<center><input id="numb"></center>
<center><button type="button" onclick="myFunction()">Submit</button></center>
<p id="demo"></p>
<div class="jsFunction">
<script>
function myFunction()
{
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than five or greater than five
if (isNaN(x) || x < 5 || x > 5)
{
text = "Try again!";
}
else
{
text = "You are correct!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</div>
Here is the CSS code for the function:
.jsFunction
{
margin-left: auto;
margin-right: auto;
}
This specific CSS code is only one of many, many attempts I have made at centering the text in the function.
Here is a link to a picture that will show you the problem I am having:
http://i.stack.imgur.com/Hb01j.png
Please help!

Try setting a class on the p tag that contains text-align: center;
Edit
Nesting your script in a div is meaningless as script tags don't get rendered
You can either target #demo in your css (for the text alignment) or add a class align-center that contains the correct style.
I would recommend the latter as the becomes more reusable, whereas you can't reuse an id on the same page

The fact that you are using JavaScript isn't important to this question. I mention it because of the title "How to Center Text in a JavaScript Function" and your attempt to center the actual script element containing your JavaScript code.
You want to center the contents of an element that happens to be controlled by JavaScript, but the answer is CSS-only.
As Ryuu's answer mentions, text-align: center will do the job for (you guessed it) text and other inline-level content.
You should not use the deprecated center tag.
Your attempt to use margins will center something if you apply it to the correct element and the element has a width. That "something" is the element, however, not the contents of the element.
In other words, margin can be used to align the box, not the stuff within the box.
Example 1: centers the element, but the text is still left-aligned.
Example 2: centers the element and its inline-level contents.
.margin-example1 {
width: 200px;
background-color: #ddd;
/* shorthand for margin: 0 auto 0 auto, which is shorthand for specifying each side individually */
margin: 0 auto;
}
.margin-example2 {
width: 200px;
background-color: #aaccee;
margin: 0 auto;
/* we still need this to get the desired behavior */
text-align: center;
}
<div class="margin-example1">Example 1</div>
<div class="margin-example2">Example 2</div>
So how about a text input? Browsers usually style inputs as display:inline-block. This means we can center something inside them (Examples 1 & 2), but to center them within their container we need to change to display:block (Example 3) or because they are inline-like elements themselves, we can set text-align on the parent container (Example 4), see also.
.example1 {
width: 100%;
text-align: center;
}
.example2 {
width: 200px;
text-align: center;
}
.example3 {
display: block;
width: 200px;
text-align: center;
margin: 0 auto;
}
.example4 {
width: 200px;
text-align: center;
}
.example4-parent {
text-align: center;
}
<div>
<input type="text" value="Example 1" class="example1">
</div>
<div>
<input type="text" value="Example 2" class="example2">
</div>
<div>
<input type="text" value="Example 3" class="example3">
</div>
<div class="example4-parent">
<input type="text" value="Example 4" class="example4">
</div>
Layout in CSS can be complicated, but the basics aren't hard.
Note that I have over-simplified my explanation/definitions a bit (you can read all about the formatting model when you are ready).

Open browser-standard colorpicker with javascript without type=color

Does anyone knows a javascript only way to open the browser-standard colorpicker, without using a html field? so i want a javascript what does exactly the same a a click on the html input color field.
Bart

You are going to have to use the input field, you can just hide it off the page. Issue here is the fact that the color dialog requires a click in browsers in order to open up the color dialog. It will not work if you just call click()
document.getElementById("xxx").addEventListener("click", function() {
document.getElementById("c").focus();
document.getElementById("c").value = "#FFCC00";
document.getElementById("c").click();
});
.hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
<input type="color" id="c" tabindex=-1 class="hidden">
<input type="button" id="xxx" value="Click Me!">

Here's a good old "hover-hack" solution that works even in MS Edge:
<input type="color" style='opacity:0;width:100px;position:absolute;'/>
<button>clickme</button>
then bind onchange to the colro element
https://jsfiddle.net/Lnzm0sry/2/

Toggle div on div click horizontally

I made a div which has a background image of a face, I have designed div which contains a paragraph, 2 buttons and an input box.
I know this question has been asked quite often however my situation is different, I'd like for my div with the background image of a face to be clickable so that the div containing everything else slides out from the left.
What is the best method to do this?
HTML
<div id="image"></div>
<div id="container">
<p>I like nutella and croissants</p>
<input id="message" placeholder="type...." required="required" autofocus>
<button type="button" id="send">Send</button>
<button type="button" id="close">Close</button>
</div>
CSS
div#image { background: url(http://i.imgur.com/PF2qPYL.png) no-repeat; }
JQUERY
$(document).ready(function(){
$( "#image" ).click(function() {
jQuery(this).find("#container").toggle();
});
});

Using the article link posted by Raimov (which I actually came across in a Google search before realize he posted it as well ;), we can use jQuery to animate the width when the toggling element is clicked. Remember that a background does not add size to an element, so the toggle with the background image must have a height attribute set. Also, if you have long lines of text in the form, you'll have to wrap them yourself or use another method from the article.
http://jsfiddle.net/iansan5653/wp23wrem/ is a demo, and here is the code:
$(document).ready(function () {
$("#image").click(function () {
$("#container").animate({width: 'toggle'});
});
});
and this CSS is necessary:
div#image {
background: url(http://i.imgur.com/PF2qPYL.png) no-repeat;
height: 36px;
/*height needed to actually show the div (default width is 100%)*/
}
#container {
white-space: nowrap;
overflow: hidden;
}

I created a jsFiddle for you, where after clicking on img, the form hides to the left.
$("#image").click(function() {
var $lefty = $(this).children(); //get the #container you want to hide
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() : 0
});
The resource was taken from:
Tutorial how to slide elements in different directions.

HTML how to remove text in FileUpload field?

When I have a file upload field,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
I want to change or remove this "No file chosen" text.
Is there anyway to achieve this in css or Javascript?
Thanks

You can apply css rules like...
input[type=file]{
color:transparent;
}

First of all. You have to hide your input:
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
Example Fiddle

You can set the value of the image input to "" using jQuery to remove the selected file:
$("#image").val("")
See this fiddle:
http://jsfiddle.net/nfvR9/1/
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.

I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article

HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
take a look of this fiddle:
its working for your needs.
FIDDLE - DEMO
this demo its a reference of this:
stackoverflow question LINK
From the autor:ampersandre

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
JQuery:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
Demo:
http://jsfiddle.net/m44fp2yd/

$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">

The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.

It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
However, there are some hacks which can be used. For details, check out this link.

this text show by browser different browser show different message
chrome show=no file choosen
mozilla show=no file selected
and same as ie

Change of a background image of a button on onclick event

Why does this not work ? In Firebug, when I click on the button, it always says to me that cambiaBandiera is not defined ...
HELP
Alex
CSS
#ITA{
float:right;
margin : 5px 85px;
width:40px;
height:40px;
background : #FFFFFF url("../ITA_off.png") center center no-repeat;
border:0;
}
JAVASCRIPT (in HEAD)
<style type="text/javascript">
function cambiaBandiera() {
test=document.getElementById("ITA");
test.style.backgroundImage="url('../ITA_on.png')";
}
</style>
and this is HTML
<div id="bandiere">
<input type="button" id="ITA" onClick="cambiaBandiera()"> </input>
</div>

I see that you put your script between style tags instead of script tags. Maybe that is the reason it cannot find your function?

You are specifying input in wrongly, adding not needed </input>:
<input type="button" id="ITA" onClick="cambiaBandiera()"></input>
It should be:
<input type="button" id="ITA" onClick="cambiaBandiera()" />
input tag is self closing, it does not need closing tag.

Use plain CSS:
#bandiere:active{
background : #FFFFFF url("../ITA_on.png") center center no-repeat;
}

JS is a standard language, so there's no need for specifying the type.
Also, it's a script not a style as well so:
<script>
function cambiaBandiera() {
test=document.getElementById("ITA");
test.style.backgroundImage="url('../ITA_on.png')";
}
</script>