I have a div called #llens where I need to draw some boxes ( div's). I can't understand why is not drawing. I'm a litle newbie so please be patient if I'm make a great mistakes :P
that's the div :
<div id="estructura" class="collapse ">
<section data-toggle="buttons-radio" class="btn-group btn-group-vertical">
<header id="professor" class="btn btn-primary boto_funcio ">
<h2>Professors</h2>
</header>
<header id="alumne" class="btn btn-primary boto_funcio ">
<h2>Alumnes </h2>
</header>
<header id="text" class="btn btn-primary boto_funcio ">
<h2>Text </h2>
</header>
</section>
</div>
<section class="span9">
<div id="llens"></div>
<!-- llens -->
</section>
Here is the example : http://jsfiddle.net/blackersoul/PLWkS/
I 've done a fork from the code there : http://jsfiddle.net/lollero/kDmqw/
Sometimes a html element is not displayed when it is empty. Try <div id="llens"> </div>.
Related
I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();
A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>
So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!
Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.
Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle
<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>
Hi I am trying to implement tabbed content using bootstraps btn-group. I have some working code, but am not sure it is the best way to go about it.
HTML:
<section class="section" id="tabContent">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="btn-group btn-group-sm btn-group-justified" data-toggle="buttons">
<div class="btn btn-inverse active tabber" id="submission-div">
<label for="submission">Submission</label>
<input type="radio" checked="" id="submission">
</div>
<div class="btn btn-inverse tabber" id="rules-div">
<label for="rules">Rules</label>
<input type="radio" checked="" id="rules">
</div>
</div>
</div>
</div>
<div id="submission-content">
<h1>Submission content</h1>
</div>
<div id="rules-content" class="hide">
<h1>Rules</h1>
</div>
</div>
</section>
CSS:
.hide {
display: none;
}
JQuery:
$(document).on('click','.tabber',function(e){
if ($("#submission-div").hasClass("active")) {
$("#submission-content").addClass("hide");
$("#rules-content").removeClass("hide");
}else if ($("#rules-div").hasClass("active")){
$("#rules-content").addClass("hide");
$("#submission-content").removeClass("hide");
}
});
This JQuery onClick callback works, doesn't make sense when you read it. I think this is because this FXN is fired off before the active class has been updated in the markup.
I was hoping for a better way to accomplish tab content, hopefully with out changing the markup too much cause the styling is correct for the markup.
Any suggestions would be appreciated.
Thanks!
A
Why don't you use the Bootstrap Tabs with data-toggle="tab" and data-target= attributes? (no jQuery needed)..
Demo: http://www.bootply.com/ZueoFI9iFC
<section class="section" id="tabContent">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="btn-group btn-group-sm btn-group-justified"
data-toggle="buttons">
<div class="btn btn-inverse active tabber" id="submission-div"
data-toggle="tab" data-target="#submission-content">
<label for="submission">Submission</label>
<input type="radio" checked="" id="submission"/>
</div>
<div class="btn btn-inverse tabber" id="rules-div"
data-toggle="tab" data-target="#rules-content">
<label for="rules">Rules</label>
<input type="radio" checked="" id="rules"/>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div id="submission-content" class="tab-pane active">
<h1>Submission content</h1>
</div>
<div id="rules-content" class="tab-pane">
<h1>Rules</h1>
</div>
</div>
</div>
</section>
I feel like there's likely a cleaner overall solution, but if you're wanting to just have your JQ make sense and change as little as possible, you can do this:
$(".tabber").click(function(){
if ($(this).is("#submission-div")) {
$("#submission-content").removeClass("hide");
$("#rules-content").addClass("hide");
}else if ($(this).is("#rules-div")){
$("#rules-content").removeClass("hide");
$("#submission-content").addClass("hide");
}
});
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');
});
I want to use a radio button group together with collapse functionality in my bootstrapped website. I want to have 3 buttons and only one button / div active at any given time. I got it to work partly, but not completely.
When I select the first radio button it shows me the first div correctly. If I move to the 2nd div it works great too. If I move back to the 1st div that also shows. But then - if I move to the 3rd button it shows the 3rd div, but if I then go back to the 1st button the 1st div does not show anymore. From that point on I can only show div2 and div3.
Here's what I did.
I created the radio button group as follows:
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn btn-primary btn-large" onclick="showdiv(1);">Save as PDF</button>
<button class="btn btn-primary btn-large" onclick="showdiv(2);">Simple API</button>
<button class="btn btn-primary btn-large" onclick="showdiv(3);">Advanced API</button>
</div>
Then I created three divs as below:
<div id="div1" class="row pricing collapse">
.....
</div>
<div id="div2" class="row pricing collapse">
.....
</div>
<div id="div3" class="row pricing collapse">
.....
</div>
The javascript that I created to show a given div is as follows:
function showdivold(divnr) {
for (var i=1;i<=3;i++)
{
if (i==divnr)
{
$('#div'+i).collapse('show');
}
else
{
$('#div'+i).collapse('hide');
}
}
}
Any help would be greatly appreciated. I use jquery1.8.3 and bootstrap js.
Another problem is that I can't seem to get the default state of the 1st radio button to be set to 'pressed'.
How about this? Is this what you are after? I used Bootstrap 2.3.1 and JQuery 1.9.1. Hope latest versions are not issues for you.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="../assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="btn-group nav nav-tabs" data-toggle="buttons-radio">
<button class="btn btn-large" href="#div1" data-toggle="tab">Save as PDF</button>
<button class="btn btn-large" href="#div2" data-toggle="tab">Simple API</button>
<button class="btn btn-large" href="#div3" data-toggle="tab">Advanced API</button>
</div>
<div class="tab-content">
<div id="div1" class="tab-pane active">
<p>div #1</p>
</div>
<div id="div2" class="tab-pane">
<p>div #2</p>
</div>
<div id="div3" class="tab-pane">
<p>div #3</p>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
</body>
</html>