This should have been pretty straightforward using the DOM but I seem to be getting undefined errors.
Basically, I'm trying to say, when a user clicks a button hide one form and replace it with another. Hiding it should have been as simple as setting style.display : none; but it seems style is constantly undefined.
Here's the script
function hideTextForm()
{
var textForm = document.getElementsByClassName("my-text-form");
//var formContent = textForm.contentDocument;
console.log(formContent);
//textForm.visibility='false';
//textForm.visible(false);
//textForm.style.visibility = "hidden";
//formContent.display = "none";
formContent.style.display = "none";
console.log(textForm);
/*this returns:
<div class="my-list-form">
<form id="list-form" class="list-form" name="list-form">
<label>list form here</label>
</form>
</div>*/
console.log("Text form should be hidden");
}
This is only half the different attempts. My gut tells me that the way I'm calling the element is wrong with getElementsByClassName. I'm either calling the wrong element or trying to display it wrong.
Heres the HTML:
<div class="analysis">
<div class="analysis-columns">
<div class="analysis-static">
<table align = "left" border ="1" id="static-column-table" class="my-columns" >
<tr id="tr-static">
<th id="table-comment-head">
<b>Comments</b>
</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button class="column-button" value="Files">Files</button></td></tr>
<tr><td><button class="column-button" value="Internal Links">Internal Links</button></td></tr>
<tr><td><button class="column-button" value="External Links">External Links</button></td> </tr>
</table>
</div>
<div class="analysis-custom">
<table border ="1" align="right" id="custom-column-table" class="my-columns" >
<tr id="tr-custom">
<th>Custom</th>
</tr>
<tr><td><button class="column-button" value="Page Description">Page Description</button></td></tr>
<tr><td><button class="column-button" value="Keywords">Keywords</button></td></tr>
<tr><td><button value="Add">Add New Field+</button></td></tr>
</table>
</div>
</div>
<div class="analysis-form">
<input type="radio" name="type-of-row" value="List" title="List" onclick="hideTextForm();"/> List</br>
<input type="radio" name="type-of-row" value="Text" title="Text" onclick="hideListForm();"/> Text</br>
<select>
<optgroup label="Type of Row">
<option>List</option>
<option>TextBox</option>
</optgroup>
</select>
</br>
<div class="my-list-form">
<form name ="list-form" class = "list-form" id="list-form">
<label>list form here</label>
</form>
</div>
<div class="my-text-form">
<form name="text-form" class = "text-form" id="text-form">
<label>text form here</label>
<!--<textarea cols="30" rows="2">Enter the name of your new Row here...</textarea>
<button value="Page Description" onclick="addRow()">New TextField</button>-->
</form>
</div>
</div>
</div>
And finally relevant CSS:
div.analysis
{
padding: 1px;
width: 100%;
border: .2em solid #ffcc00;
}
div.analysis-columns
{
/* border-style: solid;*/
border: .2em solid #900;
float: left;
width:55%;
/*border: 5;
border-color: #8a2be2;*/
display: inline;
}
div.analysis-static
{
margin: auto;
padding: 1px;
width:47%;
float:left;
border: .2em solid #0000ff;
/*border: 3;
border-color: #0000FF;*/
/*border-collapse:collapse;*/
font-family: Century Gothic, sans-serif;
}
div.analysis-custom
{
margin: auto;
border: .2em dotted #FFFFDD;
padding: 1px;
float: right;
width:47%;
}
div.analysis-form
{
margin: auto;
width:43%;
border: .2em ridge #b22222;
float: right;
}
div.my-list-form
{
display: inherit;
}
div.my-text-form
{
display: inherit;
}
If anyone is having trouble visualizing it or running it, basically I have a small panel called analysis. Within this panel, is 2 tables (left) and one changing form on the right.
my-list-form and my-text-form should be the only css to worry about.
I'm convinced I'm calling the element wrong so please take a look at document.getElem("my-text-form") and what it returns.
getElmentsbyclassname returns an array
check below link
https://developer.mozilla.org/en/DOM/document.getElementsByClassName
Have a look at the method you're calling -- getElementsByClassName. Look at what it returns. It is not a DOM element -- it is something called a NodeList. This is an object a bit like an array (though technically not an array) that contains all the elements with that class name. A NodeList doesn't have a style property, so you can't set it.
You need to get the first element in the NodeList (using the array notation [0]) and set the style property of that.
var textForm = document.getElementsByClassName("my-text-form")[0];
textForm.style.display = 'none';
formContent[0].style.display = "none".
If you are working with getElementsByClassName, you're always returned an array, so you want to use the first element of that array
Related
I have a form (which I am incidentally generating in PHP from a database) that is using CSS to replace checkboxes. When a checkbox is checked, the containing <li> should have an outline added, and when unchecked, the outline should be removed. Using onchange events works to change these at a click, but the outlines remain when the form is reset. I added onreset events, to try to force the removal, but that doesn't seem to change anything.
I've recreated this behavior in the snippet. (I have not hidden the checkboxes, as the snippet system apparently does not duplicate the normal browser behavior of clicking on the <label> to set or clear the checkbox. [EDIT: This was my mistake; I set the wrong for on the labels, and now that behavior works. The rest stands.])
How do I make this work? I could have a function that manually sets each outline in a reset function, but, as I said, the checkboxes are created from a database, so I'd have to write the PHP to write the js function, which seems like the wrong way to go.
function doCheckboxes(clicked_id) {
if (document.getElementById(clicked_id).checked) {
document.getElementById(clicked_id).parentNode.style.outline = "2px solid black";
} else {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
}
function clearCheckboxes(clicked_id) {
document.getElementById(clicked_id).parentNode.style.outline = "0 none black";
}
li {
display: inline-block;
margin: 10px;
text-align: center;
font-weight: 600;
}
.imageholder {
display: block;
height: 60px;
width: 60px;
background-repeat: no-repeat;
background-clip: content-box;
background-size: cover;
margin: auto;
}
.has-thing1 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing2 .imageholder {
background-image: url(path/to/image.png);
}
.has-thing3 .imageholder {
background-image: url(path/to/image.png);
}
<form action="." method="get">
<fieldset class="subcategory">
<ul>
<li class="has-x has-thing1">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing1" name="has[]" value="thing1">
<label for="x_thing1">
<div class="imageholder"> </div>
Thing1
</label>
</li>
<li class="has-x has-thing2">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing2" name="has[]" value="thing2">
<label for="x_thing2">
<div class="imageholder"> </div>
Thing2
</label>
</li>
<li class="has-x has-thing3">
<input type="checkbox" onChange="doCheckboxes(this.id)" onReset="clearCheckboxes(this.id)" id="x_thing3" name="has[]" value="thing3">
<label for="x_thing3">
<div class="imageholder"> </div>
Thing3
</label>
</li>
</ul>
</fieldset>
<div>
<button type="submit">Submit</button></div>
<button type="reset">Clear Selection</button>
</form>
Create function clearAllCheckboxes
function clearAllCheckboxes(evt) {
const formEl = evt.closest('form')
const allCheckbox = formEl.querySelectorAll('[type=checkbox]')
allCheckbox.forEach(checkbox => {
checkbox.parentNode.style.outline = "0 none black"
})
}
Add an onClick handler to the button "Clear Selection"
<button type="reset" onClick="clearAllCheckboxes(this)">Clear Selection</button>
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
basically all this does is when my button is pressed, it gets information from the box that you type into then adds it to a list. So yeah now i will type a bunch of random words because it says this is too much code and not enough words.
a bat named Jeff flew into the whale blubber to clean himself.
Add <br> to your function as follows:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
I think to achieve what you want you actually need to attach two <br>s. Be also aware of correct use of break tag. In HTML break is <br> in XHTML is <br />.
Run the code snippet below to see it in action.
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value + '<br><br>';
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font>
</p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task" />
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();" />
<br/>
<div id="list"></div>
</center>
Adding line breaks to the end of the appended item is a BAD suggestion - yes it works but you are adding the line-breaks for the single purpose of spacing displayed content. Better to put the appended items in a semantically correct block level element such as a <p> (or apply css to an inline level element display:block) and then add margins to provide the spacing:
function addItem() {
var newItem = document.createElement("p");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//css
#list p{margin:15px 0}
also - just for correctness -you are appending an item to a div with an id of "list" - but this is not a list. Would suggest either changing the name to reduce confusion about a div being a "list" or forget about creating elements that are appended into the div - and just create an actual list and all you have to do is append <li>'s to that list.
function addItem() {
var newItem = document.createElement("li");
newItem.innerHTML = document.getElementById("box").value;
document.getElementById("list").appendChild(newItem);
}
//html
<ul id='list'></ul>
//css
#list li{display:block; margin:15px 0}
Try it like this:
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.classList.add('item');
document.getElementById("list").appendChild(newItem);
}
input[type="text"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
input[type="button"] {
text-align: center;
font-size: 15px;
width: 200px;
height: 60px;
}
.item::after {
content: "\A\A";
white-space: pre;
}
<!DOCTYPE html>
<html>
<head>
<title>2-DO 2DAY</title>
</head>
<body>
<center>
<h1><font size="7" color="1E00FF">2-DO 2DAY</font></h1>
<br/>
<p><font size="8" color="5572FF"><em>What To Do Today?</em></font></p>
<br/>
<br/>
<input type="text" id="box" value="Click To Add Task"/>
<br/>
<br/>
<input type="button" value="Add Task" onclick="addItem();"/>
<br/>
<div id="list"></div>
</center>
</body>
</html>
So all you need is to add a class item to the element and add an pseudo class to item with the content of a line break.
Can some one suggest me an inline edit were when I click on the edit button my label content should be replaced with an input text and I would be able to update it in my mysql db.
My code:
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>
Any help would be appreciated Thanks!!
I would probably just use contentEditable, if possible.
document.addEventListener('DOMContentLoaded', function(){
var btn = document.getElementById("editButton");
btn.addEventListener("click", function(){
var editLabel = document.getElementById("editLabel");
editLabel.contentEditable = true;
editLabel.className = "editActive";
});
});
#editLabel{
margin-bottom: 25px;
display: inline-block;
padding: 5px;
box-sizing: border-box;
}
#editButton{
display: block;
}
.editActive{
border: 1px inset #e3e3e3;
cursor: text;
}
<label id="editLabel">Hello World</label>
<button id="editButton">Edit Label</button>
I wouldn't recommend doing it inline. As you can see the result will not be clean. This will work though.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<label style="display:block;">mylabel</label>
<input type="text" style="display:none;" value="myInput">
<button onclick="$('label').text($('input').val())">edit</button>
I am working on a website and I have a div which is hidden when the page loads, but keeps a small gap between the top header element, and a form.
Under a certain condition, javascript is used to add a class the message div and show a message to the user, after a 5 second timer, the message is then faded out and the classes removed, with another class added to keep the gap between the header element and the form, however, this isn't working, instead when the message div is faded out, the form jumps to the position of where the message was.
Below is my StyleSheet
#message
{
height: 50px;
}
.messageBlank
{
width: 800px;
height: 50px;
background-color: transparent;
border: none;
margin-left: auto;
margin-right: auto;
}
.messageError
{
width: 800px;
height: 50px;
background-color: #ff5555;
border: solid red thin;
margin-left: auto;
margin-right: auto;
}
Below is my javascript which controls showing and hiding the message box
var timer = null;
var MessageTypeEnum = {"error":1, "workingOrComplete":2}
function showMessage(persistent, message, type)
{
clearTimeout(timer);
//$('#message').css({
// position:'absolute',
// padding: '10px',
// left: ($(window).width() - $('#message').outerWidth(true))/2
//});
$("#message")
.hide()
.html(message);
//if (type == "error")
if (type === MessageTypeEnum.error)
{
$("#message").addClass("messageError");
}
//else if (type == "workingComplete")
else if (type === MessageTypeEnum.workingOrComplete)
{
$("#message").addClass("messageWorkingComplete");
}
$("#message").fadeIn("slow");
if (!persistent)
{
timer = setTimeout("hideMessage()", 5000);
}
}
function hideMessage()
{
$("#message")
.fadeOut("slow", function()
{
$("#message").removeClass("messageError");
$("#message").removeClass("messageWorkingComplete");
$("#message").addClass("messageBlank");
});
}
Below is my HTML
<body>
<div id="container">
<header>
<img src="../images/header.png" alt="header" />
<span style="font-weight: bold; padding-left: 50px; color: white; top: 0px; position: absolute;">Boardies Bug Reporter</span>
</header>
<div id="content">
<div id="errorToolbox"> </div>
<div id="message" class="messageBlank"> </div>
<form action="javascript:validate();" novalidate>
<table>
<tr>
<td>Username: </td>
<td>
<input type="text" id="txtUsername" name="txtUsername" autofocus required placeholder="Username" />
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type="password" id="txtPassword" name="txtPassword" required placeholder="Password"
</td>
</tr>
<tr>
<td> </td>
<td class="buttonGroup">
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</td>
</tr>
</table>
</form>
</div>
If you want to keep a gap you should use fadeTo() method. For example to hidde element you can do:
$("#message").fadeTo( 200, 0, function()...
and to show
$("#message").fadeTo( 200, 1);
Where 200 is time in ms of how fast your animation should work.
This method will just change opacity of element and will keep it original height
I am trying to write a piece of code that enables column re-sizing functionality to my data table.But its not working properly.. I explored on internet for couple of days but I could find nothing except some plug-ins. But I don't want to use any plug-in, since my data table is very complicated and if I use them the other functionalities of the table may be destroyed.Thus I tried to write my own. Can you please check and refine my code or suggest any other code that fulfills my spec....
Note: User can re-size the column towards right upto table width but towrds left, its upto td's left position only..
Eidt: Maxwell has given a great alternative..It works fine but in one case.If I try to resize towards left side, its not allowing since td width is fixed to it's content width...But I want to re-size it to left side upto it's its offset().left value by putting td's style to overflow:hidden or some other way....
Here is my piece of code....
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style>
table{
border-collapse:collapse;
}
table td{
border:1px solid red;
}
.vUiDtColResize{
width:2px;
height:20px;
border:1px solid blue;
float:right;
display:block;
cursor:w-resize;
position:relative;
right:-3px;
float:top;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>S.No <div class="vUiDtColResize"></div></td>
<td>Name <div class="vUiDtColResize"></div></td>
<td>Qualif <div class="vUiDtColResize"></div></td>
</tr>
</thead>
<tbody>
<tr> <td>1</td><td>Rama Rao</td><td>M.C.A</td></tr>
<tr> <td>2</td><td>Dushyanth</td><td>B.Tech</td></tr>
<tr> <td>3</td><td>AnandKumar</td><td>M.C.A</td></tr>
<tr> <td>4</td><td>Veera Reddy</td><td>B.Tech</td></tr>
</tbody>
</table>
<div id="helper"></div>
</body>
<script>
$('.vUiDtColResize').each(function(){
var _rsTd = $(this).parent('td');
var _rsTr = _rsTd.parent('tr');
var _rsTdRight,_thisLeft,_rsTdWidth;
$(this).draggable({axis:'x',containment:_rsTd,refreshPositions:true,
create:function(event,ui){
},
start:function(event,ui){
_rsTdRight = _rsTd.offset().left + _rsTd.outerWidth();
},
drag:function(event,ui){
var _sizeDiff = $(this).offset().left - _rsTdRight;
_rsTdRight = $(this).offset().left;
_rsTdWidth = _rsTd.outerWidth() + _sizeDiff;
_rsTd.outerWidth(_rsTdWidth);
},
stop:function(event,ui){
}
});
});
</script>
</html>
I merged your code with some techniques that I found — http://jsfiddle.net/tpqn7/
IMHO, there are still some problems. First of all I suppose it's would be better (also easier) if table headers can be re-sized by pressing each TH, no only small border.
Hope this helps.
After had been exploring in internet for couple of days, I got a good code,which was modified by me to make it satisfies my requirement as well( Of course, my change is bit little.It might be useful to somebody else,so I am posting here...
style
<link rel="stylesheet" href="E:\Examples\BSP\BSPExtensions\jquery-ui-1.8.18.custom.css"/>
<style>
table {
table-layout: fixed;
border-collapse: collapse;
border: 1px solid black;
}
tr.last td {
border-bottom: 1px solid black;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
position: relative;
white-space:nowrap;
padding: 2px 5px;
text-align: left;
overflow:hidden;
}
td.last {
border-right: none;
}
thead td div:first-child{
text-overflow:ellipsis;
overflow:hidden;
}
tbody td div:first-child{
overflow:hidden;
}
.scrollContainer {
overflow:auto;
width:700px;
height:auto;
display:inline-block;
border:1px solid red;
}
#-moz-document url-prefix() {
.resizeHelper,.ui-resizable-e {
position: relative;
float: right;
}
}
</style>
Script
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script>
/**
* Enables resizable data table columns.
**/
(function($) {
$.widget("ih.resizableColumns", {
_create: function() {
this._initResizable();
},
_initResizable: function() {
var colElement, colWidth, originalSize;
var table = this.element;
this.element.find("thead td").resizable({
handles: {"e": ".resizeHelper"},
minWidth: 2, // default min width in case there is no label
// set correct COL element and original size
start:function(event, ui) {
var colIndex = ui.helper.index() + 1;
colElement = table.find("thead > tr > td.ui-resizable:nth-child(" + colIndex + ")");
colWidth = parseInt(colElement.get(0).style.width, 10); // faster than width
originalSize = ui.size.width;
},
// set COL width
resize: function(event, ui) {
var resizeDelta = ui.size.width - originalSize;
var newColWidth = colWidth + resizeDelta;
colElement.width(newColWidth);
// height must be set in order to prevent IE9 to set wrong height
$(this).css("height", "auto");
}
});
}
});
// init resizable
$("#MyTable").resizableColumns();
})(jQuery);
</script>
Your html is to be like:*
<div class="scrollContainer">
<table class="resizable" id="MyTable" width="100%">
<thead>
<tr>
<td class="ui-resizable" style="width:100px;">
<div>
<span >Column 1</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 2</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:300px;">
<div>
<span >Column 3</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:150px;">
<div>
<span >Column 4</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable" style="width:200px;">
<div>
<span >Column 5</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
<td class="ui-resizable last" style="width:100px;">
<div>
<span >Column 6</span>
<div class="resizeHelper ui-resizable-handle ui-resizable-e"></div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr><td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
<tr class="last">
<td><div>Column 1</div></td><td><div>Column 2</div></td>
<td><div>Column 3</div></td><td><div>Column 4</div></td>
<td><div>Column 5</div></td><td><div>Column 6</div></td>
</tr>
</tbody>
</table>
</div>