valdas_vegele
Posts: 14
Joined: Mon May 26, 2014 3:21 pm

Dividing line under heading text

Hi there,

in highslide editor I configured pop-up window with html content.
When I see the example of my configuration in editor there is gray dividing line along all window under the header.
When I downoad the code and put it into my page, the pop-up window header has no divider..

What could be the issue there..?
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Dividing line under heading text

Please give us a link to your page.

And how do you want it to display - dividing line, or no dividing line? (Not really sure what you're referring to here - what dividing line?)
valdas_vegele
Posts: 14
Joined: Mon May 26, 2014 3:21 pm

Re: Dividing line under heading text

I did not managed to upload my highslide files to my page at http://www.weebly.com yet.
I am testing my code only locally on my PC.

Therefore I can provide only my code and highslide.config.js:

Code: Select all

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Board</title>
	</head>
	<body>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="highslide/highslide-full.js"></script>
		<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="highslide/highslide.css"/>
		<script type="text/javascript"> hs.allowMultipleInstances = false; hs.outlineType = 'rounded-white'; </script>
		<script src="http://code.highcharts.com/highcharts.js"></script>
		<script src="http://code.highcharts.com/modules/drilldown.js"></script>

		<div id="container" style="min-width: 500px; height: 180px; margin: 0 auto"></div>
		
		<script type="text/javascript">
$(function () {    
	Highcharts.setOptions({
		global: {
			useUTC: false,
			timeZoneOffset: -180
		},
		lang: {
			shortMonths: ['Sau', 'Vas', 'Kov', 'Bal', 'Geg', 'Bir',  'Lie', 'Rgp', 'Rgs', 'Spa', 'Lap', 'Grd'],
			drillUpText: ' < Atgal '
		}
	});
	// Create the chart
	$('#container').highcharts({
		credits: {
			enabled: false
		},
		xAxis: [{
			id: 0,
			startOnTick: false,
			labels: {
				y: 15,
				format: '{value:%e %b}',
				zIndex: 0
			},
			tickWidth: 0,
			tickPixelInterval: 10,
			title: {
				text: null
			},
			type: 'datetime'
		},{
			id: 1,
			startOnTick: false,
			labels: {
				y: 15,
				zIndex: 0
			},
			tickWidth: 0,
			title: {
				text: null
			},
			type: 'category',
			lineWidth: 0
		}],
		yAxis: {
			gridLineWidth: 0,
			gridLineColor: '#e0e0e0',
			labels: {
				y: 0,
				x: 0,
				overflow: 'justify',
				enabled: false,
				maxStaggerLines: 0,
				align: 'center'
			},
			title: {
				margin: 0,
				text: null
			},
			gridLineInterpolation: null
		},
		tooltip: {
			enabled: false,
			shared: true,
			xDateFormat: '%e %b',
			valueSuffix: ' Lt',
			borderColor: 'null',
			borderRadius: 10
		},
		plotOptions: {
			areaspline: {
				lineColor: '#c0c0c0',
				marker: {
					enabled: false,
					fillColor: '#e0e0e0',
					radius: 3,
					lineWidth: 1,
					lineColor: '#c0c0c0'
				},
				lineWidth: 1,
				states: {
					hover: {
						marker: {
							radius: 3,
							lineWidth: 1
						}
					}
				}
			},
			column: {
				allowPointSelect: false,
				cursor: 'pointer',
				pointWidth: 35,
				dataLabels: {
					enabled: true,
					inside: false,
					overflow: 'none',
					y: -10,
					x: 0,
					verticalAlign: 'middle',
					padding: 0,
				}
			}
		},
		chart: {
			events: {
				drilldown: function(e){
					UpdateTitle('BP s/f ', Highcharts.dateFormat('%Y-%m-%d', e.point.x))
					},
				drillup: function(){
					UpdateTitle('BP s/f', null)
				}
			},
			spacingBottom: 20,
			type: 'column',
			borderRadius: 2,
			spacingTop: 0,
			width: 1012,
			marginLeft: 0,
			spacingRight: 0,
			marginBottom: 40,
			marginRight: 0,
			marginTop: 25,
			height: 180,
			spacingLeft: 0
		},
		title: {
			margin: 10,
			y: 15,
			text: 'BP s/f',
			x: 20,
			align: 'left',
		},
		subtitle: {
			x: 20,
			align: 'left'
		},
		Exporting: {
			scale: 1,
			buttons: {
				contextButton: {
					enabled: false
				}
			},
			enabled: false
		},
		legend: {
			enabled: false,
			symbolWidth: 12
		},
		series: [ {
			index: 1,
			type: 'column',
			color: '#30bf09',
			name: 'BP s/f',
			data: [{
				x: 1399410000000,
				y: 16675,
				drilldown: 'day01'
			},{
				x: 1399496400000,
				y: 6906,
				drilldown: 'day02'
			},{
				x: 1399582800000,
				y: 5290,
				drilldown: 'day03'
			},{
				x: 1399669200000,
				y: 764,
				drilldown: 'day04'
			},{
				x: 1399755600000,
				y: 248,
				drilldown: 'day05'
			},{
				x: 1399842000000,
				y: 8585,
				drilldown: 'day06'
			},{
				x: 1399928400000,
				y: 5176,
				drilldown: 'day07'
			},{
				x: 1400014800000,
				y: 10836,
				drilldown: 'day08'
			},{
				x: 1400101200000,
				y: 13217,
				drilldown: 'day09'
			},{
				x: 1400187600000,
				y: 7213,
				drilldown: 'day10'
			},{
				x: 1400274000000,
				y: 711,
				drilldown: 'day11'
			},{
				x: 1400360400000,
				y: 1038,
				drilldown: 'day12'
			},{
				x: 1400446800000,
				y: 6612,
				drilldown: 'day13'
			},{
				x: 1400533200000,
				y: 14496,
				drilldown: 'day14'
			}]
		},{
			index: 0,
			type: 'areaspline',
			color: '#e0e0e0',
			name: 'Planas',
			data: [
				[1399410000000, 2930],
				[1399496400000, 2930],
				[1399582800000, 2930],
				[1399669200000, 0],
				[1399755600000, 0],
				[1399842000000, 2930],
				[1399928400000, 2930],
				[1400014800000, 2930],
				[1400101200000, 2930],
				[1400187600000, 2930],
				[1400274000000, 0],
				[1400360400000, 0],
				[1400446800000, 2930],
				[1400533200000, 2930]
			]
		}],
		drilldown: {
			activeAxisLabelStyle: {
				textDecoration: 'none',
				fontWeight: 'regular',
				color: '7f7f7f'
			},
			activeDataLabelStyle: {
				textDecoration: 'none',
				fontWeight: 'semi-bold',
				color: '4c4c4c'
			},
			drillUpButton: {
				relativeTo: 'spacingBox',
				position: {
					align: 'right',
					x: -5,
					y: 0,
					verticalAlign: 'top'
				}
			},
			series: [{
				id: 'day01',
				xAxis: 1,
				point: {
					events: {
						click: function (e) {
							hs.htmlExpand(null, {
								pageOrigin: {
									x: e.pageX + 170,
									y: e.pageY - 10
								},
							headingText: 'Sąskaitos-faktūros',
							maincontentId: 'drill_slide',
							radius: 1,
							width: 300,
							height: 150
							});
						}
					}
				},
				data: [ 
					['ESET', 20000],
					['OERP', 4000],
					['Presta', 2000],
					['Export', 600],
					['ESET', 75],
					['SoftMak', 75],
					['Google', 750],
					['Blancco', 0],
					['Axence', 200],
					['Kiti', 1500],
					['...', 0],
					['...', 0],
					['Box', 550],
					['Nuoma', 75]
				]
				},{
				id: 'day02',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftM', 75],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ]
				]
				},{
				id: 'day03',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day04',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day05',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day06',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day07',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day08',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day09',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day10',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day11',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day12',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day13',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75]
				]
				},{
				id: 'day14',
				xAxis: 1,
				data: [ 
					['ESET', 10000],
					['OERP', 4000],
					['Google', 2000],
					['Export', 600],
					['SoftMaker', 75],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ],
					[ , ]
				]}
			]
		}
	})
	var chart = $('#container').highcharts();
	function UpdateTitle(argument1, argument2) {
		chart.setTitle({text: argument1}, {text: argument2})
	}
});
</script>

