I have this template that initially shows:
Sidebar1 - Content - Sidebar2
But when the user is in mobile view, I need to disappear the two sidebars and that this can be opened by a button, one at a time...
Button1 - opens sidebar1 to the right.
Button2 - opens sidebar2 to the left.
Anyone know if this is possible or has it done?
Code
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-2 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-6">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas1">
Filters <i class="fa fa-arrow-right"></i>
</button>
</p>
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">
<i class="fa fa-arrow-left"></i>
Details</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div><!--/span-->
<div class="col-xs-3 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
Link
Link
Link
Link
Link
Link
</div>
</div><!--/span-->
</div><!--/row-->
</div>
Javascript
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.row-offcanvas').toggleClass('active');
});
Let's give this a try... I added a new row at the bottom of your current HTML to represent the same exact links that are displayed on the edges but are hidden until a button is toggled. Let's take a look at the HTML first:
HTML
<div class="row">
<div class="col-xs-3 col-sm-3 sidebar-offcanvas hide trial2" id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
<div class="col-xs-3 col-sm-3 sidebar-offcanvas pull-right hide trial " id="sidebar" role="navigation">
<div class="list-group"> Link
Link
Link
Link
Link
Link
</div>
</div>
</div>
As you can see, I copy and pasted the exact same HTML and added the following classes: hide, trial, trial2
Class hide: This is a built in BootStrap class that hides all content within the specified tag. I toggle this class with jQuery later on.
Class trial/trial2 : This is just a random name I chose to make sure the toggle effect was going to work, you can virtually name it whatever you want, but just make sure you reference the tag.
Let's look at the new jQuery:
jQuery
$('[data-toggle=offcanvas]').click(function () {
$('.trial2').toggleClass('hide');
});
$('[data-toggle=offcanvas1]').click(function () {
$('.trial').toggleClass('hide');
});
It's virtually the same code you had but I have it now toggling the hidden content.
Conclusion:
I added a few other things as well - such as the ability to hide the two side-navigation bars as the screen shrinks to a smaller size. Just take a look at the code I will provide via a JSFiddle and you will understand it a bit better.
DEMO JSFiddle
I fixed like this:
HTML
<div class="row-fluid row-offcanvas row-offcanvas-left">
<div class="row-fluid row-offcanvas row-offcanvas-right">
<div id="filters"></div>
<div id="content">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav nav-pills">
<li class="visible-xs"><a> <span class="glyphicon glyphicon-filter" data-toggle="offcanvas" data-target=".sidebar-nav"></span> </a></li>
<li class="visible-xs"><a> <span class="glyphicon glyphicon-list-alt" data-toggle="offcanvas1" data-target=".sidebar-nav"></span> </a></li>
</ul>
</div>
</nav>
</div>
<div id="detail"></div>
</div>
JAVASCRIPT
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas-left').toggleClass('active');
});
$('[data-toggle=offcanvasa]').click(function() {
$('.row-offcanvas-right').toggleClass('active');
});
Related
This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>
I have a similar problem to one I posted before. I have a page built in Bootstrap, and I have several links that jump the reader to anchor links that require an accordion menu to open a specific tab. With the help of Stack Overflow I got it to work, but it only works on my computer and not online (my unfinished draft is on verbiadastra.com - I mean the links under "Services").
My other problem is that I can't get it to open a tab that's on a different page rather than the same one (from index.html to contact.html)
Here's the JS Fiddle.
I would really appreciate your help!
Here's the HTML:
<p>Go to Tab1.</p>
<p>Go to Tab2.</p>
<p>Go to Tab3.</p>
<section id="content">
<div class="container">
<div class="row">
<div class="col-xs-12 wow fadeInDown">
<div class="tab-wrap">
<div class="media">
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><i class="fa fa-comments"></i>Tab1</li>
<li class=""><i class="fa fa-pencil-square-o"></i>Tab2</li>
<li class=""><i class="fa fa-check-square-o"></i>Tab3</li>
</ul>
</div>
<div class="parrent media-body">
<div class="tab-content">
<div class="tab-pane fade active in" id="tab1">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab1-1.png">
<br>
<img class="img-responsive" src="images/services/tab1-2.png">
<br>
<img class="img-responsive" src="images/services/tab1-3.png">
</div>
<div class="media-body">
<a name="Tab1"></a>
<h2>Tab1</h2>
<p>Tab1Tab1Tab1.</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab2.jpg">
</div>
<div class="media-body">
<a name="Tab2"></a>
<h2>Tab2</h2> <p>Tab2Tab2Tab2.</p> </div>
</div>
</div>
<div class="tab-pane fade" id="tab3">
<div class="media">
<div class="pull-left">
<img class="img-responsive" src="images/services/tab3.jpg">
</div>
<div class="media-body">
<a name="Tab3"></a>
<h2>Tab3</h2>
<p>Tab3Tab3Tab3 </p>
</div>
</div>
</div>
</div> <!--/.tab-content-->
</div> <!--/.media-body-->
</div> <!--/.media-->
</div><!--/.tab-wrap-->
</div><!--/.col-sm-6-->
</div><!--/.row-->
</div><!--/.container-->
And here's the JavaScript:
var openTab1 = function() {
$('[href="#tab1"]').tab('show');
}
var openTab2 = function() {
$('[href="#tab2"]').tab('show');
}
var openTab3 = function() {
$('[href="#tab3"]').tab('show');
}
Okay, I figured it out - here's my solution in case it helps anyone, and maybe someone can let me know if I should have done it differently:
I deleted the JavaScript code I posted above, and my links no longer call that function on click. Instead, I write a function that is called on page load: It checks if there is any hashtag (#) in the URL, and if there is, I have it compare its value to the ones I'm using to call the different tabs. Then for each tab id, I have it do the function that opens the tab. Then it also jumps down to a div that has the id of the hashtag (instead of the link anchors, which I learned are obsolete in HTML5). Here's the function:
<body class="homepage" onload="TabHash()">
and then:
<script>
var TabHash = function() {
//check if hash tag exists in the URL
if(window.location.hash) {
//set the value as a variable, and remove the #
var hash_value = window.location.hash.replace('#', '');
if (hash_value == "Tab1Name") {
$('[href="#tab1"]').tab('show');
}
if (hash_value == "Tab2Name") {
$('[href="#tab2"]').tab('show');
}
if (hash_value == "Tab3Name") {
$('[href="#tab3"]').tab('show');
}
}
}
</script>
The links look like this:
Go to Tab 1.
Go to Tab 2.
Go to Tab 3.
I have two sections [divs] on a page which is based on bootstrap. The left section contains a bootstrap panel which initially is resized to occupy the full page and then on clicking a glyph on the panel header, right section slides in sharing the page with the left panel. The contents of the right section are also panels whose contents are dynamic[table and dynamic rows]. The left panel is coded to always occupy window height. What I want is the right side div also to always occupy the window height and for overflow let a scroll appear for the right hand section. If I hard code the height of the right hand section and then give overflow-y: scroll, then it works. But I want to provide both using javascript and the height to be window width. Please help.
<body style = "height: 100%; overflow:hidden;">
<div id="navigationbar">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TRAMM</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" id="menu">
<li>Home</li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li>Page4</li>
</ul>
</div>
</div>
</nav>
</div>
<div id="wrapper">
<div id="main-wrapper" class="col-sm-6">
<div class="panel panel-info" style="margin-top: 1%">
<div class="panel-heading" id="JnName">
<div class="row">
<div class="col-sm-8">
NAME : Somename
</div>
<div class="col-sm-4" style="text-align: right;">
<span class="toggle-button bs-tooltip" id="ShowButton" style="cursor: pointer" data-toggle="tooltip" data-placement="left" title="Click to toggle sidebar">
<span id="glyphbutton" class="glyphicon glyphicon-backward"></span>
</span>
</div>
</div>
</div>
<div class="panel-body" id="SVGPanel">
</div>
</div>
</div>
<div id="sidebar-wrapper" class="col-sm-6 sidebar">
<div class="panel panel-info" style="margin-top: 1%;" id="JunctionParam">
<div class="panel-heading" id="JunctionParameters">Junction Parameters</div>
<div class="panel-body">
<p>
Please fill the content which is more than the window height here...
</p>
</div>
</div>
</div>
</div>
</body>
And I have tried this. But it does not seem to be working
function autoAdjust()
{
var $sidebarwrapperscroller;
$sidebarwrapperscroller = document.getElementById('sidebar-wrapper');
$sidebarwrapperscroller.style.height = $(window).height();
alert("setheight");
$sidebarwrapperscroller.style.overflowY = "scroll";
}
But without any javascript, if I set
<div id="sidebar-wrapper" class="col-sm-6 sidebar" style="height: 700px; overflow-y:scroll;">
Then its working. But I want the height to be set to window height dynamically.
If I understood you you need to add overflow-y:scroll and height:auto to sidebar-wrapper ?
Maybe with jquery?
$("#sidebar-wrapper").click(function() {
if ( $("#sidebar-wrapper").css('display') == 'visible' ){
$("#sidebar-wrapper").css({"height":"auto", "overflow-y":"scroll"});
}else{
$("#sidebar-wrapper").css({"height":"", "overflow-y":""});
}
});
Replace sidebar-wrapper id with your glyph id in .click function
JSFiddle
Hello I have a button in BootStrap. I use "collapse" in a menu and each of those buttons when I push this to collapse this appear with any problem.
But when I push another button with this active appear down on the other.
How change this action? When I push any button this hide this but with the same animation like collapse do it.
Here is the code, when you try it you'll understand me:
<ul class="nav nav-pills">
<li class="dropdown">1<strong class="caret"></strong></li>
<li class="dropdown">2<strong class="caret"></strong></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...1 </li></ul>
</div>
</div>
</div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
<div class="thumbnail bs-example bullet0a">
<div class="media">
<div class="">
<ul><li> Content...2 </li></ul>
</div>
</div>
</div>
</div>
</div>
Try this.
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).height(0);
$('.in').not($(this).data('target')).removeClass('in');
});
});
</script>
You can also try this. (which gives more of a collapse animation)
<script>
$(document).ready(function(){
$('.nav-pills a').click(function(){
$('.in').not($(this).data('target')).collapse('hide');
});
});
</script>
You can add it to the bottom of your page right before the </body> tag or add it to your existing javascript file.
Try that and let me know if it's close to what you want.
I have this code as the layout of the page. The span9 div cotains sections that should apply the scrollspy. Each section is a set of collapsible divs that contains the actual content. The span3 div is the affixed sidebar and must highlight the correct item using the scrollspy.
<div class="span3 module-sidebar">
<ul id="sidebar" data-spy="affix" data-offset="250" data-offset-bottom="0" class="nav nav-list bs-docs-sidenav affix">
<li>
<i class="icon-chevron-right"></i>Module1 Name
</li>
</ul>
</div>
<div class="span9" data-spy="scroll" data-target="#sidebar">
<section id="module1">
<div class="page-header">
<h1>Module1 Name</h1>
</div>
<div class="bs-docs-example">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#function1">Function1 Name</a>
</div>
<div id="function1" class="accordion-body collapse in">
<div class="accordion-inner">
<h3>Topic1 Name</h3>
<p>Topic1 Desc</p>
<h4>SubTopic1 Name</h4>
<p>SubTopic1 Desc</p>
<h4><img src="../assets/img/manuals/module1/function1/step1.png"/></h4>
<p>Step1 Desc</p>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
The problem is that when i collapse the div to show the content, the scrollspy won't recognize the newly occupied space by that collapsible div. and thus highlights the next items in the sidebar when I scroll through the content of that collapsible div.
What i want is for the scrollspy to 'see' the space when the collapsible div is expanded. Any help would really be appreciated. Click here for the fiddle.
You should call .scrollspy('refresh') :
$(document).ready(function () {
$('.accordion').on('shown hidden', function () {
$('body').scrollspy('refresh');
});
});