I understand with single class instances how toggleClass works, for example
<div class="col-md-9" id="content></div>
$(#content").toggleClass("col-md-12 col-md-9");
This will toggle 12 columns and 9 columns. However, what if I set my class as such?:
<div class="col-sm-10 col-md-9" id="content"></div>
I can't find an example of toggling multiple classes for one element if I'm working with multiple breakpoints. Any clues?
Given your element:
<div class="col-sm-10 col-md-9" id="content"></div>
If you run
$("#content").toggleClass("col-sm-10 col-md-9 col-sm-6 col-md-3");
This will output the following, on the first call
<div class="col-sm-6 col-md-3" id="content"></div>
Then if you ran the toggle function call again, it would revert it back to
<div class="col-sm-10 col-md-9" id="content"></div>
Given your comment response, you would probably need two toggleClass calls
For the sidebar, you could toggle the larger column sizes, replacing them with smaller ones
The content area, you could toggle the column sizes to be larger, given that you made the sidebar smaller. Hypothetical example below.
To toggle the sidebar, you could run the following two toggleClass functions to "toggle" the sidebar.
$("#sidebar").toggleClass("col-sm-6 col-md-4 col-sm-3 col-md-2"); // Make sidebar 1/2 the size (width)
$("#content").toggleClass("col-sm-6 col-md-8 col-sm-9 col-md-10"); // Enlarge the content area
Untested code, but we're simply toggling between the two sets of dimensions for both elements here.
What the above snippet does is scale the sidebar smaller, rather than collapse, this is handy if your "collapse" button resides within your sidebar. If it doesn't then you could of course alter the column sizes to have the sidebar not be there at all.
Related
I saw a possible solution to this HERE, but I'm hoping I can do this without adding a third-party plugin to my evergrowing list of included libraries.
I have a simple Bootstrap 4 layout, a main col-8 section, a secon col-4 sidebar, and underneath a footer:
<div class="container-fluid">
<div class="row row-eq-height m-0 p-0 h-100">
<div class="col-12 col-lg-7 col-xl-8 order-2 order-lg-1 py-3">MAIN CONTENT</div>
<div class="col-12 col-lg-5 offset-lg-7 col-xl-4 offset-xl-8 order-1 order-lg-2 p-0 fixed-side">SIDEBAR</div>
</div>
</div>
<footer class="container-fluid container-footer pt-4 pb-1"></footer>
What I want to do is allow the user to scroll through the MAIN Column, while the FIXED-SIDE sidebar stays fixed (class fixed-side sets position:fixed, top: inherit, z-index: 0). When the footer comes into view, I want to offset the top value by however many pixels the footer is seen.
I have tested in developer tools that this would probably be the easiest way to manipulate the top value of the FIXED-SIDE sidebar. I just do not know how to target the "in-window" height of an element.
I'm looking to accomplish this in javascript or jQuery, instead of importing a new script and calling that script.
Consider using position: sticky; - it could help to achieve your 'fixed position' sidebar, but still allow scrolling in your main <div>.
https://css-tricks.com/position-sticky-2/
I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)
You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..
Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation
I am making an Ionic 3 by 3 even grid that fit to the screen without scrolling horizontally and vertically. I want to use bootstrap's div class.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
<div class="col-xs-4"><img src="/img/pic.jpg></div>
</div>
</div>
I can divide the column into three sections. I don't know how to control the rows? I only want 3 rows.
col-xs is only for Extra Small screens (<768px).
You can read more about Grid options here: http://getbootstrap.com/css/#grid-options
You can simply change your div classes into the "col-lg-4" and you will be good I think, if your screen is bigger than 1200 px.
There is so many ways to control these divs.
.container-fluid .row div
.col-xs-4
You can add another class like "mydiv" and you will be able to control it with .mydiv selector in CSS.
There is alot more ways to control these divs, so do some research, read the bootstrap website and you will be good :)
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
I have a markup arranged as follows in my website:
<body>
<div id="wrapper">
<div id="middle">
<div class="red-container">
<div class="row">
Middle. Row 1.
</div>
</div>
</div>
<div id="right">
<div class="green-container">
<div class="row">
Right. Row 1.
</div>
</div>
</div>
</div>
</body>
The right div as would be obvious has to be towards the right of the middle div.
Here's the fiddle (right div here inside my fiddle somehow is not actually to the right of middle div) : http://jsfiddle.net/NNMYS/
I am trying to achieve a sliding effect here:
All the content from the middle div should slide to the left and get removed after the animation. On the other hand, simultaneously, the content from the right div (which in my case will be added by ajax to the right div) should slide from the right div to the middle div (and removed from the right div). How can that be done?
I could have done a content slider directly by having all the content directly placed separated by positions and sliding to the clicked item. But here since I would be adding content by ajax and also have some responsive implementation, in my case that doesn't seem to possible.
Look at this. I think this might help
http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/