<div id="drill_slide" class="highslide-maincontent">
<table style="width:280px" cellspacing=2 cellpadding=0 size=0 font color="#ff0000">
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Axence</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Google</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Eve</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jackson</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jill</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Smith</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>50</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project A</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Eve</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Jackson</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>94</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project K</td>
</tr>
<tr>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>John</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>Doe</td>
  <td><FONT COLOR="#000000" FACE="Lucida Sans Unicode" SIZE=2>80</td>
  <td><FONT COLOR="#ff0000" FACE="Lucida Sans Unicode" SIZE=2>Project N</td>
</tr>
</table>
</div>

</body>
</html>
My highslide.config.js:

Code: Select all

/**
*	Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.creditsPosition = 'below';
hs.outlineType = 'custom';
hs.marginTop = 20;
hs.marginRight = 20;
hs.marginBottom = 20;
hs.marginLeft = 20;
hs.headingEval = 'this.a.title';
hs.headingOverlay.position = 'top left';
valdas_vegele
Posts: 14
Joined: Mon May 26, 2014 3:21 pm

Re: Dividing line under heading text

I want the gray dividing line uder the header section in the pop-up window.

Pop-ups only available when drilling-down the first column ("7 Geg") and then clicking on any column.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Dividing line under heading text

Hi,

Replace this line in your highslide.config.js file:

Code: Select all

hs.headingOverlay.position = 'top left’;
with this line:

Code: Select all

hs.wrapperClassName  = 'titlebar';
Add this to your highslide.css file:

Code: Select all

.highslide-header ul a {
	background-image: url(graphics/controlbar-text-buttons.png);
	padding-left: 16px;
	display: inline-block;
	height: 16px;
}
.highslide-header ul li span {
	display: none;
}
.highslide-header .highslide-move {
	display: none;
}
.highslide-header .highslide-close a {
	background-position: 0 -221px;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
valdas_vegele
Posts: 14
Joined: Mon May 26, 2014 3:21 pm

Re: Dividing line under heading text

Thank you, Hilde!

Return to “Highslide JS Usage”