I'm using Bootstrap 3.2. I'm trying to figure out if there's a way to show/hide a "col-sz-#" div AND change the "col-sz-#" class in visible divs to resize them to fit the container using checkbox style buttons for each column.
For example, if I start with
<div class="row">
<div class="col-md-2">...</div>
<div class="col-md-2">...</div>
<div class="col-md-2">...</div>
<div class="col-md-2">...</div>
<div class="col-md-2">...</div>
<div class="col-md-2">...</div>
</div>
Then if hide 2 of them and the others resize:
<div class="row">
<div class="col-md-2 hidden">...</div>
<div class="col-md-2 hidden">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
</div>
if the total columns can't divide 12 evenly like 5, then it wouldn't change.
You can do this:
var $myCols = $("#myColumns");
$("#toggleColumns input").change(function() {
var index = +this.value - 1;
var visible = this.checked;
$($myCols.children().get(index)).toggle(visible);
resizeColumns();
});
function resizeColumns() {
var visibleCols = $myCols.children(":visible").length;
var div = Math.floor(12 / visibleCols);
var rem = 12 % visibleCols;
var colSize = (rem === 0) ? div : 2;
$myCols.children().removeClass().addClass('col-md-'+colSize);
}
Demo in jsFiddle
UPDATE:
If you want to act on multiple identical rows, just find all of them with a selector and call a function on each row:
$(".resizeRow").each(function(){
var $eachRow = $(this);
// Do Stuff
});
Updated Fiddle
This is how I solved the issue, I adapted it from https://codepen.io/feger/pen/deIki.
$("input:checkbox:not(:checked)").each(function() {
var column = "table ." + $(this).attr("name");
$(column).hide();
});
$("input:checkbox").click(function(){
var column = "table ." + $(this).attr("name");
$(column).toggle();
});
.clearfix:before,.clearfix:after {
content: " ";display: table; /* 2 */}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
.options {margin-bottom: 8px;}
/* Style checkboxes as Toggle Buttons */
.ck-button {
margin:2px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #aaa;
overflow:auto;
float:left;
color:#aaa;
}
.ck-button:hover {
background-color:#ddd;
}
.ck-button label {
float:left;
width:auto;
margin-bottom: 0;
}
.ck-button label span {
text-align:center;
padding:3px 8px;
display:block;
}
.ck-button label input {
position:absolute;
top:-20px;
}
.ck-button input:checked + span {
color:#111;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div class="options clearfix">
<div class="ck-button">
<label><input type="checkbox" value="1" name="first_name" checked="checked"><span>First Name</span></label>
</div>
<div class="ck-button">
<label><input type="checkbox" value="1" name="last_name" checked="checked"><span>Last Name</span></label>
</div>
<div class="ck-button">
<label><input type="checkbox" value="1" name="email"><span>Email</span></label>
</div>
</div>
<table class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="first_name">First Name</th>
<th class="last_name">Last Name</th>
<th class="email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first_name">Larry</td>
<td class="last_name">Hughes</td>
<td class="email">larry#gmail.com</td>
</tr>
<tr>
<td class="first_name">Mike</td>
<td class="last_name">Tyson</td>
<td class="email">mike#gmail.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Check out this fiddle. Here, I used jquery toggle to show/hide the elements. I think, the fiddle will be a good starting point for you. You can also do this with css (without jquery). Then, you have to set
the display: none property.
Related
I have a site with a video on it. It also has three divs.
<div id="top"></div>
<div id="middle> contains table </div>
<div id="bottom></div>
Now, what I would like to do, is have the video in the "top" div, and play. Once that is done, I want it to go to the "bottom" div and play. Once that is done, I want it to go back to the "top" div and play, and so on.
How would I go about doing this? Because I can't seem to get it working.
Currently I have this, which doesn't work:
<script>
document.getElementById("myVideo").addEventListener("play", function(){
var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
});
document.getElementById("myVideo").addEventListener("ended", function(){
var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
var vidLoop = document.getElementById("myVideo");
function playVid(){
vidLoop.play();
}
});
</script>
Thanks in advance!
So all I have so far is this, as requested:
<!DOCTYPE html>
<div id="top">
<p>top</p>
</div>
<div id="middle">
<table style="width:1000px;">
<tr>
<td align="center" width="33%"><iframe src="https//slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http//slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td algin="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
</tr>
<tr>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
<td align="center" width="33%"><iframe src="http://slashdot.org" style="width:500px;height:400px;"></iframe></td>
</tr>
</table>
</div>
<div id="bottom">
<p>bottom</p>
</div>
<div id="video">
<video id="myVideo" controls autoplay width="300" height="200">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="javascriptSource">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</div>
<div id="script">
<script>
document.getElementById("myVideo").addEventListener("play", function(){
var vidTop = document.getElementById('top').appendChild(document.getElementById('myVideo'));
});
document.getElementById("myVideo").addEventListener("ended", function(){
var vidBottom = document.getElementById('bottom').appendChild(document.getElementById('myVideo'));
var vidLoop = document.getElementById("myVideo");
function playVid(){
vidLoop.play();
}
});
</script>
</div>
I am completely new to JavaScript. I tried using the information from w3schools but I am obviously making some basic mistakes somewhere.
$(document).ready(function() {
var computeTime = 0;
var bottomComputeTime = 0;
var LoopComputeLimit = 50;
var divVideo = $("<div/>")
.attr({
class: "divVideo"
}).html("<video id=\"myVideo\" controls autoplay width=\"300\" height=\"200\"><source src=\"http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4\" type=\"video/mp4\"></video>");
resetPositionToTop();
$("#myVideo").unbind("ended").bind("ended", function(e) {
console.log("bottomComputeTime:", bottomComputeTime,"computeTime:",computeTime);
if (computeTime === 0) {
resetPositionToBottom();
}
if (bottomComputeTime < LoopComputeLimit) {
bottomComputeTime++;
$("#myVideo").get(0).play();
} else if (bottomComputeTime === LoopComputeLimit) {
bottomComputeTime = 0;
computeTime = 0;
resetPositionToTop();
$("#myVideo").get(0).play();
}
});
function resetPositionToTop() {
divVideo.appendTo(".top");
}
function resetPositionToBottom() {
divVideo.appendTo(".bottom");
}
});
*{
font-family:"arial";
font-size:12px;
}
div{
text-align:center;
margin:5px 0px ;
}
#divVideo{
float:left;
}
.top{
min-height:200px;
border:1px solid #cccccc;
}
.middle{
border:1px solid #cccccc;
}
.middle table {
width:100%;
}
.bottom{
min-height:200px;
border:1px solid #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="top">
</div>
<div class="middle">
<table>
<tr>
<td align="center" width="33%">
Middle section
</td>
</tr>
</table>
</div>
<div class="bottom">
</div>
</body>
I have a HTML page. This has a grid created using DIV tags and display property set as table and inner DIV's having display properties as table-row and table-cell. If I need to export such table to excel, is there a way to do it in JavaScript? As of now only way I could think of is rewriting those DIV into html TABLE tags.
<div class="tablediv" id="tablediv">
<div class="tablerow">
<div class="tablecell">
A
</div>
<div class="tablecell">
B
</div>
</div>
<div class="tablerow">
<div class="tablecell">
1
</div>
<div class="tablecell">
2
</div>
</div>
</div>
.tablediv {
display: table;
}
.tablerow {
display: table-row;
}
.tablecell {
display: table-cell;
}
$("#btnExport").click(function(e) {
//Convert DivTable to Table
let TBLDiv=$("<div/>",{id:"TBLDivMain"});
let TBL=$("<table/>");
let TBO=$("<tbody/>");
$('#tablediv .tablerow').each(function(key,value){
let TR=$('<tr/>');
$(value).find(".tablecell").each(function(key,value){
let TD=$('<td/>',{text:$(value).text()});
TR.append(TD);
});
TBO.append(TR);
});
TBL.append(TBO);
TBLDiv.append(TBL);
//Export to Excel
var file = new Blob([TBLDiv.html()], {type:"application/vnd.ms-excel"});
var url = URL.createObjectURL(file);
var a = "<a id='Dow' href='"+url+"' download='filename.xls' ></a>";
$("body").append(a);
var CickDownload= document.getElementById('Dow');
CickDownload.click();
$("body #Dow").remove();
e.preventDefault();
});
.tablediv {
display: table;
}
.tablerow {
display: table-row;
}
.tablecell {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
<br/>
<br/>
<div class="tablediv" id="tablediv">
<div class="tablerow">
<div class="tablecell">A</div>
<div class="tablecell">B</div>
</div>
<div class="tablerow">
<div class="tablecell">1</div>
<div class="tablecell">2</div>
</div>
</div>
I have tried for a while to duplicate the jquery insert row / insert column functionality that I have working for an html table to a css table. I have searched and experimented for a solution without success.
Here is the fiddle to to my work, I took out my attempted code because it was useless.
My code is listed below.
Thanks for any help.
html
div class="ws-css-table" >
<div class="ws-css-table-tr">
<div class="ws-css-table-td" id="1"></div>
<div class="ws-css-table-td" id="2"></div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td" id="3"></div>
<div class="ws-css-table-td" id="4"></div>
</div>
</div>
<br/>
<button id="css-irow">CSS-Insert Row</button><button id="css-icol">CSS-Insert Column</button><br/><br/>
<br/>
<br/>
<table border="1" id="mtable">
<tbody>
<tr>
<td class="container"></td>
<td class="container"></td>
</tr>
<tr>
<td class="container">a</td>
<td class="container">b</td>
</tr>
</tbody>
</table><br/>
<button id="irow">Insert Row</button>
<button id="icol">Insert Column</button><br/><br/>
<br/>There are <span id="rowcount"></span> rows
<br/>There are <span id="colcount"></span> columns
jquery
$('#css-irow').click(function(){
});
$('#css-icol').click(function(){
});
////////////////////////////////////////////
$('#irow').click(function(){
$("#mtable tbody tr:last").clone().appendTo('#mtable tbody').find("td").empty();
var rowCount = $('#mtable tr').length;
$("#rowcount").text(rowCount)
});
////////////////////////////////////////////
$('#icol').click(function(){
$('#mtable tr').append($("<td class='container'>"));
$('#mtable thead tr>td:last').html($('#col').val());
$('#mtable tbody tr').each(function(){$(this).children('td:last').append($(''))});
var col = $('#mtable tbody tr:first > td').length;
$("#colcount").text(col);
});
css
.ws-css-table {
display: table;
}
.ws-css-table-tr {
display: table-row;
}
.ws-css-table-td {
display: table-cell;
border:1px solid #000;
width: 20px;
height:20px;
text-align:center;
vertical-align:middle;
}
This can be accomplished in the following way. This uses the same method you used and clones the divs into their respective locations.
Run the code snippet below ::
$('#css-irow').click(function(){
$(".ws-css-table-tr:last").clone().appendTo('.ws-css-table');
});
$('#css-icol').click(function(){
$(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr');
});
.ws-css-table {
display: table;
}
.ws-css-table-tr {
display: table-row;
}
.ws-css-table-td {
display: table-cell;
border:1px solid #000;
width: 20px;
height:20px;
text-align:center;
vertical-align:middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ws-css-table" >
<div class="ws-css-table-tr">
<div class="ws-css-table-td"></div>
<div class="ws-css-table-td"></div>
</div>
<div class="ws-css-table-tr">
<div class="ws-css-table-td"></div>
<div class="ws-css-table-td"></div>
</div>
</div>
<br/>
<button id="css-irow">CSS-Insert Row</button><button id="css-icol">CSS-Insert Column</button><br/><br/>
This should help you get started.
I am still stuck on what should seem to be a simple concept. I have a very very simple javascript that just does some addition and I want to display the result on a web page. I have tried using a tag but that did not seem to do anything, an now I am trying to use the from the html but that is not working either. This seems like it should be such a simple thing to do but I am obviously missing something. Any help would be greatly appreciated. I have attached the html code, the script, and the css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="title">
<p><img src="logo.jpg" alt="The Lighthouse" />
</p>
<p>The Lighthouse<br />
543 Oak Street<br />
Owensboro, KY 42302<br/>
(270) 555-7511
</p>
</div>
<div id="data_list">
<table rules="rows" cellspacing='0'>
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>2011-09-18</td>
<td id="amount1">125</td>
<td>Nina</td>
<td>Largent</td>
<td>88 Regal Lane<br />Willaimsburg, KY 40789</td>
</tr>
<tr class="yellowrow">
<td>2011-09-18</td>
<td id="amount2">75</td>
<td>Mike</td>
<td>Hunt</td>
<td>404 Barrow Street<br />London, KY 40742</td>
</tr>
<tr>
<td>2011-09-16</td>
<td id="amount3">50</td>
<td>Monica</td>
<td>Lang</td>
<td>743 Stawlings Drive<br />Danville, KY 40423</td>
</tr>
<tr class="yellowrow">
<td>2011-09-15</td>
<td id="amount4">150</td>
<td>William</td>
<td>McKnight</td>
<td>404 Barrow Street<br />Danville, KY 40423</td>
</tr>
<tr>
<td>2011-09-14</td>
<td id="amount5">250</td>
<td>Latrina</td>
<td>Hults</td>
<td>750 Whitehall Road<br />London, KY 40742</td>
</tr>
<tr class="yellowrow">
<td>2011-09-13</td>
<td id="amount6">50</td>
<td>Danny</td>
<td>Shamblin</td>
<td>123 Smith Street<br />Owensboro, KY 42303</td>
</tr>
</tbody>
</table>
</div>
<div id="totals">
<table rules="groups" cellspacing="1">
<thead>
<tr>
<th id="sumTitle" colspan="2">Summary</th>
</tr>
</thead>
<tbody>
<tr>
<th>Contributors</th>
<td id="contributions"> </td>
</tr>
<tr>
<th>Amount</th>
<td id="amount"> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
__
// JavaScript Document
window.onload = function ()
{
//find the div tags called amount1, amount2, ...amount6
var amount1 = 125;
var amount2 = 75;
var amount3 = 50;
var amount4 = 150;
var amount5 = 250;
var amount6 = 50;
var totalAmount = amount1 + amount2 + amount3 + amount4 + amount5 + amount6;
var totalContributors = 6;
$("contributions").value = totalAmount.toFixed(2);
}
__
#title {
width: 600px;
text-align:right;
color: rgb(192,142,90);
border-bottom: 1px solid rgb(232,182,130);
margin-bottom:9px;
font-size:10pt;
height: 100px;
}
#title img {
float: left;
}
#data_list {
float: left;
}
table {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
border: 1px solid brown;
margin-right: 20px;
}
.yellowrow {
background-color: yellow;
}
th {
color: white;
background-color: brown;
padding: 2px 5px;
}
td {
vertical-align: top;
padding: 2px 5px;
}
.amt {
text-align: right;
}
#totals table {
font-size: 12pt;
border: solid black 1px;
}
#totals table th {
text-align: left;
}
#totals table td {
text-align: right;
width: 75px;
}
#totals table #sumTitle {
text-align: center;
background-color: yellow;
color: black;
}
In the below line:
$("contributions").value = totalAmount.toFixed(2);
You have forgot # as contributions is id of td so use this:
$("#contributions").html(totalAmount.toFixed(2));
And .value is the javascript and you are using jQuery so use .html function instead of .value .
And you have not added jquery library in your HTML page, add jquery library also.
And If your JS is in different file then add the file also in the code.
Use this:
<script type="text/javascript" src="your/file/path/*.js"></script>
$("contributions").value = totalAmount.toFixed(2);
this should probably be:
$("#contributions").html(totalAmount.toFixed(2));
So instead it does target the contributions td (based on id because of # just like in css).
And the html sets the innerHTML, you could just use text() instead if it's just plaintext.
2 issues I see:
1) you should be looking for $("#contributions") since you are querying by id.
2) since contributions is a td you should use its innerHTML property to set content, rather than value.
I have a list of things with links to click for more information which use anchor tags to move down the page. Since there is quite a bit of additional information I have it hidden in expandable/collapsable sections.
So far all I've managed to come up with is an expand collapse on the section itself. I know basically nothing about Javascript so what I have include is some stuff I pieced together from some other sites and research.
I would like for the 'click more' anchor tag link to expand the section automatically when clicked, but something that also collapses it similar to what I have now.
Here is the js I managed to pull together
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.all) {
document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block";
}
else {
document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table";
}
document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse";
}
</script>
<style type="text/css">
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
#tbl1 {display:none;}
#lnk1 {
border:none;
background:none;
width:85px;
}
</style>
And here is an example of the body
<body style="background-color: #FFFFFF; margin: 20;">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent">
<input type="checkbox">
<strong>Item one</strong><br />
<em>For more information about Item one click here!</em>
</p>
<br />
<table width="800px" border="0" align="center" cellpadding="4" cellspacing="0">
<tr height="1">
<td bgcolor="#333333" colspan="3"></td>
</tr>
<tr bgcolor="#EEEEEE" height="15">
<td>
<strong><a id="Item1">Item one</a></strong>
</td>
<td bgcolor="#EEEEEE" align="right">
<input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');">
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1">
<tr>
<td colspan="3">
<p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</body>
Thanks for your help!
jquery may be your best route, and in particular the slideToggle or show and hide functions.
In addition, have a peek at jQuery ui accordion
A jquery accordion may be your best route
to hide elements:
document.getElementById(idOfElement).style.display="none"
to show them:
document.getElementById(idOfElement).style.display="block"
lets make a function
function toggleElementDisplay(elementID){
element = document.getElementById(elementID);
if(element.getPropertyValue("display") == "block"){
element.style.display="none";
} else {
element.style.display="block";
}
}
To use it do it like this
<body>
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div>
<div id="stuff">Hello</div>
<script>
function toggleElementDisplay(elementID) {
var element = document.getElementById(elementID),
style = window.getComputedStyle(element),
display = style.getPropertyValue("display");
if (display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
</body>
Here is a demo to help