First time poster here, using the "sifr3-r436" build.
I am doing work on my company's website and decided it was time for us to start employing some SIFR technology. So far, I have been able to figure it out quite easily, with the exception of a question or two. Basically, I have two burning questions that I would like answered.
1) How much SIFR is considered "ok"? Although I am only using SIFR for headlines, per the recommendations in the FAQ/Walk-through, I still have a substantial amount of text that I would like to convert to SIFR. Please view the website to get an idea of how much SIFR I'm using (Rockwell font headlines and subheads). Is this too much?
2) How do I control font color with SIFR? Obviously I know you can set it inside the 'sifr-config.js' file. However, I have many different colored headlines that I would like to use.. I'm currently doing it this way:
sIFR.replace(rockwell, {
selector: '.h3_sifr', css: '.sIFR-root { font-size: 18px; background-color: #a63f03; color: #bf7e04;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_green', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #597704;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_maroon', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #330000;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_blue', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #005995;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_cruise', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #016EA1;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_australia', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #277c5d;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_intl', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #1b2f15;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_us', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #32588b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_hawaii', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #4a1e52;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_rail', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #304c2a;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_canada', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #0a2754;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_alaska', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #083c4b;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_sadc', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #630002;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_easternus', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #8b3100;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_lightgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #999999;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_medgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #666666;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_darkgray', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #333333;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_extended', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #175700;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
sIFR.replace(rockwell, {
selector: '.h3_sifr_orange', css: '.sIFR-root { font-size: 18px; background-color: #FFFFFF; color: #a63f03;}', forceSingleLine: true, wmode: 'transparent', tuneHeight: -5,
});
Now, as you can see, the only way I have been able to do the different colors is through a separate replace statement for each and every color. I tried changing the color 'inline' (i.e., <span class="h3_sifr" style="color:#123456></span>), but this does not work. Any tips?
I think you're using a bit too much sIFR. Try limiting it to just the main headers, and don't replace the links.
The CSS issue is a bit of a pickle, no easy answer there. You can copy the other shared properties to the rockwell object though, so you don't have to repeat those.
Also try to refrain from using transparency, and you shouldn't need to use forceSingleLine I think.
Related
I am working on the snippet below. Why am I not able to attach the .box to ui handler?
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
create: function() {
$('.box').appendTo($('#slider a').get(0));
},
slide: function(event, ui) { $(ui.handle).find('span').html( ui.value); }
});
// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(0)'),
offset: "0, 10"
});
body{
padding:60px;
}
#slider
{
width: 80%;
margin-left: 1em;
}
#slider a {
text-decoration: none;
outline: none;
}
.box {
position: relative;
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
width: 100%;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding:12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id="slider"></div>
<span class="box"></span>
The element .box is currently attached to the <body>. If you want to position it, you only need to use .position() properly.
Exmaple:
$(function() {
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
slide: function(event, ui) {
$(".box").html(ui.value).position({
my: "center top",
at: "center bottom+10",
of: $(".ui-slider-handle", this)
});
}
});
// only initially needed
$('.box').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom+10',
of: $("#slider .ui-slider-handle")
});
});
body {
padding: 60px;
}
#slider {
width: 80%;
margin-left: 1em;
}
#slider a {
text-decoration: none;
outline: none;
}
.box {
position: relative;
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
width: 100%;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 12px 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div id="slider"></div>
<span class="box"></span>
Update
If you want the handle to be the box, try this.
HTML
<div id="slider"></div>
CSS
.ui-slider span.ui-slider-handle {
width: 50px;
background: #FFF;
border: 1px dashed #666;
text-align: center;
color: #303030;
padding: 8px 3px 9px;
text-align: center;
padding: 12px 12px;
}
JavaScript
$(function() {
$("#slider").slider({
min: 100,
max: 500,
step: 1,
value: 200,
animate: 'slow',
slide: function(event, ui) {
$(".ui-slider-handle", this).html(ui.value);
}
});
$("#slider .ui-slider-handle").html($("#slider").slider("value"));
});
When I enable tooltip.shared = true, The arrow will disappear like screen shot.
tooltip: {
shared: true
},
I want to keep arrow just like tooltip.shared = false
tooltip: {
shared: false
},
DEMO in here http://jsfiddle.net/puff0211/5sbfztur/
Does anyone know to accomplish this?
Thank you!
You can prevent from skipping the tooltip anchor in case tooltip is shared by wrapping move function. More about wrapping can be here: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts. Take a look at the example below.
DOCS Reference:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Example:
http://jsfiddle.net/u6d2bode/
You can use tooltip.formatter with some css to achieve nearly required behavior but not exactly same when shared: false .
$(document).ready(function() {
$('#container').highcharts({
chart: {
//type: 'column'
type: 'bar'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
//console.log(this.points)
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
/*//you can use bellow code to adjust position
positioner: function(boxWidth, boxHeight, point) {
return {x:point.plotX,y:point.plotY};
}*/
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Fiddle demo
tooltip formatter
tooltip: {
shared: true,
useHTML: true,
backgroundColor: null,
borderWidth: 0,
formatter: function() {
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<div class="callout right" >' + points[0].key + '<br/>' : '';
var index;
var y_value;
for (index = 0; index < pointsLength; index += 1) {
y_value = (points[index].y);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value + ' </b><br/>';
}
return tooltipMarkup + '</div>';
},
css
div.callout {
background-color: rgba(247, 247, 247, 0.85);
background-image: -moz-linear-gradient(top, rgba(247, 247, 247, 0.85), rgba(247, 247, 247, 0.85));
position: relative;
color: #000;
padding: 5px;
border-radius: 3px;
box-shadow: 0px 0px 20px #444;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 35%;
border-right: 10px solid rgba(247, 247, 247, 0.85);
}
I have created one chart using angular2-highcharts based on the https://stackoverflow.com/questions/48002797/cant-bind-to-options-since-it-isnt-a-known-property-of-chart/48004515#48004515 . I got the result as well.
Could anyone please tell me how to center-align the graph in mobile devices? I have tried text-align:center, padding, margin etc.
Please help me with this issue
Edit- Added chart Options
this.chartOptions={
chart: {
type: 'column'
},
title: {
text: 'Highcharts responsive chart'
},
subtitle: {
text: 'Resize the frame to see the axes change'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December']
},
yAxis: {
labels: {
x: -15
},
title: {
text: 'Items'
}
},
series: [{
name: 'Sales',
data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
xAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
},
title: {
text: ''
}
}
}
}]
}
}
Edit2. Added chart image after adding responsive parameters
Edit: Added HTML and CSS
HTML
<chart id="container" [options] ="chartOptions" text-center></chart>
CSS
page-keyinfo {
svg{
width:100%
}
/* Colors for data series and points. */
$colors: #7cb5ec #434348 #90ed7d #f7a35c #8085e9 #f15c80 #e4d354 #2b908f #f45b5b #91e8e1;
/* Chart background, point stroke for markers and columns etc, */
$background-color: #ffffff;
/* Neutral colors, grayscale by default. The default colors are defined by mixing the background-color
with neutral, with a weight corresponding to the number in the name. */
$neutral-color-100: #000000; /* Strong text. */
$neutral-color-80: #333333; /* Main text and some strokes. */
$neutral-color-60: #666666; /* Axis labels, axis title, connector fallback. */
$neutral-color-40: #999999; /* Credits text, export menu stroke. */
$neutral-color-20: #cccccc; /* Disabled texts, button strokes, crosshair etc. */
$neutral-color-10: #e6e6e6; /* Grid lines etc. */
$neutral-color-5: #f2f2f2; /* Minor grid lines etc. */
$neutral-color-3: #f7f7f7; /* Tooltip backgroud, button fills, map null points. */
/* Colored, shades of blue by default */
$highlight-color-100: #003399; /* Drilldown clickable labels, color axis max color. */
$highlight-color-80: #335cad; /* Selection marker, menu hover, button hover, chart border, navigator series. */
$highlight-color-60: #6685c2; /* Navigator mask fill. */
$highlight-color-20: #ccd6eb; /* Ticks and axis line. */
$highlight-color-10: #e6ebf5; /* Pressed button, color axis min color. */
.highcharts-container {
position: relative;
overflow: scroll !important;
width: 100% !important;
height: 100% !important;
text-align: center;
line-height: normal;
z-index: 0; /* #1072 */
font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
font-size: 12px;
}
.highcharts-root text {
stroke-width: 0;
}
.highcharts-background {
fill: $background-color;
}
.highcharts-plot-border, .highcharts-plot-background {
fill: none;
}
.highcharts-label-box {
fill: none;
}
.highcharts-button-box {
fill: inherit;
}
/* Titles */
.highcharts-title {
fill: $neutral-color-80;
font-size: 1.5em;
}
.highcharts-subtitle {
fill: $neutral-color-60;
}
/* Axes */
.highcharts-axis-line {
fill: none;
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-axis-title {
fill: $neutral-color-60;
}
.highcharts-axis-labels {
fill: $neutral-color-60;
cursor: default;
font-size: 0.9em;
}
.highcharts-grid-line {
fill: none;
stroke: $neutral-color-10;
}
.highcharts-xaxis-grid .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-tick {
stroke: $highlight-color-20;
}
.highcharts-yaxis .highcharts-tick {
stroke-width: 0;
}
.highcharts-minor-grid-line {
stroke: $neutral-color-5;
}
.highcharts-crosshair-thin {
stroke-width: 1px;
stroke: $neutral-color-20;
}
.highcharts-crosshair-category {
stroke: $highlight-color-20;
stroke-opacity: 0.25;
}
/* Credits */
.highcharts-credits {
display: none !important;
}
/* Tooltip */
.highcharts-tooltip {
cursor: default;
pointer-events: none;
white-space: nowrap;
transition: stroke 150ms;
}
.highcharts-tooltip text {
fill: $neutral-color-80;
}
.highcharts-tooltip .highcharts-header {
font-size: 0.85em;
}
.highcharts-tooltip-box {
stroke-width: 1px;
fill: $neutral-color-3;
fill-opacity: 0.85;
}
.highcharts-selection-marker {
fill: $highlight-color-80;
fill-opacity: 0.25;
}
.highcharts-graph {
fill: none;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
}
.highcharts-state-hover .highcharts-graph {
stroke-width: 3;
}
.highcharts-state-hover path {
transition: stroke-width 50; /* quick in */
}
.highcharts-state-normal path {
transition: stroke-width 250ms; /* slow out */
}
/* Legend hover affects points and series */
g.highcharts-series, .highcharts-point {
transition: opacity 250ms;
}
.highcharts-legend-series-active g.highcharts-series:not(.highcharts-series-hover),
.highcharts-legend-point-active .highcharts-point:not(.highcharts-point-hover) {
opacity: 0.2;
}
/* Series options */
/* Default colors */
#for $i from 1 through length($colors) {
$color: nth($colors, $i);
.highcharts-color-#{$i - 1} {
fill: $color;
stroke: $color;
}
}
.highcharts-area {
fill-opacity: 0.75;
stroke-width: 0;
}
.highcharts-markers {
stroke-width: 1px;
stroke: $background-color;
}
.highcharts-point {
stroke-width: 1px;
}
.highcharts-dense-data .highcharts-point {
stroke-width: 0;
}
.highcharts-data-label {
font-size: 0.9em;
font-weight: bold;
}
.highcharts-data-label-box {
fill: none;
stroke-width: 0;
}
.highcharts-data-label text {
fill: $neutral-color-80;
}
.highcharts-data-label-connector {
fill: none;
}
.highcharts-halo {
fill-opacity: 0.25;
stroke-width: 0;
}
.highcharts-point-select {
fill: $neutral-color-20;
stroke: $neutral-color-100;
}
.highcharts-column-series .highcharts-point {
stroke: $background-color;
transition: fill-opacity 250ms;
}
.highcharts-column-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pie-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pie-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-funnel-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-funnel-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-funnel-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-pyramid-series .highcharts-point {
stroke-linejoin: round;
stroke: $background-color;
}
.highcharts-pyramid-series .highcharts-point-hover {
fill-opacity: 0.75;
transition: fill-opacity 50ms;
}
.highcharts-pyramid-series .highcharts-point-select {
fill: inherit;
stroke: inherit;
}
.highcharts-solidgauge-series .highcharts-point {
stroke-width: 0;
}
.highcharts-treemap-series .highcharts-point {
stroke-width: 1px;
stroke: $neutral-color-10;
transition: stroke 250ms, fill 250ms, fill-opacity 250ms;
}
.highcharts-treemap-series .highcharts-point-hover {
stroke: $neutral-color-40;
transition: stroke 25ms, fill 25ms, fill-opacity 25ms;
}
.highcharts-treemap-series .highcharts-above-level {
display: none;
}
.highcharts-treemap-series .highcharts-internal-node {
fill: none;
}
.highcharts-treemap-series .highcharts-internal-node-interactive {
fill-opacity: 0.15;
cursor: pointer;
}
.highcharts-treemap-series .highcharts-internal-node-interactive:hover {
fill-opacity: 0.75;
}
/* Legend */
.highcharts-legend-box {
fill: none;
stroke-width: 0;
}
.highcharts-legend-item text {
fill: $neutral-color-80;
font-weight: bold;
cursor: pointer;
stroke-width: 0;
}
.highcharts-legend-item:hover text {
fill: $neutral-color-100;
}
.highcharts-legend-item-hidden * {
fill: $neutral-color-20 !important;
stroke: $neutral-color-20 !important;
transition: fill 250ms;
}
.highcharts-legend-nav-active {
fill: $highlight-color-100;
cursor: pointer;
}
.highcharts-legend-nav-inactive {
fill: $neutral-color-20;
}
.highcharts-legend-title-box {
fill: none;
stroke-width: 0;
}
/* Loading */
.highcharts-loading {
position: absolute;
background-color: $background-color;
opacity: 0.5;
text-align: center;
z-index: 10;
transition: opacity 250ms;
}
.highcharts-loading-hidden {
height: 0 !important;
opacity: 0;
overflow: hidden;
transition: opacity 250ms, height 250ms step-end;
}
.highcharts-loading-inner {
font-weight: bold;
position: relative;
top: 45%;
}
/* Plot bands and polar pane backgrounds */
.highcharts-plot-band {
fill: $neutral-color-100;
fill-opacity: 0.05;
}
.highcharts-plot-line {
fill: none;
stroke: $neutral-color-40;
stroke-width: 1px;
}
/* Highcharts More */
.highcharts-boxplot-box {
fill: $background-color;
}
.highcharts-boxplot-median {
stroke-width: 2px;
}
.highcharts-bubble-series .highcharts-point {
fill-opacity: 0.5;
}
.highcharts-errorbar-series .highcharts-point {
stroke: $neutral-color-100;
}
.highcharts-gauge-series .highcharts-data-label-box {
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-gauge-series .highcharts-dial {
fill: $neutral-color-100;
stroke-width: 0;
}
.highcharts-polygon-series .highcharts-graph {
fill: inherit;
stroke-width: 0;
}
.highcharts-waterfall-series .highcharts-graph {
stroke: $neutral-color-80;
stroke-dasharray: 1, 3;
}
/* Highstock */
.highcharts-navigator-mask {
fill: $highlight-color-60; /* navigator.maskFill option */
fill-opacity: 0.25;
}
.highcharts-navigator-mask-inside {
fill: $highlight-color-60; /* navigator.maskFill option */
fill-opacity: 0.25;
cursor: ew-resize;
}
.highcharts-navigator-outline {
stroke: $neutral-color-20;
fill: none;
}
.highcharts-navigator-handle {
stroke: $neutral-color-20;
fill: $neutral-color-5;
cursor: ew-resize;
}
.highcharts-navigator-series {
fill: $highlight-color-80;
stroke: $highlight-color-80;
}
.highcharts-navigator-series .highcharts-graph {
stroke-width: 1px;
}
.highcharts-navigator-series .highcharts-area {
fill-opacity: 0.05;
}
.highcharts-navigator-xaxis .highcharts-axis-line {
stroke-width: 0;
}
.highcharts-navigator-xaxis .highcharts-grid-line {
stroke-width: 1px;
stroke: $neutral-color-10;
}
.highcharts-navigator-xaxis.highcharts-axis-labels {
fill: $neutral-color-40;
}
.highcharts-navigator-yaxis .highcharts-grid-line {
stroke-width: 0;
}
.highcharts-scrollbar-thumb {
fill: $neutral-color-20;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-button {
fill: $neutral-color-10;
stroke: $neutral-color-20;
stroke-width: 1px;
}
.highcharts-scrollbar-arrow {
fill: $neutral-color-60;
}
.highcharts-scrollbar-rifles {
stroke: $neutral-color-60;
stroke-width: 1px;
}
.highcharts-scrollbar-track {
fill: $neutral-color-5;
stroke: $neutral-color-5;
stroke-width: 1px;
}
.highcharts-button {
fill: $neutral-color-3;
stroke: $neutral-color-20;
cursor: default;
stroke-width: 1px;
transition: fill 250ms;
}
.highcharts-button text {
fill: $neutral-color-80;
}
.highcharts-button-hover {
transition: fill 0ms;
fill: $neutral-color-10;
stroke: $neutral-color-80;
}
.highcharts-button-pressed {
font-weight: bold;
fill: $highlight-color-10;
stroke: $highlight-color-80;
}
.highcharts-button-disabled text {
fill: $neutral-color-20;
}
.highcharts-range-selector-buttons .highcharts-button {
stroke-width: 0;
}
.highcharts-range-label rect {
fill: none;
}
.highcharts-range-label text {
fill: $neutral-color-60;
}
.highcharts-range-input rect {
fill: none;
}
.highcharts-range-input text {
fill: $neutral-color-80;
}
input.highcharts-range-selector {
position: absolute;
border: 0;
width: 1px; /* Chrome needs a pixel to see it */
height: 1px;
padding: 0;
text-align: center;
left: -9em; /* #4798 */
}
.highcharts-crosshair-label text {
fill: $background-color;
font-size: 1.1em;
}
.highcharts-crosshair-label .highcharts-label-box {
fill: inherit;
}
.highcharts-candlestick-series .highcharts-point {
stroke: $neutral-color-100;
stroke-width: 1px;
}
.highcharts-candlestick-series .highcharts-point-up {
fill: $background-color;
}
.highcharts-ohlc-series .highcharts-point-hover {
stroke-width: 3px;
}
.highcharts-flags-series .highcharts-point {
stroke: $neutral-color-40;
fill: $background-color;
}
.highcharts-flags-series .highcharts-point-hover {
stroke: $neutral-color-100;
fill: $highlight-color-20;
}
.highcharts-flags-series .highcharts-point text {
fill: $neutral-color-100;
font-size: 0.9em;
font-weight: bold;
}
/* Highmaps */
.highcharts-map-series .highcharts-point {
transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
stroke: $neutral-color-20;
}
.highcharts-map-series .highcharts-point-hover {
transition: fill 0ms, fill-opacity 0ms;
fill-opacity: 0.5;
stroke-width: 2px;
}
.highcharts-mapline-series .highcharts-point {
fill: none;
}
.highcharts-heatmap-series .highcharts-point {
stroke-width: 0;
}
.highcharts-map-navigation {
font-size: 1.3em;
font-weight: bold;
text-align: center;
}
.highcharts-coloraxis {
stroke-width: 0;
}
.highcharts-coloraxis-marker {
fill: $neutral-color-40;
}
.highcharts-null-point {
fill: $neutral-color-3;
}
/* 3d charts */
.highcharts-3d-frame {
fill: transparent;
}
.highcharts-column-series .highcharts-point {
stroke: inherit; /* use point color */
}
/* Exporting module */
.highcharts-contextbutton {
fill: $background-color; /* needed to capture hover */
stroke: none;
stroke-linecap: round;
}
.highcharts-contextbutton:hover {
fill: $neutral-color-10;
stroke: $neutral-color-10;
}
.highcharts-button-symbol {
stroke: $neutral-color-60;
stroke-width: 3px;
}
.highcharts-menu {
border: 1px solid $neutral-color-40;
background: $background-color;
padding: 5px 0;
box-shadow: 3px 3px 10px #888;
}
.highcharts-menu-item {
padding: 0.5em 1em;
background: none;
color: $neutral-color-80;
cursor: pointer;
transition: background 250ms, color 250ms;
}
.highcharts-menu-item:hover {
background: $highlight-color-80;
color: $background-color;
}
/* Drilldown module */
.highcharts-drilldown-point {
cursor: pointer;
}
.highcharts-drilldown-data-label text, .highcharts-drilldown-axis-label {
cursor: pointer;
fill: $highlight-color-100;
font-weight: bold;
text-decoration: underline;
}
/* No-data module */
.highcharts-no-data text {
font-weight: bold;
font-size: 12px;
fill: $neutral-color-60;
}
}
I can't understand why this tutorial example does not work for me:
I have external js libraries:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
"http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"
And this code on load document:
<script type="text/javascript">
$(document).ready(function () {
$('input.typeahead').typeahead({
name: 'cars',
local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
});
});
</script>
I have css:
<style type="text/css">
.bs-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
And html code:
<body>
<div class="bs-example">
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
</div>
</body>
Can anyone help me ?
Works great everywhere but IE 6 and IE 7, any help?
http://www.zookacreative.com/beta
I believe the error is in your sifr-config.js:
sIFR.replace(nfslab, {
selector: '#home h3.about,#ourapproach h3.about,#contactus h3.about, #mobile h3.about, #web h3.about, #affiliate h3.about, #environments h3.about, #branding h3.about, #packaging h3.about, #pop h3.about, #print h3.about',
wmode: 'transparent',
css: [
'.sIFR-root { background-color: #FFFFFF; color: #000000; font-size: 16px; text-decoration: none; cursor: pointer; }',
'a {color: #000000; text-decoration: none;}',
'a:hover {color: #6BC8C6; text-decoration: none;}'
],
});
the trailing comma in the list is graciously ignored by Firefox, but not by IE.
This screws up the siFR initialization process.
I think IE is correct to fail here.
You will need to remove all extra commas in all definitions.