Div's to share common vertical/horizontal area - javascript

https://jsfiddle.net/5ac2mjpd/53/
"Show data in table" shifts its space whenever clicked. Is there a way to avoid it?
Basically I wanted the contents in the right of "dropdown" to collapse and the content present in the table to expand whenever "show data in table" link in clicked.
<div class="cont">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content1">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details1 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details1-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<div class="cont clear">
<select class="pull-left">
<option>123456789 1234 123</option>
<option>456</option>
</select>
<div class="pull-left in-block">
<div class="side-header">
<div>abc</div>
<div>def</div>
</div>
<div class="side-content2">
<div>ghi</div>
<div>jkl</div>
<div>mno</div>
</div>
</div>
<div class="clear details2 adjust-pos">
<span class="emulate-link"><i class="sprite-right"></i> show data in table</span>
<div class="details2-content hide">
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2 </th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
<tr>
<td>Text 1 </td>
<td>And a big text followed here</td>
<td>Text 3</td>
</tr>
</tbody></table>
</div>
</div>
</div>

Related

Moving table rows from one table to another using Javascript

I've got 2 tables that I'm trying to shift rows between in HTML using JavaScript, but I'm not having much luck at the moment. I've tried plenty of solutions from here but none of them seem to be working for me at the moment!
Currently my HTML code is as per below
.container {
overflow: hidden
}
.tab {
float: left
}
.tab-btn {
margin: 50px
}
button {
display: block;
margin-bottom: 20px
}
<div class="container-fluid">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Manage Schools</h5>
<div class="container">
<div class="tab">
<table class="table table-sm table-hover" id="table1">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td>1</td>
<td>School A</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>2</td>
<td>School B</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>3</td>
<td>School C</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>4</td>
<td>School D</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>5</td>
<td>School E</td>
<td>
<input type="checkbox" "></td>
</tr>
<tr>
<td>6</td>
<td>School F</td>
<td><input type="checkbox "></td>
</tr>
</table>
</div>
<div class="tab tab-btn ">
<button>Add</button>
<button>Remove</button>
</div>
<div class="tab ">
<table class="table table-sm table-hover " id="table2 ">
<tr>
<th>School ID</th>
<th>School Name</th>
<th>Select</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Ideally, once a row has been shifted from table1 to the table2, it can then be removed from the table2 using the remove button. Also being able to select multiple rows and moving them at the same time would be a huge advantage.
Any and all help with the JavaScript would be very much appreciated!

Moving table row from point A to point B with JQuery

On the images you can find page example. Look at the difference between left and right table. Left field is previous iteration, right - current iteration. I need:
(On previous iteration field)
Set background color on the position of new row
Create new row
After that move new row to the right field with JQuery animation.
First image:
Second image:
<div class="control">
<div class="prev_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
</tbody>
</table>
</div>
</div>
<div class="current_iter">
<div class="truthTable">
<table class="TT">
<tbody>
<tr>
<th class="bit" style="border: none"> </th>
<th class="bit" style="background-color: #87D37C">x<sub>2</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>1</sub></th>
<th class="bit" style="background-color: #87D37C">x<sub>0</sub></th>
</tr>
<tr>
<td class="bit" style="border: none">0: </td>
<td class="bit">0</td>
<td class="bit">0</td>
<td class="bit">0</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="controlButtons">
<input id="back" name="back" onclick="controllerSwitchSteps(this.id);" type="button" value="<Previous">
Step <span id="stepNumber">2</span> from <span id="totalSteps">13</span>
<input id="next" name="next" onclick="controllerSwitchSteps(this.id);" type="button" value="Next>">
</div>
</div>

