i am using prime faces pie chart and i have pie chart, tooltip on hovering piechart and legends.
i am trying to develop custom legends like if i hover or click on legends a tool tip should display on corresponding pie chart part.
since i am new to plots am not able to find a solution. please help me how to add tool tip effect for legends
Note: tooltip will display hovering piechart but need hovering on legends
piechart:
PrimeFaces Code:
<p:pieChart id="countries" value="#{chartController.pieChartModel}" extender="toolExt" seriesColors="33CC66,FFCC00,0000CC,FF0099,00CCCC,660099,00FF00,FF6600,003300,00FFFF" style="width:440px;height:296px;background-color: white; border: 2px inset #8B8378; padding: 2px; -moz-border-radius: 5px;-webkit-border-radius: 5px;-webkit-box-shadow: 0 3px 9px #666;" >
javascript for extender:
Note: extender property used in piechart tag to add custom data
<script>
function toolExt() {
this.cfg.highlighter = {
show:true,
tooltipLocation: 'se',
tooltipAxes: 'pieref',
tooltipAxisX: 20000,
tooltipAxisY: 20000,
useAxesFormatters: false,
formatString:'Accumulated Cost to %s: %s',
},
this.cfg.legend = {
show : true,
fontSize: '100px',
rowSpacing: '1px',
textColor: '000000',
},
this.cfg.seriesDefaults={
renderer: jQuery.jqplot.PieRenderer,
rendererOptions : {
sliceMargin: 3,
padding : 1,
diameter : 170,
}
},
this.cfg.grid = {
drawBorder: false,
shadow: false,
background: "white"
};
this.cfg.redraw;
}
</script>
java code
Note: i used sample code, in actual code data comefrom db and it will set upto 10 series
public class ChartController
{
private PieChartModel pieChartModel;
public ChartController()
{
pieChartModel = new PieChartModel();
pieChartModel.set("JAPAN", 102);
pieChartModel.set("AFGANISTAN", 36);
pieChartModel.set("UNITED STATE", 33.6);
pieChartModel.set("PAKISTAN", 20.5);
}
public PieChartModel getPieChartModel()
{
return pieChartModel;
}
}
i tried renderOptions but it didn't worked
please help me how to display tool-tip on piechart while mouse hover/clicking on legends.
Thanks
using amcharts able to render tool tip using legends.
Java Script Code
roboCallCountryCost.js
AmCharts.ready(function() {
var costCountriesData = document.getElementById('roboCallDashboard:CCpieval').value;
var CCchart = AmCharts.makeChart("CCpiediv", {
"type": "pie",
"theme": "none",
"labelsEnabled":"false",
"radius":100,
"hideBalloonTime":60,
"fontSize":10,
"marginBottom":5,
"marginTop":5,
"pullOutDuration": 0,
"pullOutRadius": 0,
"legend": {
"markerType": "square",
"position": "right",
"marginLeft": 30,
"autoMargins": true,
"markerDisabledColor":"#00CCFF",
"markerLabelGap":5,
"markerSize":13,
"verticalGap":2,
"horizontalGap":2,
"spacing":5,
},
"dataProvider":eval(costCountriesData),
"valueField": "countryCost",
"titleField": "countryName",
"balloonText": "<b><span style='font-size:14px'>Accumulated Cost to [[title]]: [[value]]</span></b>",
colors:["#33CC66","#FFCC00","#0000CC","#FF0099","#00CCCC","#660099","#00FF00","#FF6600","#003300","#00FFFF"],
labelsEnabled:false,
});
});
"PrimeFaces Code:"
<h:form id="roboCallDashboard">
<script src="amcharts.js" type="text/javascript"></script>
<script src="pie.js" type="text/javascript"></script>
<script src="roboCallCountryCost.js" type="text/javascript"></script>
<h:panelGrid columns="1" width="100%" styleClass="dashboardContentTable" headerClass="dashboardTableHeader" style="height:337px">
<div id="CCpiediv"/>
<h:inputHidden id="CCpieval" value="{chartController.pieChartModel}" />
</h:panelGrid>
</h:form>
CSS:
#CCpiediv {
width : 440px;
height : 296px;
border: 2px inset #8B8378;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 9px #666;
-moz--box-shadow: 0 3px 9px #666;
-o-box-shadow: 0 3px 9px #666;
box-shadow: 0 3px 9px #666;
background-color: white;
}
.amChartsLegend {
max-width: 130px;
overflow-x: scroll !important;
top: 2px !important;
height: 230px !important;
}
JAVA Code
ChartController.java
public String getPieChartModel() {
StringBuilder buf = new StringBuilder("[");
buf.append("{");
buf.append("countryName: ").append("\""+"AFGANISTAN"+"\"").append(",");
buf.append("countryCost: ").append("102").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"JAPAN"+"\"").append(",");
buf.append("countryCost: ").append("36").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"UNITED STATE"+"\"").append(",");
buf.append("countryCost: ").append("33.6").append(",");
buf.append("},");
buf.append("{");
buf.append("countryName: ").append("\""+"PAKISTAN"+"\"").append(",");
buf.append("countryCost: ").append("20.5").append(",");
buf.append("},");
buf.append("]");
return buf.toString();
}
Related
I use Xampp to try GrapesJS, I downloaded GrapesJS from github then copied the rources to my HTDOCS folder, grap my Browser then hit Localhost :) it works, something like Web Builder appear and works as well, but how can I save the Edited Website using PHP ?,
I use intact INDEX.HTML found from GrapesJs github, only change it name to INDEX.PHP to work with PHP, so this is the codes I've been using
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<script src="dist/grapes.min.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color:rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: { autoload: 0 },
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
},{
name: 'Flex',
open: false,
buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
}
],
},
});
editor.BlockManager.add('testBlock', {
label: 'Block',
attributes: { class:'gjs-fonts gjs-f-b1' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
</script>
</body>
</html>
thanks for your help
This way worked for me.
First added a Save button to grapesjs panel.
editor.Panels.addButton('options',
[{
id: 'save-db',
className: 'fas fa-save',
command: 'save-db',
attributes: {
title: 'Save Changes'
}
}]
);
Then added a command for save button.
editor.Commands.add('save-db', {
run: function(editor, sender) {
sender && sender.set('active', 0); // turn off the button
editor.store();
//storing values to variables
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
$.post("save.php", {
//you can get value in post by calling this name
"htmldata": htmldata,
"cssdata": cssdata,
success: function(data) {
alert(data);
console.log("Success");
},
});
}
});
In save.php
$editor_html_content = $_POST['htmldata'];
$editor_css_content = $_POST['cssdata'];
editor.on('component:add', options => {
var html = editor.getHtml();
var css = editor.getCss();
function create () {
$.ajax({
url:base_url+"/savepagedata.php",
type: "post",
data: {html_data: html , css_data:css },
success:function(result){
console.log(result);
}
});
}
});
I develop the app that uses datatables to visualize certain statistics data.
I receive from API the data in the following format:
{
"data": [{
"companyName": "company1",
"growth": 15
},
{
"companyName": "company2",
"growth": -8
},
{
"companyName": "company3",
"growth": 23
}]
}
Which is essentially a company name and its year over year revenue growth figure (%).
What I would like to implement is an MS Excel-like conditional formatting feature that displays colored bars inside percentage cells (color of the bar is red for negative and green for positive values and its size is normalized to minimal/maximal value and column width).
So far, my HTML is:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" charset="utf8"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="revenue-growth"></table>
And jQuery:
$('#revenue-growth').DataTable({
ajax: {
url: 'https://192.168.0.1/revenue',
method: 'GET',
dataSrc: 'data'
}
dom: 'Bfrtip',
pageLength: 50,
order: [0, 'asc']
columDefs: [{
targets: 0,
data: 'companyName',
title: 'Company Name'
}, {
targets: 1,
data: 'growth',
title: 'YoY revenue growth, %'
}
]
})
So, my question is: is there a way to implement such feature from the ground up, or, maybe, there's already plug-in that does exactly this?
I didn't find anything matching my request here, at stackoverflow, nor I was able to identify DataTables API methods that may solve my problem, so I would really appreciate that if you could point me to the right direction.
You could use the render-callback to create bars inside the cells in the growth-column.
You have to find the maximum growth inside the dataset.
In the render-callback:
2.1. check if the growth is negative or positive.
2.2. calculate bar width-% based on the growth and the maximum.
2.3. create and append the elements based on these information.
Here is an simple example:
$(document).ready(function() {
const dataSet = [
{ companyName: "Company A", growth: -12 },
{ companyName: "Company B", growth: 31 },
{ companyName: "Company C", growth: 7 },
{ companyName: "Company D", growth: 0 },
{ companyName: "Company E", growth: -29 },
{ companyName: "Company F", growth: 23 },
];
// Get absolute maximum value of grwoth from dataset
const maxGrowthValue = Math.max.apply(Math, dataSet.map(function(item) { return Math.abs(item.growth); }));
const table = $('#example').DataTable({
data: dataSet,
columns: [
{
data: 'companyName',
title: "Company Name",
},
{
data: 'growth',
title: "YoY revenue growth, %",
// Custom render the cell of the growth-column
render: (data, type, row, meta) => {
const isPositive = (Number(data) > 0);
const barWidth = 100 / maxGrowthValue * Math.abs(Number(data)) * 0.5;
const $growthBarContainer = $('<div>', {
class: "growth-bar",
});
const $growthBar = $('<div>', {
class: "bar bar-" + (isPositive ? 'positive' : 'negative'),
});
$growthBar.css({
width: barWidth.toFixed(2) + '%',
});
$growthBarContainer.append($growthBar);
$growthNumber = $('<div>', {
class: "growth-number",
});
$growthNumber.text(data + '%');
$growthBarContainer.append($growthNumber);
return $growthBarContainer.prop("outerHTML");
},
},
],
});
});
.growth-bar {
display: inline-block;
width: 120px;
height: 12px;
position: relative;
background-color: #eee;
border: 1px solid #424242;
}
.growth-bar > .bar {
width: 0%;
height: 100%;
position: absolute;
}
.growth-bar > .bar.bar-negative {
right: 50%;
background-color: red;
}
.growth-bar > .bar.bar-positive {
left: 50%;
background-color: green;
}
.growth-bar > .growth-number {
position: absolute;
top: 1px;
right: 2px;
color: #fff;
/* shadow for better readability */
text-shadow: 0px -1px 0px rgba(0,0,0,.5), 0px 1px 0px rgba(0,0,0,.5), -1px 0px 0px rgba(0,0,0,.5), 1px 0px 0px rgba(0,0,0,.5), 0px 0px 1px rgba(0,0,0,.25), 0px 0px 2px rgba(0,0,0,.5), 0px 0px 3px rgba(0,0,0,.75);
font-size: 10px;
line-height: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%"></table>
I am currently working on a user input customizable pie chart web app through Javascript as a small side project, and currently stuck on trying to keep tooltips enabled.
Currently:
width: 800,
height:800,
tooltipContent: display,
animationEnabled: true,
title: {
text: "ss"
},
legend: {
maxWidth: 800,
itemWidth: 800
},
doesn't seem to be cutting it.
Any help would be greatly appreciated.
You can achieve it by setting external toolTip on mouseover of dataSeries.
please check this JSFiddle
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id ="tooltip" style= "width: 7%; padding: 5px; border: 2px solid rgb(82, 81, 78); background: rgba(255, 255, 255, 0.9); border-radius: 5px; user-select: none;">No data</div>
<script>
var toolTip = document.getElementById("tooltip");
function onMouseover(e){
toolTip.innerHTML = e.dataPoint.x + " : " + e.dataPoint.y ;
}
</script>
I've made a pie chart using Chart.js, and I'd like to detect when a segment is hovered over. I've found plenty of documentation regarding manipulating the tooltips that appear when hovering over segments, but nothing regarding doing something else when a tooltip would appear. Is this possible?
I know this has already been given an accepted answer, and im not sure if this does satisfy your use case but Chart js released an update (maybe a month ago or so) that allowed for custom tooltips. This allows for a custom function to run when a tooltip would normally have been drawn. They have an example in the samples section of git hub
in short you define a custom function
Chart.defaults.global.customTooltips = function(tooltip){//do what you want}
here is the example they give in the samples with an extra bit of text added to an html tooltip. The only annoying thing I see is that don't provide the segment/point/bar that triggered this tooltip which would be really handy as then you could do some thing to the graph knowing this information but you are given the tooltip data which means you can do something with that instead.
Chart.defaults.global.customTooltips = function (tooltip) {
// Tooltip Element
var tooltipEl = $('#chartjs-tooltip');
// Hide if no tooltip
if (!tooltip) {
tooltipEl.css({
opacity: 0
});
return;
}
// Set caret Position
tooltipEl.removeClass('above below');
tooltipEl.addClass(tooltip.yAlign);
// Set Text
tooltipEl.html(tooltip.text+ " anythign custom you want");
// Find Y Location on page
var top;
if (tooltip.yAlign == 'above') {
top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
} else {
top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
}
// Display, position, and set styles for font
tooltipEl.css({
opacity: 1,
left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsetTop + top + 'px',
fontFamily: tooltip.fontFamily,
fontSize: tooltip.fontSize,
fontStyle: tooltip.fontStyle,
});
};
var pieData = [{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
label: "Red"
}, {
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
}, {
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}, {
value: 40,
color: "#949FB1",
highlight: "#A8B3C5",
label: "Grey"
}, {
value: 120,
color: "#4D5360",
highlight: "#616774",
label: "Dark Grey"
}];
var ctx1 = document.getElementById("chart-area1").getContext("2d");
window.myPie = new Chart(ctx1).Pie(pieData);
var ctx2 = document.getElementById("chart-area2").getContext("2d");
window.myPie = new Chart(ctx2).Pie(pieData);
#canvas-holder {
width: 100%;
margin-top: 50px;
text-align: center;
}
#chartjs-tooltip {
opacity: 1;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
#chartjs-tooltip.below:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 0 8px 8px 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above {
-webkit-transform: translate(-50%, -100%);
transform: translate(-50%, -100%);
}
#chartjs-tooltip.above:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0, 0, 0, .8) transparent;
border-width: 8px 8px 0 8px;
bottom: 1em;
content:"";
display: block;
left: 50%;
top: 100%;
position: absolute;
z-index: 99;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
<script src="https://raw.githack.com/chartjs/Chart.js/v1.1.1/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="canvas-holder">
<canvas id="chart-area1" width="50" height="50" />
</div>
<div id="canvas-holder">
<canvas id="chart-area2" width="300" height="300" />
</div>
<div id="chartjs-tooltip"></div>
The way I'm doing it is slightly more simple:
assuming you already have some code defining the canvas like
canvas = document.getElementById("chart"); and your pie chart is
window.myPie. You can use the onmousemove javascript event, or jQuery hover
canvas.onmousemove = function(evt) {
var el = window.myPie.getElementsAtEvent(evt);
//do something with the el object to display other information
//elsewhere on the page
}
In my case highlight a table row based on the value of el[0]._index
No...
There's nothing in the ChartJS API to override or extend the tooltip,
But, a workaround...
You can modify the draw method of the Chart.Tooltip class. This would allow you to "do something else" when the tooltip would normally be rendered by ChartJS.
The draw method you want to tie into starts at line 1351 of the source here:
https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js
For v2.0 version:
Chart.defaults.global.hover.onHover = function(x) {
if(x[0]) {
var index = x[0]._index;
// Place here your code
}
};
UPDATE 2020 : For Chartjs 3.5
Here is a quick fix that I used with Chartjs 3.5 to trigger events on hover over Doughnut or Pie parts. It relies on using the existing onHover option :
onHover : (event, activeElements) => {
if (activeElements.length > 0) {
// get active chart element
let elt = activeElements[0];
// retrieve element label
let lbl = elt._model.label;
// Get element value
let elt_index = elt._chart.tooltip._data.labels.indexOf(lbl);
let val = elt._chart.tooltip._data.datasets[0].data[elt_index];
// trigger your event here :
// ex for vuejs : this.$emit('element-hovered', { label : lbl, value : val });
}
else {
// No active elements
}
}
Working fine so far :)
If found a small trick using customTooltip, too. I searched for a solution to get an Event if the user moves with the mouse over a Value and a Tooltip is shown. Mainly i liked to present in a different frame some detail informations besides the raw Plot values.
var options = {
customTooltips: function (tooltip)
{
if (!tooltip) return;
tooltip.custom = false;
tooltip.draw();
OnEntrySelected(tooltip.title);
tooltip.custom = this;
}
}
The custom tooltip is drawn using tooltip.draw(), but this calls the custom method. I set it to false to avoid a recursive loop, call the default behavior and take the data i need for my callback (OnEntrySelected) which is in this case the string of the x-Axis label. This event is triggered whenever the tooltip is shown.
I have been trying to make a copy of a FAQ Accordion style like this one
here.
The problems are that the first question is collapsed and when I click on the other questions they wont open nor respond to any of my clicks. What should i do to make this correct? I believe something is wrong with my JQuery.
HTML CODE
<div class="accordion-header active-header">Q: Is this free?</div>
<div class="accordion-content open-content" style="display: block;">
<p>A: Yes, uploading and downloading is 100% Free for all users. We offer PRO accounts which allows for greater flexibility with uploading/downloading.</p>
</div>
<div class="accordion-header inactive-header">Q: Will my files be removed?</div>
<div class="accordion-content">
<p>A: Free/non accounts files are kept for 90 days. PRO accounts files are kept for unlimited days.</p>
</div>
<div class="accordion-header inactive-header">Q: How many files can I upload?</div>
<div class="accordion-content">
<p>A: You can upload as many files as you want, as long as each one adheres to the Terms of Service and the maximum file upload size.</p>
</div>
<div class="accordion-header inactive-header">Q: Which files types am I allowed to upload?</div>
<div class="accordion-content">
<p>A: You may upload the following types of files: Any.</p>
</div>
<div class="accordion-header inactive-header">Q: Are there any restrictions to the size of my uploaded files?</div>
<div class="accordion-content">
<p>A: Each file you upload must be less than 1.00 GB in size for free/non accounts or less than 10.00 GB in size for PRO accounts. If it is greater than that amount, your file will be rejected.</p>
</div>
<div class="accordion-header inactive-header">Q: Can I upload music or videos?</div>
<div class="accordion-content">
<p>A: Yes. Music and video hosting is permitted as long as you own the copyright on the content and it adheres to the terms and conditions.</p>
</div>
<div class="accordion-header inactive-header">Q: There are some files on our servers which may have been subject to copyright protection, how can I notify you of them?</div>
<div class="accordion-content">
<p>A: Via our report abuse pages.</p>
</div>
<div class="accordion-header inactive-header">Q: Do files have direct links?</div>
<div class="accordion-content">
<p>A: All users are shown a download page so no direct links are available, we may introduce direct link generation in the future.</p>
</div>
CSS CODE
.accordion-header {
font-size: 18px;
background: #ebebeb;
margin: 5px 0 0 0;
padding: 14px;
border: 1px solid #D8D8D8;
cursor: pointer;
color: #8E8E8E;
text-align: left;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.active-header {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
background: rgb(96, 168, 227);
background-repeat: no-repeat;
background-position: right 50%;
color: white;
text-shadow: 1px 1px rgb(72, 141, 197);
}
.inactive-header {
background: url(images/inactive-header.gif) #fff;
background-repeat: no-repeat;
background-position: right 50%;
}
.inactive-header:hover {
background: url(images/inactive-header.gif) #f5f5f5;
background-repeat: no-repeat;
background-position: right 50%;
}
.accordion-content {
display: none;
padding: 18px;
width: 100%;
background: #ffffff;
border: 1px solid #cccccc;
border-top: 0;
text-align: left;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
JS CODE
$(document).ready(function () {
'use strict';
$('.nav').onePageNav({
filter: ':not(.external)'
});
});
jQuery(document).ready(function ($) {
'use strict';
$('.animated').appear(function () {
var elem = $(this);
var animation = elem.data('animation');
if (!elem.hasClass('visible')) {
var animationDelay = elem.data('animation-delay');
if (animationDelay) {
setTimeout(function () {
elem.addClass(animation + " visible");
}, animationDelay);
} else {
elem.addClass(animation + " visible");
}
}
});
});
$(document).ready(function () {
'use strict';
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
function showUploaderPopup() {
jQuery('#fileUploadWrapper').modal('show', {
backdrop: 'static'
}).on('shown.bs.modal');
}
function createSlowGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
colorStart: '#CF0808',
colorStop: '#DA0202',
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-slow');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(9);
}
$(document).ready(function () {
$('.accordion-header').toggleClass('inactive-header');
$('.accordion-header').click(function () {
if ($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
} else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
function createFastGauge() {
var opts = {
lines: 12,
angle: 0,
lineWidth: 0.25,
pointer: {
length: 0.9,
strokeWidth: 0.04,
color: '#000000'
},
limitMax: 'true',
percentColors: [
[0.0, "#000000"],
[0.50, "#cc0000"],
[1.0, "#00cc00"]
],
strokeColor: '#E0E0E0',
generateGradient: true
};
var target = document.getElementById('canvas-fast');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 100;
gauge.animationSpeed = 128;
gauge.set(100);
}! function ($) {
$(function () {
var $root = $('html, body');
$('.smooth-anchor-link').click(function () {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
})
}(window.jQuery);
Here is the JSFiddle example, you may try to update it if you know the correct solution :)
PS:
I know there are other similar questions here but I tried all of them none solved my problem.
Your code throws an error Uncaught TypeError: undefined is not a function which is caused by onePageNav() and appear(), these are not official javascript/jQuery functions. If you copied them from somewhere else, they are most likely external plugin functions.
Simply removing these 2 functions from your javascript fixes your clicking issue. JSFiddle link
Please note that you also do not need to use $(document).ready(function () in JSFiddle, it does this automatically.
When trying to replicate something, try to build it yourself from scratch. You will not learn anything from just copying the entire thing. Try to write your own functions instead, so you can learn how everything works. The jQuery documentations should help.
If you are interested in learning how code in Javascript and/or jQuery, try the following sites:
CodeAcademy - General knowledge basics of several languages.
Tuts+ - Tutorials on more specific topics.
KhanAcademy
Mozilla Docs