I am using code in example mentioned here
Pie chart Example
JS
$(function(){
var $ppc = $('.progress-pie-chart'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
});
HTML:
<div class="progressDiv">
<div class="statChartHolder">
<div class="progress-pie-chart" data-percent="67"><!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
</div>
<div class="statRightHolder">
<ul>
<li> <h3 class="blue">39.4k</h3> <span>Interactions</span></li>
<li> <h3 class="purple">1.8k</h3> <span>Posts</span></li>
</ul>
<ul class="statsLeft">
<li><h3 class="yellow">22%</h3> <span>Comments</span></li>
<li><h3 class="red">37%</h3> <span>Cheers</span></li>
</ul>
<ul class="statsRight">
<li><h3>18%</h3> <span>Tasks</span></li>
<li><h3>23%</h3> <span>Goals</span></li>
</ul>
</div>
</div>
The html, css and js are exactly same as in the link above.
I want to use more than 1 pie chart in my html (say 5) in the same format.
How do you identify the id that is passed to $fintion() in js.
At present the has same class name(progress-pie-chart), so if I change the data at one pie chart it is replicated to other as well..
You just have to give every chart an ID. Then you can select the ID from JS.
See my example below.
JS:
var $chart1 = $('#chart1'),
percent = parseInt($chart1.data('percent')),
deg = 360 * percent / 100;
if (percent > 50) {
$chart1.addClass('gt-50');
}
$('#chart1-fill').css('transform', 'rotate(' + deg + 'deg)');
$('#chart1-percents span').html(percent + '%');
HTML:
<!--Pie Chart1 -->
<div class="progress-pie-chart" id="chart1" data-percent="10">
<div class="ppc-progress">
<div class="ppc-progress-fill" id="chart1-fill"></div>
</div>
<div class="ppc-percents" id="chart1-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div>
<!--End Chart1 -->
I have also edited the example see here http://codepen.io/anon/pen/egqRPQ
You can do it by passing different id="pie-chart-1" to your multiple pie charts.. like this..
<div class="progress-pie-chart" id="pie-chart-1" data-percent="67">
<!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
Similarly you can do for another id="pie-chart-2"
<div class="progress-pie-chart" id="pie-chart-2" data-percent="67">
<!--Pie Chart -->
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper">
<span>%</span>
</div>
</div>
</div><!--End Chart -->
& your JS will be like this
$(function(){
var $ppc = $('#pie-chart-1'),
percent = parseInt($ppc.data('percent')),
deg = 360*percent/100;
if (percent > 50) {
$ppc.addClass('gt-50');
}
$('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
$('.ppc-percents span').html(percent+'%');
});
Similarly for another var $ppc = $('#pie-chart-2'),
Related
I have the following html structure
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
And what I want to do is to get the count of child divs that contains different data attribute. For example, I'm trying this:
$(`div[id*="child_"]`).length); // => 6
But that code is returning 6 and what I want to retrieve is 4, based on the different data-customId. So my question is, how can I add a filter/map to that selector that I already have but taking into consideration that is a data-attribute.
I was trying to do something like this:
var divs = $(`div[id*="child_"]`);
var count = divs.map(div => div.data-customId).length;
After you getting the child-divs map their customid and just get the length of unique values:
let divs = document.querySelectorAll(`div[id*="child_"]`);
let idCustoms = [...divs].map(div=>div.dataset.customid);
//idCustoms: ["100", "100", "100", "20", "323", "14"]
//get unique values with Set
console.log([... new Set(idCustoms)].length);//4
//or with filter
console.log(idCustoms.filter((item, i, ar) => ar.indexOf(item) === i).length);//4
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
Note: $ is equivalent to document.querySelectorAll in js returns a NodeList that's why I destructure it by the three dots ...
You'll have to extract the attribute value from each, then count up the number of uniques.
const { size } = new Set(
$('[data-customId]').map((_, elm) => elm.dataset.customid)
);
console.log(size);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
No need for jQuery for something this trivial, though.
const { size } = new Set(
[...document.querySelectorAll('[data-customId]')].map(elm => elm.dataset.customid)
);
console.log(size);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="child_1" data-customId="100">
</div>
<div id="child_2" data-customId="100">
</div>
<div id="child_3" data-customId="100">
</div>
<div id="child_4" data-customId="20">
</div>
<div id="child_5" data-customId="323">
</div>
<div id="child_6" data-customId="14">
</div>
</div>
Note that the property customid is lower-cased in the JavaScript. This could be an easy point of confusion. You might consider changing your HTML from
data-customId="14"
to
data-custom-id="14"
so that you can use customId in the JS (to follow the common conventions).
I have a list of multiple divs within a container:
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>DKK, USD, CZK</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>UK, US, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>EUR, USD, PLN</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>Germany, Denmark, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>SEK, GBP, PLN</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>Poland, UK, Spain</div>
</div>
</div>
<div id="CLP">
<div>Enter desired currency:
<input type='text' id='currencies' placeholder='Search Text'>
</div>
<div>Enter desired country:
<input type='text' id='countries' placeholder='Search Text'>
</div>
</div>
I'd like to allow visitors to filter platform according to currency and/or country. But I'm very new to JS and can't find the right solution.
Say you want to find pldatawrcurrencies = PLN but only where pldatawrissuesloanscountry = Poland So I enter "PLN" in the first search field and "Poland" in the second field. The result should filter out everything that doesn't contain those specific parameters.
Below is a solution I found somewhere online and tweaked. It filters according to currency only. I have tried finding a way to use two filters to no avail.
// Search function
var search = ('#currencies');
$(document).ready(function(){
searchNow(search);
});
function searchNow(searchKey) {
$(searchKey).keyup(function(){
// Search text
var text = $(this).val();
// Hide all content class element
$('.platform').hide();
// Search and show
$('.platform .pldatawrcurrencies:contains("'+text+'")').closest('.platform').show();
});
}
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
If I understand correctly, you were pretty close to it ! Simply add a class for every "searchable" fields
<div class='platform'>
<div class='pldatawrcurrencies search-me'>
<div class='platform-data'>DKK, USD, CZK</div>
</div>
<div class='pldatawrissuesloanscountry search-me'>
<div class='platform-data'>UK, US, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies search-me'>
<div class='platform-data'>EUR, USD, PLN</div>
</div>
<div class='pldatawrissuesloanscountry search-me'>
<div class='platform-data'>Germany, Denmark, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies search-me'>
<div class='platform-data'>SEK, GBP, PLN</div>
</div>
<div class='pldatawrissuesloanscountry search-me'>
<div class='platform-data'>Poland, UK, Spain</div>
</div>
</div>
And the script :
// Search function
var search = ('#currencies');
$(document).ready(function(){
searchNow(search);
});
function searchNow(searchKey) {
$(searchKey).keyup(function(){
// Search text
var text = $(this).val();
// Hide all content class element
$('.platform').hide();
// Search and show
$('.platform .search-me:contains("'+text+'")').closest('.platform').show();
});
}
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
This way, you can add further div that are searchable or that are not. I hope this helps!
I would do it like this:
$('input').on('input', function () {
var currency = $('#currencies').val().toLowerCase().replace(/,/g, ''); // exclude commas
var country = $('#countries').val().toLowerCase().replace(/,/g, '');
$('.platform').hide().filter(function () {
return $('.pldatawrcurrencies', this).text().toLowerCase().indexOf(currency) > -1
&& $('.pldatawrissuesloanscountry', this).text().toLowerCase().indexOf(country) > -1
}).show();
}).trigger('input');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="CLP">
<div>Enter desired currency:
<input type='text' id='currencies' placeholder='Search Text'>
</div>
<div>Enter desired country:
<input type='text' id='countries' placeholder='Search Text'>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>DKK, USD, CZK</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>UK, US, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>EUR, USD, PLN</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>Germany, Denmark, France</div>
</div>
</div>
<div class='platform'>
<div class='pldatawrcurrencies'>
<div class='platform-data'>SEK, GBP, PLN</div>
</div>
<div class='pldatawrissuesloanscountry'>
<div class='platform-data'>Poland, UK, Spain</div>
</div>
</div>
Requirement goes like this :- I have left navigation panel which has to be in sync with the items added in the main active view by the user and has to display in tree structure. Basic idea is to provide context aware sub-view that change based on active view.
Custom directive used to display tree structure: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree/blob/master/src/abn_tree_directive.js
my HTML code: (using ng-click)
<div class="add-data-request-panel" style="min-height:1071px;"
ng-click="expandPanel()">
<ul>
<li class="icon-drd icon-drd-diactive" ng-if="panelCollapse" ></li>
<li class="icon-pie-chart icon-pie-active" ng-if="panelCollapse"></li>
<li class="icon-publish-req" ng-if="panelCollapse"></li>
<li class="icon-view-changes" ng-if="panelCollapse"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display" ng-if="panelExpand">
<div class="data-slider-row mtop" ng-click="collapsePanel()">
<div class="slider-row-left">
<span class="first-char" >S</span>
<span class="second-char">ection</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // passing data to tree directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row" ng-click="collapsePanel()">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
JS implementation in my controller
$scope.panelExpand = false; //setting default flag
$scope.panelCollapse = true; //setting default flag
$scope.expandPanel = function() {
$scope.panelExpand = true;
$scope.panelCollapse = false;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); // method used for iteration
};
$scope.collapsePanel = function() {
$scope.panelExpand = false;
$scope.panelCollapse = true;
};
my HTML code: (using ng-mouseover which is not working and displaying the data passed to navigation bar)
<div class="add-data-request-panel" style="min-height:1071px;" ng-mouseover="hoverIn()"
ng-mouseleave="hoverOut()">
<ul>
<li class="icon-drd icon-drd-diactive"></li>
<li class="icon-pie-chart icon-pie-active"></li>
<li class="icon-publish-req"></li>
<li class="icon-view-changes"></li>
</ul>
</div>
<div class="data-slider-panel" style="min-height:1071px;display"
ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" ng-show="hoverEdit">
<div class="data-slider-row mtop">
<div class="slider-row-left">
<span class="first-char">S</span>
<span class="second-char">ection1</span>
</div>
<div class="slider-row-right">
<div class="icon-drd icon-drd-diactive">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section2
<div class="sub-slider-row-left">
<abn-tree tree-data="mainArrayObj"></abn-tree> // array that holds the data passed in html to custom directive
</div>
</div>
<div class="slider-row-right">
<div class="icon-pie-chart icon-pie-active">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section3
</div>
<div class="slider-row-right">
<div class="icon-publish-req">
</div>
</div>
</div>
<div class="data-slider-row">
<div class="slider-row-left">
Section4
</div>
<div class="slider-row-right">
<div class="icon-view-changes">
</div>
</div>
</div>
</div>
js Implementation for the ng-mouseOver: (while debugging all the iteration and methods executed as expected)
$scope.hoverIn = function() {
this.hoverEdit = true;
$scope.mainArrayObj = []; // array that holds the data passed in html to custom directive
initialJsonSeparator($scope.model.Data); //method used to iterate the data
};
$scope.hoverOut = function() {
this.hoverEdit = false;
};
Any solution to this issue would be of gr8 help. If there is any other better approach other than the ng-mouseOver and ng-mouseLeave to implement hover, please do let me know.
I want to continuously fade 2 pieces of content in and out of the same position. Currently the fade in fade out works but the content is below the other content and they are both viewable when the document loads.
To put it simply the content will keep switching between #fade1 and #fade2.
HTML:
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="opactiy:0">test</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
JS:
$(document).ready(function () {
// runs fade code for homepage content
fadeThem();
}
// fades content in and out on homepage
function fadeThem() {
$("#fade1").fadeOut(3000, function() {
$("#fade2").fadeIn(2000, fadeThem());
$("#fade2").fadeOut(2000, fadeThem());
$("#fade1").fadeIn(2000, fadeThem());
});
}
Why don't you put your code in : $( window ).load(function() {} ;
Something like this :
$( window ).load(function() {
// -- Snipped -- //
$(".right-image-crm").addClass('right-image-up');
$(".left-image-crm").addClass("left-image-up");
$(".center-image-crm").addClass("center-image-up");
$(".loader").fadeOut(1000,function(){
}
});
Working Code (JS Fiddle): http://jsfiddle.net/nfdebmen/4/
You can have any Number of PlaceHolders in this code. I have made 4.
var _toggle = {
totalNodes: null,
lastNode: 0,
duration: 1000,
init: function () {
_toggle.totalNodes = $(".toggle").length;
_toggle.next();
},
next: function () {
var nextNode = _toggle.lastNode + 1;
if (nextNode >= _toggle.totalNodes) {
nextNode = 0;
}
//
$(".toggle:eq(" + _toggle.lastNode + ")").fadeOut(_toggle.duration, function () {
$(".toggle:eq(" + nextNode + ")").fadeIn(_toggle.duration);
_toggle.next();
});
_toggle.lastNode = nextNode;
}
}
$(document).ready(function () {
_toggle.init();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p class = "toggle active">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p class = "toggle" style = "display: none;">test</p>
<p class = "toggle" style = "display: none;">Ahsan</p>
<p class = "toggle" style = "display: none;">http://aboutahsan.com</p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
<div class="col-md-4">
<p></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- text slider -->
Try using .fadeToggle()
$(document).ready(function() {
var p = $("p[id^=fade]");
function fadeThem() {
return p.fadeToggle(3000, function() {
fadeThem()
});
}
fadeThem();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="text-slider">
<div class="container">
<div class="row">
<div class="col-md-4">
<p id="fade1">"IT WAS SUCH A PLEASURE WORKING WITH STOKES STREET ON SPECTROSPECTIVE. THEY SURPASSED ALL EXPECATIONS. WE WERE GOBSMACKED, FRANKLY."</p>
<p id="fade2" style="display:none">test</p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
<div class="col-md-4">
<p></p>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!-- text slider -->
i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina
Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})