So I think my site is responsive so far. Inside my div tag with the id "navResult" I render partial views. The site is responsive to how much data is inside the element. But for some reason when I load a partial view with a chartJS chart the site doesn't respond to the parameters of the chart. Instead, a scroll bar is added like so, "https://ibb.co/ceRenw". I don't believe this has anything to do with MVC, but more with plain HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title MM-3</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/unobtrusive")
#model IEnumerable<RoboticUI.Models.ResultantRead>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/AutocompleteScript.js"></script>
<script src="~/Scripts/chartJsTrial.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
</head>
<body style="font-family:Verdana;">
<div class="container">
<header>
<div class="headerContent">
<p>Robot Gallery</p>
</div>
</header>
<div class="menu-content" style="overflow:auto">
<div class="menu">
<p>#Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
</div>
<div id="navResult" class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<footer>Copyright © MMM</footer>
</div>
#RenderBody()
</body>
</html>
external style sheet.
header, footer {
background-color: #68bbff;
height: 5%;
text-align: center;
}
div.headerContent p{
display:inline-block;
}
div.headerContent p.CompanySearchBar{
float:right;
}
div.container {
width: 100%;
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.menu {
float: left;
width: 5%;
text-align: center;
}
.menu-content {
padding-bottom: .2em;
}
.menu a {
border: 2px solid #4CAF50;
border-radius: 15px 100px;
text-align: center;
font-size: 12px;
display:block;
padding:20px;
}
.menu a:hover{
background-color:#4CAF50;
}
.main {
float: left;
width: 95%;
padding: 0 20px;
}
#media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
Code to call the chart
console.log('test');
function getFun() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Simple Column Chart in ASP.NET MVC"
},
subtitles: [
{ text: "Try Resizing the Browser" }
],
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
//Uncomment below line to add data coming from the controller.
}
]
});
chart.render();
}
and the chart is called inside this partial view.
#{
}
<link rel="stylesheet" type="text/css" href="~/Content/Data.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
<div id="chartContainer">
</div>
I believe I fixed my problem by adding style="overflow: -webkit-paged-x;" to each div that holds a chart. But, is was that the right thing to do? Is there another approach. I don't want to have to add style="overflow: -webkit-paged-x;" every single time I create a chart.
Related
For the past week I have been trying to create a website which is 100vh & vw where the images swap when you move the cursor from left to right.
I have almost no prior coding skills but I managed to get it working using a script called swinger.js So far so good.
But now I want to add an image caption in the header that shows the right caption with the right image. But I can't seem to figure out how to do this...
Any help would be appreciated!
Thanks,
Here is the code so far
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
i have added an attribute title to your html (see string of image)
and I have lightly modified yout swinger code to select the right title and display in header
$.fn.swinger = function () {
return this.each(function () {
var $container = $(this);
$container.css({
"position": "relative"
});
var $images = $container.find("img");
$images.css({
});
var $middleImage = $($images[Math.floor($images.length / 2)]);
$middleImage.css({
"z-index": "2",
"position": "relative"
});
var columnsCount = $images.length;
$images.each((i, img) => {
var left = `${100 / columnsCount * i}%`;
var width = `${100 / columnsCount}%`;
var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
$(img).after($column);
$column.hover(() => {
$images.css({
"z-index": "1",
"position": "absolute"
});
$(img).css({
"z-index": "2",
"position": "relative"
});
// just added one line
$("header").text($(img).attr("title"));
});
})
});
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
}
.left-holder {
text-align: left;
float: left;
margin-right: 55px;
width: 250px; }
div.swinger-container {
text-align: center;
overflow: hidden;
width: 100vw;
height: calc(100vh);
}
div.swinger-container img {
object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>TITLE</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
</header>
<div class="slides">
<div class="swinger-container">
<img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” title="image left"/>
<img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image center"/>
<img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” title="image right"/>
</div>
</div>
<script type="text/javascript">
$(document).ready(init);
function init()
{
$(".swinger-container").swinger();
}
</script>
<script src="swinger.js"></script>
</body>
</html>
I am trying to implement a gsap example from codepen.
Nothing shows when I launch my html file. I remove the styles CSS at the bottom and it started showing. I believe the CSS is scss, which makes it more confusing because I assumed I could use it. The html file is below. I haven't used scss before so it seems strange to me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CSSRulePlugin3.min.js"/>
</head>
<body>
<main>
<div class="content">
<h1 class="anim1"><span>Bridging the gap</span> <span>between dream</span> <span>and reality</span></h1>
<p class="anim1">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio at ipsa alias modi natus excepturi?</p>
Start Dreaming
</div>
</main>
<aside>
<div class="wrapper">
<img class="swirl" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/swirl.png" alt="Swirl Graphic">
</div>
</aside>
<script type="text/javascript">
// 1
// gsap.from(".content", {duration:1, y:-50, opacity: 0});
// 1.1 Show Easings "steps(5)" "Power2.easeInOut" "elastic(1, 0.3)" https://greensock.com/docs/v2/Easing
// gsap.from(".content", {duration:1, y:-50, opacity: 0, ease: "elastic(1, 0.3)"});
// 2 ADD
// gsap.from("img", {duration: 1, y: 30, opacity: 0});
// gsap.from("aside", {duration: 1, opacity: 0, backgroundPosition: '200px 0px'});
// 3 Show Delay
// gsap.from("img", {duration: 1, delay: 1.4, y: 30, opacity: 0});
// gsap.from("aside", {duration: 1, delay: 1.1, opacity: 0, backgroundPosition: '200px 0px'});
// 4 Show Stagger (add class)
// gsap.from(".anim1", {duration:1, y:-50, opacity: 0, stagger: .6});
// 5 Show text reveal animation (add css span:after)
// <script src="CSSRulePlugin.min.js">
var rule = CSSRulePlugin.getRule("span:after");
// 6 Show Timeline
var tl = gsap.timeline({defaults:{duration: 1}});
tl.from(".anim1", {y:-50, stagger: .6, opacity: 0})
.to(rule, {duration: 1.8,cssRule: {scaleY: 0}}, "-=2.2")
.from("aside", {backgroundPosition: '200px 0px', opacity: 0}, "-=1.5")
.from("img", {y:30, opacity: 0}, "-=.5")
// 7 Show Click reverse
document.getElementById('cta').addEventListener('click', () => {
console.log('click')
tl.reversed() ? tl.play() : tl.reverse();
})
</script>
<style type="text/css">
body {
height: 100%;
margin: 0;
display: grid;
grid-template-columns: auto 30%;
font-family: 'Montserrat';
}
*, *:before, *:after {
box-sizing: border-box;
}
.line {
position: absolute;
}
main {
margin-left: 20%;
height: 100vh;
display: grid;
place-content: center;
.content {
width: 70%;
h1 {
font-size: 3em;
position: relative;
span {
display: block;
}
}
</style>
</body>
</html>
The above code in <style> tag uses nesting which is supported by scss.
So to run the above code follow these steps
Step 1: Install Sass
npm install -g sass
Step 2: Create a new file as styles.scss
Step 3: Copy the code from <style> tag to styles.scss file
Step 4: Run the following command in the terminal
sass --watch styles.scss:styles.css
It will generate new styles.css file
Step 5: Link this styles.css file to the html
<link rel="stylesheet" href="styles.css">
That's it!
I am getting the above errors while trying to add a c3js/d3js graph. I am using d3 v5 for this project.
I also have bootstrap 3 linked to the html.
<head>
<title>Default</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
</head>
Strangely enough, if I remove the bootstrap.min.css line, the graph works, but obviously bootstrap doesn't work. Hence the conflict.
What can I do to make them work together? I know there are projects where they both work together, I just can't figure out how.
The following snippet demonstrates the issue:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
Working jsFiddle without bootstrap.css
Not working jsFiddle with boostrap.css
The Bootstrap CSS seems to conflict with the way C3.js calculates the dimensions of the container into which the chart is rendered. This can be solved by overriding the implicit height as determined by C3 with the configuration parameter size.height.
size: {
height: 320
}
Have a look at the updated working demo:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
size: {
height: 480
},
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
Is it possible to change the design of the LayerList widget in this ESRI tutorial ?
I would like the LayerList with no checkboxes and to select one layer at a time just by clicking it’s name.
I know you can hide the checkboxes with display: none but how do you select the layers?
Michelle.
Well, Here is the working solution for this-
Use selection color to select/Unselect the layerList Items:-
JSFiddle:- https://jsfiddle.net/vikash2402/5dcLh450/3/
Below is the working code for this-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
}
/* ****** Here you can change the selection color ******* */
.esriListVisible label{
background-color: aqua !important;
}
.esriCheckbox{
display: none !important;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Hoping this will help you :)
fullCalendar doesn't show the calendar on PhoneGap when launched on device (Android ICS).
However the content is loaded via Chrome or Firefox, it loads normally and the content can be seen. I've also tried to run the fullCalendar demos by itself without any custom code inside phonegap and the calendar does not render.
<!DOCTYPE HTML>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="./fullcalendar/fullcalendar.css">
<link rel="stylesheet" href="./fullcalendar/fullcalendar.print.css" media="print">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="./fullcalendar/fullcalendar.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,today,next',
right: 'agendaDay'
},
defaultView: "agendaDay",
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
events: [
{
title: 'Morning Status Meeting',
start: new Date(y, m, d, 9, 30),
allDay: false
},
{
title: 'Lunch meeting with John Appleseed',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 13, 30),
allDay: false
},
{
title: 'Android Product Review',
start: new Date(y, m, d, 14, 0),
end: new Date(y, m, d, 15, 0),
allDay: false
},
{
title: 'Andrew and Matthew\'s baseball finals',
start: new Date(y, m, d, 17, 0),
end: new Date(y, m, d, 19, 0),
allDay: false
},
{
title: 'Birthday Party',
start: new Date(y, m, d+1, 19, 0),
end: new Date(y, m, d+1, 22, 30),
allDay: false
},
]
});
});
</script>
<style type='text/css'>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#wrap {
width: 400px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event { /* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
float: right;
width: 400px;
background-color: white;
}
</style>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="service-booking" data-theme="b">
<div data-role="header">
<h1>Service Appointment Booking</h1>
Options
</div>
<div data-role="content" class="ui-content" role="main">
<div class="ui-grid-a">
<div class="ui-block-a" width="300">
<div id='wrap'>
<div id='calendar'></div>
</div>
</div>
</div><!-- /grid-a -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I have some problems showing margin on Android. Try without margin.