I have started learning html , css, javascript just 3 weeks ago. Here is my first and very simple program. It has a form , the form has 3 buttons and nothing else. One of the buttons is initially hidden. Clicking on one of the other two buttons would make the hidden button visible. After making it visible, clicking on the third button would hide it again. Thats it , small simple program but it doesnt work. When I click the "show" button , the hidden button does not appear. I have been trying to fix it for 4 hours but I got no clue yet why its not working . Somebody help please. By the way I dont know nothing about jquery, so only javascript help please.
`
<meta charset="UTF-8" />
<title>Useless Form</title>
<script type="text/javascript" language="JavaScript">
var hidden = true ;
function show()
{
if (hidden)
{
document.getElementById("third").style.visibility = 'visible';
hidden = false ;
}
else
{
alert(" The button is already visible !") ;
}
}
function hide()
{
if (!hidden)
{
document.getElementById("third").style.visibility = 'hidden';
hidden = true ;
}
else
{
alert(" The button is already hidden !") ;
}
}
</script>
<style type="text/css">
h1
{
font-family: calibri;
text-align: center;
}
button
{
color: blue ;
font-size: 1em ;
margin-left: 133px;
}
table
{
margin-top: 190px;
}
form
{
position: absolute;
top: 8%;
bottom: 7%;
left: 15% ;
right: 15% ;
color: #fb9 ;
background-color: #420 ;
border: 4px double #C96333 ;
}
body { background-color: #000 ; }
<form>
<h1> My utter useless form </h1> <br>
<table>
<tr>
<td> <button id="first" onclick="show()" >show</button> </td>
<td> <button id="second" onclick="hide()">hide</button> </td>
<td> <button id="third" hidden>effected</button> </td>
</tr>
</table>
</form>
`
add the attribute: type="button" to all the buttons, or else the default attribute of type="submit" is used (causing an undesired page refresh).
<button type="button">
Then...
Your javascript doesn't actually toggle the html hidden attribute. This should work instead
show the element:
document.getElementById("third").removeAttribute("hidden");
hide the element:
document.getElementById("third").setAttribute("hidden", 'true');
Keep in mind, there are a multitude of methods to show and hide elements that you can research, but I'm conforming to your current design choice.
Related
Can someone tell me what the difference between the change and input events is?
I am using jQuery for adding them:
$('input[type="text"]').on('change', function() {
alert($(this).val());
})
It also works with input instead of change.
Maybe some difference in the event ordering relative to focus?
According to this post:
oninput event occurs when the text content of an element is changed through the user interface.
onchange occurs when the selection, the checked state, or the contents of an element have changed. In some cases, it only occurs when the element loses the focus or when pressing return (Enter) and the value has been changed. The onchange attribute can be used with: <input>, <select>, and <textarea>.
TL;DR:
oninput: any change made in the text content
onchange:
If it is an <input />: change + lose focus
If it is a <select>: change option
$("input, select").on("input", function () {
$("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
$("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
$("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
$("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
<option>Alice</option>
<option>Bob</option>
<option>Carol</option>
<option>Dave</option>
<option>Emma</option>
</select>
<pre></pre>
The change event fires in most browsers when content is changed and
the element loses focus. It's basically an aggregate of changes. It will not fire for every single change as in the case input event.
The input event fires synchronously on change of the content for the element. As such, the event listener tends to fire more frequently.
Different browsers do not always agree whether a change event should be fired for certain types of interaction
It seems that this question has become one of the those questions that I visit from time to time. I'm not a fan of reading walls of text for simple things. So I decided to post a practical answer.
Using the following demo, one can examine which events are fired and in what order.
let eventsToListen = [
"focus",
"blur",
"input",
"change",
];
let inputs = Array.from(
document.querySelectorAll("#inputs :is(input, textarea, select)")
);
inputs.forEach(input => {
input.eventQueue = [];
let queueLimit = eventsToListen.length * 2;
let queueDisplay = input.closest("td").nextElementSibling;
eventsToListen.forEach(event => {
input.addEventListener(event, () => {
input.eventQueue.push(event);
if (input.eventQueue.length > queueLimit) {
Array(input.eventQueue.length - queueLimit).fill(null).forEach(
_ => input.eventQueue.shift()
);
}
queueDisplay.textContent = input.eventQueue.join(", ");
});
});
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
body {
font-family: sans-serif;
box-sizing: border-box;
background-color: hsl(0, 0%, 90%);
}
#inputs {
margin: 1em;
}
#inputs td {
padding: 0.1em;
}
#inputs td:nth-child(2) :not(input[type=radio]):not(input[type=checkbox]) {
width: 100%;
}
#inputs label {
display: table;
}
#inputs td:last-child {
font-style: italic;
font-size: 0.8em;
opacity: 0.7;
padding-left: 1em;
}
#notices {
margin: 1em;
}
#notices ul {
padding-left: 2em;
line-height: 2;
}
#notices > ul {
margin-top: 0.5em;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
transform: scale(1.5);
}
<table id="inputs">
<tr>
<td>text</td>
<td><input type="text" /></td>
<td></td>
</tr>
<tr>
<td>number</td>
<td><input type="number" /></td>
<td></td>
</tr>
<tr>
<td>textarea</td>
<td><textarea></textarea></td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>
<select>
<option>-</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td rowspan="2">radio</td>
<td>
<label><input type="radio" name="something" /> Option 1</label>
</td>
<td></td>
</tr>
<tr>
<td>
<label><input type="radio" name="something" /> Option 2</label>
</td>
<td></td>
</tr>
<tr>
<td style="padding-right: 0.5em">checkbox</td>
<td>
<label><input type="checkbox" name="something2" /> Option 1</label>
</td>
<td></td>
</tr>
</table>
<hr>
<div id="notices">
notice that:
<ul>
<li>"input" event can occur multiple times before a "change" event occurs on text/number/textarea</li>
<li>"input" and "change" event seem to occur together/sequentially on select</li>
<li>"input"/"change" event might occur multiple times before a "blur" event occurs on select
<ul>
<li>when arrow keys are used to select an option</li>
</ul>
</li>
</ul>
</div>
The most significant difference between these two events is what causes the value change on the <input>.
According to MDN:
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
AKA,
input fires any time the value changes.
change is a little bit more complicated:
The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
In other words,
change fires when the user changes the value.
When exactly it fires depends on the type of <input>:
For...
"radio" and "checkbox":
When element is :checked, either by keyboard or mouse click
"date" and "file":
When a change is explicitly committed, ie. selecting a date or file
"text":
When the element loses focus after its value has been changed, but not committed
Fair warning that browsers are fickle, and don't always agree on events. This is indeed the spec, however, and you should be able to count on these timings.
MDN documentation has a clear explanation (not sure when it was added):
The change event is fired for input, select, and textarea elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
I am hoping to have a navigation bar run across the entire screen, with a purple background and a to have a the menu sit in the middle of the bar. Right now I cant get the background color to work.
My Css:
div#main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
My Html:
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
You are using wrong css selector # is for ids, to select element by class you have to use ., so the first line of your CSS must be: div.main-navigation {
Look for this:
Replace div#main-navigation for div.main-navigation
div.main-navigation {
background-color: #AC56B8;
width: 100%;
height: 100px;
}
<div class="main-navigation">
<ul id="menu">
<li>HOUSE</li>
<li>BABY</li>
<li>MORE</li>
<li>ABOUT</li>
</ul>
</div>
Write . instead of #
# is for id, . is for class.
I have a simple page with a BorderContainer. The top region is a simple ContentPange, and the center region is a TabContainer. On the top region there is a button that creates a dijit.Menu and binds it to the top region. There is also another button that creates a EnhancedGrid and adds it to the TabContainer. The issue is a follows:
Scenario 1) If you create the menu, and then do a right-click, the menu will show correctly, as long as the grid is not created before the menu is shown for the first time.
Scenario 2) Any other option (create the menu, the grid, and then do the right-click, or create the grid, the menu and then do the right-click) will provoke a blink in the page, (like the page is resizing). A scroll bar will be shown for a second on the right side of the body, and the menu will appear for a second, and then disappear. If you click again, the menu will appear, but opening a sub menu will close will close the main menu, and the options in the sub menu will not work.
I've been able to create a small test case. The behavior is reproducible with any version of dojo previous to 1.8. I've also seen that the menu works just fine if the Border Container has an height diferent than 100% (the width does not affect)
I believe the issue is related to that blink. It seems like the moment the menu is shown the layout is resizing, and in that moment the menu lost the focus and closes itself.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - demo</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js' djConfig="parseOnLoad: true, locale: 'en-us'"></script>
<script>
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dijit.Menu");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ContentPane");
</script>
<style type='text/css'>
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojox/grid/enhanced/resources/tundra/EnhancedGrid.css');
#import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/tundra/tundra.css');
</style>
<style type="text/css">
html, body { overflow: auto; width: 100%; height: 100%; margin: 0; }
</style>
<script>
function createMenu(){
var sMenu = new dijit.Menu({});
var pSubMenu = new dijit.Menu();
// Para enviar por mail
pSubMenu.addChild(new dijit.MenuItem({
label: "email 1",
onClick: function(e){
alert(1)
}
}));
pSubMenu.addChild(new dijit.MenuItem({
label: "email 2",
onClick: function(e){
alert(2)
}
}));
// Añadimos el submenu a la entrada de SendTo
sMenu.addChild(new dijit.PopupMenuItem({
label: "SendTo",
popup: pSubMenu
}));
sMenu.addChild(new dijit.MenuItem({
label: "Open"
}))
sMenu.startup();
return sMenu;
}
</script>
</head>
<body class="tundra eco">
<div id="BorderContainerLevel1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%; background: none; border:none; padding:10px 0px 0px 0px;">
<div id="pane-test-1" dojoType="dijit.layout.ContentPane" region="top" style="height: 105px; "><!-- z-index:10-->
La cabecera
<button dojoType="dijit.form.Button" type="button" onclick='launch()'>Create grid</button>
<button dojoType="dijit.form.Button" type="button" onclick='launchMenu()'>Create Menu</button>
</div>
<script>
function launch(){
var layout = [[
{
name: ' ',
hidden: true,
field: 'idDocument'},
{
name: ' ',
field: 'contentType',
width: '8%'},
{
name: "Name",
field: 'name',
width: '62%'},
{
name: "Date",
field: 'date',
width: '20%'},
{
name: "Size",
field: 'size',
width: '10%'}
]];
var i = 0;
var gridId = "grid_" + i
var grid = new dojox.grid.EnhancedGrid({
id: gridId,
query: {
idDocument: '*'
},
title:"titulo",
structure: layout
})
bankerTabContainer.addChild(grid)
grid.startup();
var myJson = {"identifier":"idDocument","items":[{"contentType":"pdf","date":"2011-10-26T16:10:45","documentType":"USERDOCUMENT","documentTypeDescription":"User Document","idDocument":534044,"idUser":"OFFMARA","name":"test II Modules.pdf","size":15704}]}
grid.setStore(new dojo.data.ItemFileWriteStore({
data: myJson
}));
}
</script>
<div dojoType="dijit.layout.TabContainer" id="bankerTabContainer" jsId="bankerTabContainer" style="height: 100%;width: 100%; border: 0px; padding: 0px;" region="center"></div>
</div>
<script>
function launchMenu(){
dijit.byId('BorderContainerLevel1').resize();
var menu1 = createMenu();
menu1.bindDomNode(dojo.byId("pane-test-1"));
}
</script>
</body>
</html>
I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>