I'd recommend using a jQuery solution myself, you'll have to put in some work yourself and work on the animations yourself, but in order to take the last row of one table and put it on another, you should be able to do something like this:
$("tr").on("click", function() {
$(this).appendTo("#clonedTable");
});
td {
border: 1px solid gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Click on a row to move it to the other table!</p>
<table id="originalTable">
<tr>
<td>Data 1 </td>
<td>Data 2 </td>
<td>Data 3 </td>
</tr>
<tr>
<td>Data 4 </td>
<td>Data 5 </td>
<td>Data 6 </td>
</tr>
</table>
<hr />
<table id="clonedTable">
<tr>
<td>Data 7</td>
<td>Data 8</td>
<td>Data 9</td>
</tr>
</table>

Bootstrap close div box

Hello everyone i started learning bootstrap for a while,
And i want to make close button for div boxes i have this code but the X button doesn't work:
<div class="panel panel-default">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
and here is the JavaScript:
$(document).ready(function() {
$("#hide").click(function(){
$("panel").hide();
});
});

You have to set an Id to the div class="panel" and set this id in a href=#id. THen change data-dismiss="modal" to data-dismiss="panel" and you can remove the javascript code.
You can check it here
https://jsfiddle.net/foyckLaf/
<div class="panel panel-default" id="current-pane">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
Related: How can I dismiss a bootstrap panel using data-dismiss?

There is no panel element, you need .panel:
$(".panel").hide();
panel corresponds to <panel></panel> element, clearly you don't have in in your code.

How to to make collapsing table rows (with IE8 support also)?

I want the last two rows of a table to be folded and collapse when user click on something like "Click Here to see more rows". that would appear as the last row of the first two rows, and turn into some toggle button if a user wants to fold them back.
After understanding there's no way to do this via CSS2 only,
I guess that if I want IE8 support as well I would need to use javascript/jquery.
I found a jquery accordion example and tried to implement it on a table, but it didn't really work.
Here's a fiddle
Tried wrapping up the last two rows with a <div class="open">` but it didn't work (barely have knowledge in jquery, just trying to patch this up for a website).
On IE7 if it's impossible, I want all the rows to be collapased from the start.
HTML:
<table border="1">
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<col style="width:120px;" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr class="open">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>
javascript:
$(document).ready(function () {
$('table').accordion({collapsible: true,active: false,header: '.open' });
});

http://jsfiddle.net/4rkkksmd/4/
javascript:
$('tr.btn td').click(function(){
$('tr.hidden .slide').toggle(200)
});
html:
<table border="1">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5asdfasdfasdf</th>
</tr>
</thead>
<tbody>
<tr class="btn">
<td colspan="5">Click me</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr class="hidden">
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
<td>
<div class="slide">
asd
</div>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</tbody>
</table>

Bootstrap.js tabs doesnt work

I'm pretty lost with Bootstrap.js tabs. I have got this html:
<ul class="button-menu" id="stores" data-tabs="tabs">
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">test</div>
<div class="tab-pane" id="store1">test2</div>
</div>
And I generate with JS it's content
function updateShop(){
var actualStores = "";
for (var i=0;i<actualTown.store.length;i++){
actualStores=actualStores + "<li><a href='#store"+i+"' data-toggle='stores'>"+actualTown.store[i].name+"</a></li>"
$("#store"+i).html(actualTown.store[i].listGoods());
};
$("#stores").html(actualStores);
};
When I view my html via Chrome, I see that it generated this:
<ul class="button-menu" id="stores" data-tabs="tabs">
<li>24/7 Store</li>
<li>Liquiro</li>
</ul>
<div class="tab-content" id="storesGoods">
<div class="tab-pane" id="store0">
<p>24/7 Store: All day, all night, every day!</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Bottled Water</td>
<td>0.84</td>
<td><a class="buy" onclick="buyToInventory(d1)">buy</a>
</td>
</tr>
<tr>
<td>Raush Juice</td>
<td>0.9</td>
<td><a class="buy" onclick="buyToInventory(d2)">buy</a>
</td>
</tr>
<tr>
<td>Bohemia Chips</td>
<td>0.7</td>
<td><a class="buy" onclick="buyToInventory(e2)">buy</a>
</td>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Bread</td>
<td>1.2</td>
<td><a class="buy" onclick="buyToInventory(e1)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" id="store1">
<p>Liquiro: Bad day? Liquiro will fix that, buy some boost for yourself and some chips.</p>
<table class="table table-condensed">
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th></th>
</tr>
<tr>
<td>Vodka Alosuth</td>
<td>2.7</td>
<td><a class="buy" onclick="buyToInventory(d3)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (10°)</td>
<td>0.8</td>
<td><a class="buy" onclick="buyToInventory(d7)">buy</a>
</td>
</tr>
<tr>
<td>Pilsner beer (12°)</td>
<td>0.98</td>
<td><a class="buy" onclick="buyToInventory(d8)">buy</a>
</td>
</tr>
<tr>
<td>Rosito Schnap</td>
<td>0.68</td>
<td><a class="buy" onclick="buyToInventory(d10)">buy</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So it's generated as it's supossed to be but switching tabs doesn't work, when I click on something in ul #stores it doesnt change tab, it just add to url www.something.com/#store0 and nothing happens.
Does anyone know how to make these tabs working, I'm totally lost.
Thanks for any help!

There is nothing like data-toggle="store" in bootstrap docs, it should be data-toggle="tab", and the plugin will figure itself out which is the right target, via the href attribute.
Their example is quite straightforward, just follow it.

Categories

Resources