IPhone style - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: iphone, mobile

This topic contains 2 replies, has 2 voices, and was last updated by arkgroup 10 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

IPhone style Posts
November 3, 2014 at 7:24 pm IPhone style #62062

arkgroup
Participant

I need help to fix IPhone styling. Below code works fine in Windows browser and IPAD. For IPhne grid text is too small and graph labels are small as well. I’d like to keep metrodark style.
How can I fix that?
Thanks.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head><title></title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link href=”jqwidgets/styles/jqx.metrodark.css” rel=”stylesheet” type=”text/css” />

<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.core.js”></script>
<script src=”jqwidgets/jqxscrollview.js” type=”text/javascript”></script>
<script src=”jqwidgets/jqxtouch.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘sampledata/nasdaq_vs_sp500.txt’
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

$(“#jqxGrid”).jqxGrid(
{
width: ‘100%’,
height: ‘50%’,
rowsheight: 34,
columnsheight: 34,
source: dataAdapter,
theme: ‘metrodark’,
touchmode: true,
columns: [
{ text: ‘Date’, datafield: ‘Date’, cellsformat: ‘d’, width: 250 },
{ text: ‘S&P 500’, datafield: ‘S&P 500’, width: 150 },
{ text: ‘NASDAQ’, datafield: ‘NASDAQ’ }
]
});

var source =
{
datatype: “csv”,
datafields: [
{ name: ‘Date’ },
{ name: ‘S&P 500’ },
{ name: ‘NASDAQ’ }
],
url: ‘sampledata/nasdaq_vs_sp500.txt’
};

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];

// prepare jqxChart settings
var settings = {
title: “U.S. Stock Market Index Performance (2011)”,
description: “NASDAQ Composite compared to S&P 500″,
enableAnimations: true,
showBorderLine: false,

showLegend: true,
enableCrosshairs: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
backgroundColor: ‘Black’,
source: dataAdapter,

xAxis:
{
textRotationAngle: 90,
dataField: ‘Date’,
formatFunction: function (value) {
return months[value.getMonth()] + ‘\” + value.getFullYear().toString().substring(2);
},
toolTipFormatFunction: function (value) {
return value.getDate() + ‘-‘ + months[value.getMonth()];
},
minValue: ’01-01-2011′,
maxValue: ’01-01-2012’,
type: ‘date’,
baseUnit: ‘month’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
valuesOnTicks: true
},
colorScheme: ‘scheme05’,
seriesGroups:
[
{
type: ‘area’,
alignEndPointsWithIntervals: true,
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 3000,
displayValueAxis: true,
description: ‘Daily Closing Price’,
//descriptionClass: ‘css-class-name’,
axisSize: ‘auto’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘NASDAQ’, displayText: ‘NASDAQ’ },
{ dataField: ‘S&P 500’, displayText: ‘S&P 500’ }
]
}
]
};

$(‘#jqxChart’).jqxChart(settings);

$(“#jqxGrid”).jqxGrid(‘selectrow’, 0);

});
</script>
<style type=”text/css”>
.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{
fill: #ffffff;
color: #ffffff;
}
html, body {
background: #222;
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
font-size: 16px;
}
</style>
</head>
<body>
<div style=”border: none; width: 100%; height: 50%” id=”jqxGrid”>
</div>

<div id=’jqxChart’ style=”border: none; width: 100%; height: 50%”>
</div>

</body>
</html>

November 4, 2014 at 6:07 am IPhone style #62071
Peter Stoev
Keymaster
Hi arkgroup,

Have you tried by adding tbe below to your page:
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
```
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
November 4, 2014 at 1:49 pm IPhone style #62113

arkgroup
Participant

Thanks, I forgot meta tag.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.