How to switch the size of one column when there is a click on a sidebar?
Im developing an application with a map in a column and a second column to the right displaying information. There is a sidebar that slides in from the right when activated.
When the sidebar is extended, the main column with the map is col-lg-6 and the column on the right is col-lg-4
Now when the sidebar is closed by clicking on a button, I would like to map column to switch to col-lg-8. Is there a way to do this?
Code for page and sidebar:
<div id="container">
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="panel panel-default" id="features">
<div class="panel-heading">
<h3 class="panel-title">Projects
<button type="button" class="btn btn-xs btn-default pull-right" id="sidebar-hide-btn"><i class="fa fa-chevron-left"></i></button></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-8 col-md-8">
<input type="text" class="form-control search" placeholder="Filter" />
</div>
<div class="col-xs-4 col-md-4">
<button type="button" class="btn btn-primary pull-right sort" data-sort="feature-name" id="sort-btn"><i class="fa fa-sort"></i> Sort</button>
</div>
</div>
</div>
<div class="sidebar-table">
<table class="table table-hover" id="feature-list">
<thead class="hidden">
<tr>
<th>Icon</th>
<tr>
<tr>
<th>Name</th>
<tr>
<tr>
<th>Chevron</th>
<tr>
</thead>
<tbody class="list"></tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row" style="margin-left:0px;">
<div class="col-xs-12 col-sm-6 col-lg-6" style="padding:0;">
<div id="map"></div>
</div>
<div class="col-xs-6 col-lg-4" style="padding-top:0px">
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart fa-2x"></i>
</div>
<div class="panel-body" style="text-align:center">
<div id="chart"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-lg-12" style="padding-top:0px; padding-left:0; padding-right:0;">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-list fa-2x"></i>
</div>
<div class="panel-body" style="text-align:left">
<div id="projects"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Code for activation of sidebar and menu button:
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 50; // Calculate the top offset
$('#map').css('height', (h - offsetTop));
}).resize();
$("#list-btn").click(function() {
$('#sidebar').toggle();
map.invalidateSize();
return false;
});
$("#sidebar-toggle-btn").click(function() {
$("#sidebar").toggle();
map.invalidateSize();
return false;
});
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
map.invalidateSize();
});
EDIT
I have tried using toggleClass and addClass/removeClass but its not working. Here is a jsfiddle to show what happens when the sidebar is hidden.
http://jsfiddle.net/Monduiz/dzo5yg72/
Try this type of trick:
$("#sidebar-hide-btn").click(function() {
$('#sidebar').hide();
$('#mapDiv').removeClass('col-lg-6');
$('#mapDiv').addClass('col-lg-8');
});
Related
Basically, I have an accordion on mobile using the bootstap tab collapse.js. Everything works as should, but when the user clicks on to the next panel below, it seems to scroll them down the page and then back up to the container they clicked.
$(document).on('click', '#pdp-tabs-accordion .js-tabcollapse-panel-heading', function () {
self = $(this);
setTimeout(function () {
console.log('scrolling to');
console.log(self.closest('.panel'));
ScrollToElement(self.closest('.panel'), 95);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-controls="advice" role="tab" data-toggle="collapse" class="js-tabcollapse-panel-heading collapsed" data-parent="#pdp-tabs-accordion" aria-expanded="false">Centre</a></h4> </div>
<div id="advicecentre-collapse" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body js-tabcollapse-panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xl-6 col-xl-offset-3">
<div class="row">
<div class="product-misc product-misc--advice-centre" id="advice-centre">
<h3>Centre</h3>
<p>We have selected the following pages from our Advice Centre as possibly the most relevant for you.</p>
<div class="row">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
What is DWR?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
DWR Washing & Care
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Ratings Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Seams Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
2, 2.5 or 3 Layer Fabric?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Keeping Warm In The Snow
</div>
</div>
</div>
<div class="product-misc__item" itemprop="productID">
<p>We have hundreds more pages, including more Buying Guides and Size Chart.</p>
</div>
<h3 class="margin-top">Size Charts</h3>
<div class="row" id="size-charts">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
686 - Men's Snowboard Jackets Size Chart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions or ideas you might have to why this is happening would be great.
thanks in adavance!
Actually, my web page has 2 div tags which are vertically separated using col-md values. Its like <div class="col-md-6"> and <div class="col-md-6">. Right now both the divs are aligned side-by-side. .
But when I minimize the browser window, then both the divs are aligned one by one.
Code Snippet here:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
My question, could anyone suggest me how to retain the position of the divs?
This is your code with the change 'col-md-6' to 'col-6'. I just linked the latest bootstrap css and its working perfect(side by side). Hope this can help you.
.col-6{
border: solid 1px red;
}
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title"><strong>Virtual Document 1</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node1" selectionMode="multiple" (onNodeSelect) = "selectedLeftNode($event)">
<ay-column field="name" header="Name" ></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}" ></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
<div class="col-6">
<div class="panel panel-info">
<div class="panel-heading text-center">
<div class="panel-title " ><strong>Virtual Document 2</strong></div>
</div>
</div>
<div class="panel-body" style="max-height: 10; ">
<ay-treeTable [value]="node2" selectionMode="multiple" (onNodeSelect) = "selectedRightNode($event)" >
<ay-column field="name" header="Name"></ay-column>
<ay-column field="id" header="Id" [style]="{'width': '130px'}"></ay-column>
<ay-column field="versionLabel" header="Version" [style]="{'width': '70px'}"></ay-column>
</ay-treeTable>
</div>
</div>
</div>
</div>
try this, this will work
<div class="row">
<div class="col col-6">
//first content
</div>
<div class="col col-6">
//second content
</div>
</div>
for more details about this document as #tico suggested.
Edit
Even though this is not a good idea but you said the top one is not working in your case.I know this not suggestible but try this once
<div class="row">
<div class="col-sm-6 col-md-6 col-lg-6">
//first content
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
//second content
</div>
</div>
My VisualForce page has the following code : and javascript tag to show the chart is as below:
<script>
$(document).ready(function() {
$('#idPanelGraphs').on('shown.bs.modal', function () {
createChart('#barChart2', options);
});
});
</script>
<div role="tabpanel" class="tab-pane fade idPanel panel-group" id="vertical-tab">
<div id="idPanelGraphs" class="idPanel panel-group collapsible-group" data-chevron-down="glyphicon-chevron-down" data-chevron-up="glyphicon-chevron-up">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="barChart2" style="height:255px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now as per code as soon as the idpanelGraphs is active the chart should have loaded. But it does not trigger the createChart function.
The same works when changing the modal to collapsable:
$('#idPanelGraphs').on('shown.bs.collapse', function () {
createChart('#barChart2', options);
});
<div role="tabpanel" class="tab-pane fade idPanel panel-group" id="vertical-tab4">
<div id="idPanelGraphs" class="idPanel panel-group collapsible-group" data-chevron-down="glyphicon-chevron-down" data-chevron-up="glyphicon-chevron-up">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseGraphTab">
<h4 class="panel-title">
Graphs
<i class="indicator glyphicon glyphicon-chevron-up"/>
</h4>
</div>
<div id="collapseGraphTab" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="barChart2" style="height:255px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope this works..
<div class="panel panel-default fade">
<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
<div class="panel-body">Panel content</div>
</div>
<button id="test">Show panel</button>
function triggerPanel() {
// All your code can go here..
// createChart('#barChart2', options); ???
$('.panel').toggleClass('fade');
}
$(document).ready(function() {
$('#test').on('click', triggerPanel);
});
Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.
Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.
Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.
I have a web page with Bootstrap 3. In this web page, I have a row. In that row, I always want to show three items. However, I really have 10 items.
When a user clicks the "remove" button, I want to remove an item, and make the next one slide in. However, I have been unable to figure out how to do this within the context of a Bootstrap row. Currently, my items are laid out like this:
<div class="row">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>
To manage the state of the items, I have the following JavaScript:
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(1, 1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(2, 1);
}
The problem is, I can't get the items to slide to the left when an item is removed. In addition, the items wrap instead of just being hidden beyond the first row. I've created a Fiddle here to show the code running.
Add the parent() method to hide the whole Bootstrap column
$(panelId).parent().fadeOut({
duration:500
});
Demo 1
To get the extra pseudo-rows of items to be hidden, you'll probably have to set a max-height and hide overflow on the parent row:
.row.some-class {
max-height: 110px;
overflow: hidden;
}
Demo 2
The drawback here is that you'd have to have items that never change height, and you'll have to use media queries to account for cases where heights change due to text wrapping, etc. You might be better off using one of the many jQuery sliders instead.
You need to fadeOut a parent() as mantioned in the other answer. Also you need to add one more wrapping <div class="frm"> for horizontal scrolling of aligned boxes. This div dedicated to being as wide as set of boxes aligned horisontally. I repalced fadeOut with hide - it looks much better.
there are additional css attributes for .row:
.row {
overflow:hidden;
height: auto;
}
Here is snippet
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$(".frm").width($(".row").width()*visiblePanels.length/2.5);
$(".frm > div").width($(".row").width()/3.4);
$(window).resize(function(){
$(".frm > div").width($(".row").width()/3.4);});
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(1,1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(2,1);
}
.row {
overflow:hidden;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="frm">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>