I have implemented a code which have two tabs and I want to make them appear when the header tab header clicked. but the issue is once I load the page content in the second tab also previewing in first tab. but when i swith in to second tab and come back it working as expect.
any suggestions??
here is my code
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#policy">POLICY PERFORMANCE</a></li>
<li><a data-toggle="tab" href="#claim">CLAIMS</a></li>
</ul>
<div class="tab-content">
<div id="policy" class="tab-pane fade in active">
<div class="col-sm-4">
<h4>By Warranty</h4>
<p ng-show="warrentyChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart4"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-pie chart-options="warrentyChartOptions" chart-data="warrentyChartData" chart-legend="lineChart4" width="250"></canvas>
</div>
</div>
<div class="col-sm-4">
<h4>By Product</h4>
<p ng-show="productChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart2"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="productChartoptions" chart-data="productChartData" chart-legend="lineChart2" width="250"></canvas>
</div>
</div>
<div class="col-sm-4">
<h4>By Make</h4>
<p ng-show="makeChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<canvas ng-hide="makeChartAccess" class="tc-chart" height="250" tc-chartjs-radar chart-options="makeChartOptions" chart-data="makeChartData"></canvas>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<h4>By Country</h4>
<p ng-show="countryChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<div google-chart chart="localchart"> </div>
</div>
</div>
<div class="col-sm-6">
<h4>By Month</h4>
<p ng-show="monthlyChartAccess">* access restricted</p>
<div class="text-center margin-bottom-15">
<canvas ng-hide="monthlyChartAccess" class="tc-chart" height="200" tc-chartjs-line chart-options="monthChartOptions" chart-data="monthChatsData"></canvas>
</div>
</div>
</div>
<div id="claim" class="tab-pane fade in active">
<div class="col-sm-4">
<h4>By Claim Status</h4>
<p ng-show="claimStatusChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart3" style="width:175px"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimStatusChartOptions" chart-data="claimStatusChartData" chart-legend="lineChart3" width="250"></canvas>
</div>
</div>
<!--<div class="col-sm-4">
<h4>By Claim Invoice</h4>
<p ng-show="claimInvoiceChartAccess">* access restricted</p>
<p class="margin-top-20">
<div tc-chartjs-legend chart-legend="lineChart4" style="width:175px"></div>
</p>
<div class="text-center margin-bottom-15">
<canvas class="tc-chart" height="175" tc-chartjs-doughnut chart-options="claimInvoiceChartOptions" chart-data="claimInvoiceChartData" chart-legend="lineChart4" width="250"></canvas>
</div>
</div>-->
</div>
</div>
</div>
Both the tabs has class as active. Add active class to a single tab that you want to see on page load
<div id="policy" class="tab-pane fade in active">
</div>
<div id="claim" class="tab-pane">
</div>
Related
I have a problem and that is I can not update all charts in my program.
I can update one of the four charts with the following command, but I cannot update the other three.
$('.chart').data('easyPieChart').update(60);
This is my html code
<div id="content">
<div class="b-skills">
<div class="container">
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block align:center">
<div class="chart-container">
<div id="CO" class="chart" data-percent="0">
</div>
</div>
<p id="COP">CO</p>
<p id="colim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="CO2" class="chart" class="boba" data-percent="90">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="CO2P">CO2</p>
<p id="valueCO2"></p>
</div>
</div>
</div>
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="Volume" class="chart" data-percent="0">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="laermP">Lautstärke</p>
<p id="laemlim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="yes4" class="chart" data-percent="">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="feuchtigkeitP">Luftfeuchtigkeit</p>
<p id="teamplim"></p>
</div>
</div>
</div>
</div>
</div>
How can i update all four charts separatly, so i can change every chart value independently.
I'm really new to jQuery and only managed to do basic CSS edits so far. I don't have access to the source code, but I need to iterate through each div with class '.card', grab the href of the hyperlink and apply the link to the each respective image so the user can click on the image to in addition to the text.
I tried the following but it had unintended consequences:
Successfully added hyperlink to each image, but was applied multiple times each
Value of hyperlink was 'undefined'
$(function() {
$(".card-img").each(function() { // For each card
var a = $(this).next('a'); // Find its associated anchor
$(".card-img").wrap(''); // And wrap the card image
});
});
Can anyone show me how to do this?
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
Loop over each .card div using .each() and then use $(this) to refer to the card div. Within the loop use .find() to both grab the href as well as .wrap() to wrap the image with the href:
$('.card').each(function() {
var href = $(this).find('a').attr('href');
$(this).find('img').wrap(``)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-1.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 1</p>
</div>
<a class="cta card-cta" href="https://www.webinar1url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-2.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 2</p>
</div>
<a class="cta card-cta" href="https://www.webinar2url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-3.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 3</p>
</div>
<a class="cta card-cta" href="https://www.webinar3url.com">Watch Webinar</a>
</div>
</div>
</div>
<div class="g-c g-c--md4">
<div class="card ">
<div class="card-img">
<img src="webinar-4.png">
</div>
<div class="card-content">
<div class="card-copy">
<p>Webinar 4</p>
</div>
<a class="cta card-cta" href="https://www.webinar4url.com">Watch Webinar</a>
</div>
</div>
</div>
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Hi I am trying to add transitions to sliding navigation but in vain. When I click on About Us I takes me to that part immediately. Instead I want it to slide and display. And same for other links as well (Team,Contact). Have a look over below jsfiddle. https://jsfiddle.net/samson421/90zku52x/2/
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper light-blue darken-3" >
<a href="#" class="brand-logo right-align" > hello.com</a>
<ul class="left-align">
<li><a href="#about" >About Us</a></li>
<li>Our Team</li>
<li>Contact Us</li>
<li>Login</li>
</ul>
</div>
</nav>
</div>
<section id="about">
<div class="container">
<h4 style="text-decoration:underline;text-align:center">About Us</h4><br><br>
<div class="quot">
<h5 style="color:#446CB3;padding-top:30px">Vision</h5>
<p id="vision">some text</p>
<h5 style="color:#446CB3">Mission</h5>
<p id="vision">some text</p>
<h5 style="color:#446CB3">Objectives</h5>
<p id="vision">some text</p><br><br><br>
</div>
</div>
</section><br><br><br><br>
<section id="team">
<div class="container">
<div class="center-align">
<h4 style="text-decoration:underline">Core Team</h4><br><br>
<div class="row">
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/1.png" class="circle" height="200" width="200">
<h5>one </h5>
<p style="text-align:justify">
some text
</p>
<div class="row">
Details
</div>
</div>
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/2.png" class="circle" height="200" width="200">
<h5>two</h5>
<p style="text-align:justify">
some text
</p>
<div class="row">
Details
</div>
</div>
<div class="col s4">
<img class="circle responsive-img" src="index2/img/works/3.png" class="circle" height="200" width="200">
<h5>three</h5>
<p style="text-align:justify">
some text
<div class="row">
Details
</div>
</div>
</div>
<div class="center align">
<h4 style="text-decoration:underline">Contact Us</h4>
<p>Let us know if you are interested in knowing more.</p>
<table>
<tr>
<td id="no">+4917655434285 </td>
</tr>
<tr>
<td id="email">Email:<a href=">info#hello.com</a></td>
</tr>
</table>
</div>
This is how I would do it:
$("li a").click(function(e) {
e.preventDefault();
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top}, 400);
});
Here is the JSFiddle demo
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php