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.
Related
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!
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>
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>
I'm trying to toggle divs such that only one div is only open at one time. I have looked at the other solutions provided, however the solutions provided are such that if I clicked on the open div again, it does not close. And I am looking for the currently opened div to close again when clicked. Any help given is appreciated. Thanks in advance.
JSFIDDLE:http://jsfiddle.net/ZmDs2/78/
HTML
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td class="title">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr class="description">
<td>hello </td>
</tr>
<tr class="list">
<td class="title">Pizza</td>
<td>Roberta's</td>
<td>Knife</td>
</tr>
<tr class="description">
<td>bye </td>
</tr>
<tr class="list">
<td>Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr class="list">
<td>Chicken & Waffles</td>
<td>cell is row 3, column 1</td>
<td>Spoon</td>
</tr>
</tbody>
</table>
CSS
.description{
display:none;
}
JS:
$('.title').on('click', function() {
var $this = $(this),
$next = $this.next();
// Check if another profile is open and close it
var $last = $('.description:visible', $this.parents('table'));
if ($last.length) {
$last.slideUp('fast');
}
// Show the new profile content only if we are opening a new profile
if ($last.parents('.list').index() !== $this.parent().index()) {
$next.slideDown('fast');
}
});
Just a heads-up to avoid "reinventing the wheel" unless necessary. The bootstrap library has a Collapse element which does what you require.
Check it out and see if it fits the bill.
Created a collapse element from the Twitter Bootstrap library.
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th>Title</th>
<th>From</th>
<th>Utensil</th>
</tr>
</thead>
<tbody>
<tr class="list">
<td data-toggle="collapse" data-target="#cupcakes" class="accordion-toggle">Cupcakes</td>
<td class="from">Molly's Cupcakes</td>
<td>Chopsticks</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="cupcakes">hello</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pizza" class="accordion-toggle">Pizza</td>
<td class="from">Roberta's</td>
<td>Knife</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pizza">bye</div></td>
</tr>
<tr class="list">
<td data-toggle="collapse" data-target="#pasta" class="accordion-toggle">Pasta</td>
<td>Basta Pasta</td>
<td>Spoon</td>
</tr>
<tr>
<td colspan="10" class="hiddenRow"><div class="accordion-body collapse" id="pasta">hi</div></tr>
</tr>
</tbody>
</table>
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.