I am using this code to place a link for each label:
chart2.addAxis("y", {
vertical: true,
fixLower: "none",
fixUpper: "none",
natural: true,
majorTick: { length: 3 },
labels: [{value: 1, text: Link text }, ...]
});
Apparently this code didn't work. So, i am thinking:
I have this html in the rendered chart:
<div id="chart2" style="height: 100px;">
<div style="margin: 0px; padding: 0px; ...">
<div style="margin: 0px; padding: 0px; ... ">Link text</div> //label
</div>
...
And this change should result:
Link text
to something like:
Link text
How can i do this change with jquery or dojo ? Basically add before and after the text.
Related
I have two bootstrap popovers and they should be able to open the side panel.
Also please find the related code in JSFiddle https://jsfiddle.net/bob_js/eLLaacju/
I wanted to achieve the below issue: the popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a side panel. data-trigger="focus" doesn't help either.
Could you please help me, below is the related code to it.
HTML:
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
jQuery:
$(function () {
$("#popover-a").popover({
html: true,
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
content: function(){
return $('#popover-content-b').html();
}
});
})
Just adding the below to my jQuery helps the issue for now.
trigger: 'click hover', delay: {show: 50, hide: 4000},
$(function () {
$("#popover-a").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-b').html();
}
});
})
I'm using shapeshift for drag & drop options, and one of the containers is hided inside bootstrap tab. Shapeshift is initialized there, but doesn't set items to positions till first drag of item.
JSfiddle with this bug: https://jsfiddle.net/owm6wo0r/
As you can see inside JSFiddle when you click "Tab 2" all items are on one on another. When you try to drag them they set positions.
Here is documentation of plugin: https://github.com/McPants/jquery.shapeshift/wiki/2.0-api-documentation
I tried with event "ss-rearrange" on clicking the tab, but it didn't work... Any idea how to fix it?
HTML:
<div class="dragdrop">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
<ul class="nav-tabs nav" role="tablist">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
</ul>
<div class="tab-content">
<div id="tab1" role="tabpanel" class="tab-pane active">
<p> Nothing there </p>
</div>
<div id="tab2" role="tabpanel" class="tab-pane">
<div class="dragshared">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
</div>
</div>
JS:
$('.nav-tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('.dragdrop').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
dragClone: false,
enableDrag: true,
enableCrossDrop: true
});
$('.dragshared').shapeshift({
selector: "div",
enableResize: false,
align: "left",
paddingX: 0,
paddingY: 0,
gutterX: 35,
gutterY: 70,
colWidth: 190,
animated: false,
minColums: 4,
deleteClone: true,
dragClone: true,
enableCrossDrop: false
});
My final solution is to set at the beggining bootstrap tabs on visibility: hidden/visible instead of display: block/none and only after shapeshift initialization switch again for display none/block since visibility didn't work as it should (desactivated tab was visible for a second).
I believe there is way to make it clever.
CSS
.tab-content>.tab-pane {
display: block;
visibility: hidden;
height: 0;
width: 100%;
.dragshared {
height: 0!important;
}
}
.tab-content>.active {
height: auto;
visibility: visible;
.dragshared {
height: auto;
}
}
.tab-content.initialized>.tab-pane {
display: none;
visibility: visible;
}
.tab-content.initialized>.tab-pane.active {
display: block;
}
JS
(shapeshift initialization)
$('.tab-content').addClass('initialized');
Normally in fullpage.js we can set single global
paddingTop, paddingBottom value via below code:
$('#fullpage').fullpage({
paddingTop: '130px',
paddingBottom: '50px',
});
My question is can we assign multiple paddingTop,paddingBottom values to individual scroll sections TO achieve more flexible layout display?
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage'],
sectionsColor: ['#4A6FB1', '#939FAA'],
scrollOverflow: true,
sectionSelector: '.section',
slideSelector: '.slide',
slidesNavigation: true,
slidesNavPosition: 'bottom',
verticalCentered: false,
resize: false,
autoScrolling: true,
paddingTop: '130px',
paddingBottom: '50px'
});
});
.slider-container {
width: 50%;
}
.title-text {
font-size: 30px;
font-weight: bold;
}
p {
line-height: 3em;
}
.contentline { border:1px solid white; }
#demo {
position: absolute;
top: 50px;
margin: 0;
left: 0;
right: 0;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<div id="fullpage">
<div class="section">
<div class="container slider-container">
<div class="row margin-0" id="demo">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<div class="title-text">padding:130px,bottom:80px layout</div>
</div>
</div>
<div class="slide contentline" id="slide1" data-anchor="s1">
<div class="row margin-0">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0">
<p class="title-text">you may press Arrow Down Key to scroll to the next section </p>
<p>line1</p>
<p>line2</p>
<p>line3</p>
<p>line4</p>
<p>line5</p>
<p>line6</p>
<p>line7</p>
<p>line8</p>
<p>line9</p>
<p>line10</p>
<p>line11</p>
<p>line13</p>
<p>line14</p>
<p>line15</p>
<p>line16</p>
<p>line17</p>
<p>line18</p>
<p>line19</p>
<p>line20</p>
<p>line21</p>
<p>line22</p>
<p>line23</p>
<p>line24</p>
<p>line25</p>
<p>line26</p>
<p>line27</p>
<p>line28</p>
<p>line29</p>
<p>line30</p>
</div>
</div>
</div>
<div class="slide" id="slide2" data-anchor="s2">
slide2
</div>
<div class="slide" id="slide3" data-anchor="s3">
<p>slide3</p>
</div>
<div class="slide" id="slide4" data-anchor="s4">
<p>slide4</p>
</div>
</div>
<!--end of container-->
</div>
<div class="section title-text">
<div class="contentline">
Some sections<br> which require different<br> paddingTop and padding bottom values<br>
For example this page, if i need paddingTop: 20px; paddingBottom:20px;<br> instead of running global value of 130px 50px;<br>
if using css to override padding,<br>
the calculated slider height is still wrong.
</div>
</div>
</div>
You can override it as suggested by #CraigduToit.
Fullpage.js will read your value as you can see here.
Here's an example of overriding the paddingTop value. I've colored in grey the real content area without the paddings.
I just used:
#section2 {
padding-top: 10px !important;
}
With this initialization:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', 'purple', '#ADD8E6'],
paddingTop: '100px',
paddingBottom: '100px',
scrollOverflow: true,
});
I believe this can be achieved with css, however it requires you to add (or build upon) a uniuque class for each sections content.
I added a class "testingstuff" to your child div on the second section, so the HTML will be:
<div class="section title-text fp-section active testingstuff">....</div>
And then went on to simply create the class in the .css with the following properties:
.testingstuff{
padding:30px 0px 30px 0px !important;
}
So going forward, all you would need to do is create a class for each section, not the most elegant way to do it, but it is rather quick and easy.
Hope this helps.
I am working on an angular.js application that displays various widgets in a dashboard. One of these widgets uses a Highcharts half-doughnut. I have created a prototype in straight HTML and it works as expected. I am now porting things over to my angular.js application using highcharts-NG. Everything in my widget is displaying EXCEPT the half-doughnut. Here is the code from my partial:
<div class="row container">
<div class="col-md-2 greyBack loanWidget">
<div class="calendarContainer">
<div class="calendarTitle">{{myLoan.LoanStatus.Month}}</div>
<div class="calendarDay">{{myLoan.LoanStatus.Day}}</div>
<div class="calendarYear">{{myLoan.LoanStatus.Year}}</div>
</div>
</div>
<div class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;">
<div ng-controller="LoanStatusChart">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
<!--<div id="container" class="col-md-4 greyBack loanWidget" style="min-width: 200px; margin: 0; max-width: 200px; max-height: 300px; vertical-align: top;"></div>-->
<div class="col-md-3 greyBack loanWidget balance">
<span class="balanceText">{{myLoan.LoanStatus.OriginalPrincipalBalance}}</span><br />
<span class="balanceTextLabel">Outstanding Balance</span><br />
<span class="borrowedText">{{myLoan.LoanStatus.BorrowedAmt}}</span><br />
<span class="borrowedTextLabel">Borrowed</span>
</div>
<div class="col-md-3 loanWidget"><img src="../images/c4l/cfl-banner.png" /></div>
</div>
Here is the code in my controller:
cflApp.controller('LoanStatusChart', function ($scope) {
$scope.options = {
type: 'pie',
colors: ['#971a31', '#ffffff']
}
$scope.swapChartType = function () {
if (this.highchartsNG.options.chart.type === 'line') {
this.highchartsNG.options.chart.type = 'bar'
} else {
this.highchartsNG.options.chart.type = 'line'
}
}
$scope.highchartsNG = {
options: {
plotOptions: {
pie: {
borderColor: '#000000',
size: 115,
dataLabels: {
enabled: false,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black',
}
},
startAngle: -90,
endAngle: 90,
center: ['30%', '75%']
}
},
colors: ['#971a31', '#ffffff'],
chart: {
type: 'pie',
backgroundColor: '#f1f1f2',
height: 150
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Hello',
style: {
color: '#971a31',
fontWEight: 'bold',
fontSize: '15px'
},
verticvalAlign: 'middle',
y: 20,
x: -24
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
loading: false
}
});
My two questions are:
Why won't this display?
Currently the data is "hard-coded" in these lines:
series: [{
type: 'pie',
name: 'Loan',
innerSize: '50%',
data: [
['85% paid', 85],
['15% owed', 15]
]
}],
How can I set this up so I can pass in the percentages? These come from another controller as you can see in the code in my partial.
UPDATE: I have managed to get the chart area to populate with something by adding Jquery prior to the Highcharts.js. However, it is ignoring every single option I pass to it and simply displaying "Chart Title" and a very tall div where the chart should be. Ideas?
I tried your code its running fine. Might be you have some javascript file ordering or CSS issue. Be sure to follow the correct order
jquery
Highcharts.js
AngularJS
Highchart-ng.js
Secondly you declared series:[{}]object twice in your chart configuration.
Here's the fiddle you can check your code here http://jsfiddle.net/Hjdnw/1018/
I am learning windows 8/HTML/JavaScript app creation.
I am trying to create a WinJS.UI.ListView object as described in the MSDN site.
Now I have three listview elements and I want them to be placed on a single row.
I tried used css float:left property to display them in one line.
But the problem is I cant get them in a single line.
This is my screenshot of the output
HTML:
<section aria-label="Main content" role="main">
<div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
<div class="iconTextApplications" >
<img class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
<div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
</div>
</div>
<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource,
itemTemplate: select('#iconTextApplicationsTemplate'),
layout: { type:WinJS.UI.CellSpanningLayout } }" >
CSS
.win-container{
margin:auto;
}
.win-surface {
width:100%;
margin: 0 auto;
}
.win-viewport {
width:100%;
margin: 0 auto;
background-color:rgb(94, 82, 68);
}
#iconTextApplicationsTemplate {
float:left;
width:100%;
height:100%;
}
JavaScript
var dataArray = [
{ title: "One", picture: "images/jokes.png" },
{title : "Two" , picture : "images/quotes.png" },
{ title: "Three", picture: "images/trivia.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);
Am I approaching it in the wrong way?
or Should I go for other techniques?
In WinJS you'll need to define the height as the ListView will automagically wrap if the height is either set to auto or 100%.