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.
Related
I'm stuck with problem in cypress
there is dynamic DOM:
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
elements .Item appear dynamically how I can wait until "Item" with
<div class="Name"> Name3 </div>
<div class="Color"> Color3 </div>
appear in this list and get .Item via Cypress
DOM before
before
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
</div>
after
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or it could be
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
need to wait second row appear by Name and Color
Since class="Item" is the common factor, use a cy.get() with retry on the count of it.
cy.get('.Item').should('have.length', 2)
on npm there is a package named cypress-wait-until that should work fine
Installation
npm i -D cypress-wait-until
Import
import 'cypress-wait-until';
Usage
Refere to the official npm site
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>
Here is my codepen for you guys to play with.... CodePen.io
I cannot seem to get the #play-again button to show up once a game has finished using $('#play-again').show().
Any thoughts on this???
Update Added raw html link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="banner">
<p>tic-tac-toe</p>
<button id="play-again"> <i class="fa fa-repeat"></i></button>
</div>
<div class="board">
<div class="row" id="row-1">
<div class="col" id="col-1-1">
<div class="content"></div>
</div>
<div class="col" id="col-1-2">
<div class="content"></div>
</div>
<div class="col" id="col-1-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-2">
<div class="col" id="col-2-1">
<div class="content"></div>
</div>
<div class="col" id="col-2-2">
<div class="content"></div>
</div>
<div class="col" id="col-2-3">
<div class="content"></div>
</div>
</div>
<div class="row" id="row-3">
<div class="col" id="col-3-1">
<div class="content"></div>
</div>
<div class="col" id="col-3-2">
<div class="content"></div>
</div>
<div class="col" id="col-3-3">
<div class="content"></div>
</div>
</div>
</div>
</div>
The issue is that you must place the button#play-again outside the p when i changed, it is working for me
I have a page in which i want to display the button just side to an image ,therefore it looks like image button and so an as a loop where the implies to download but i am not good at css and I tried as below but it does not fix to my requirement.Can any one please adjust my code.Thanks in advance.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div>
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</div>
</div>
maybe this?
img.the-image-class + .the-button-class {
display: block;
margin-top: -20px; /* to move button 20px above from original position */
}
Look at output i think html was not formatted well.
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="row">
<div class="pressImg col-xs-6 col-sm-6 col-md-6">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 ">
<button class="btn btn-sm btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr />
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
</div>
</div>
</section>
May be like this,
<section id="content" class="smPaddingTop60">
<div class="content-wrap">
<div class="container clearfix">
<div class="nobottommargin">
<div class="clearfix">
<div class="pressImg col-xs-12 col-sm-6 col-md-3">
<img img-cache ng-src="images/press/launchad_winners.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<button class=" col-xs-12 col-sm-6 col-md-3 btn btn-success" data-ng-click="closePotentialModel()">
<a target="_BLANK" href="https://app.hubspot.com/meetings/troy-martin"><span style="color:white;">Schedule a Meeting</span></a>
</button>
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners">
</div>
<hr>
<div class="imgContainer">
<img img-cache ng-src="images/press/xpertdox_logo_text.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
<hr>
<div class="imgContainer">
<img img-cache class="image_fade mgnbtm" ng-src="images/press/logo_text_blue.jpg" onError="this.src='images/noimage.png';" alt="launchpad_winners" >
</div>
</div>
</div>
</div>
</section>
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