Im currently creating an app using cordova and ChartJS - I'm rendering a doughnut chart and it works perfectly fine in the emulator, but when I come to test the app on a ipad/ipod/iphone the chart does not render.
function renderMainClock(hourId) {
var clockData = gVMainClockData[hourId - 1];
var ctx = document.getElementById("main-clock").getContext("2d");
window.mainClock = new Chart(ctx).Doughnut(clockData, {responsive:true});
alert(ctx);
}
The alert gets called within the emulator, but is never called when its ran on a iOS device.
Does anyone know what the problem is?
Here is my index.html too:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title>NUH Nursing Activity</title>
</head>
<body>
<!-- Top Bar -->
<div id="top-bar"></div>
<!-- Navigation -->
<div class="">
<nav>
<div class="nav-wrapper blue darken-4">
NUH Nursing Activity
<ul class="right">
<li><i class="mdi-action-info"></i></li>
</ul>
</div>
</nav>
</div>
<div class="container-custom">
<div class="center small-circle-padding">
<div id="small-circles"></div>
</div>
<div id="canvas-holder" class="center">
<canvas id="main-clock"></canvas>
</div>
<div class="card red darken-1">
<div class="card-content white-text">
<p>Current Shift Hour: 1</p>
</div>
</div>
<div class="row">
<div class="col s5">
<a class="btn blue darken-2">Add</a>
</div>
<div class="col s7 right">
<a class="btn blue darken-4 right disabled">Finish</a>
</div>
</div>
</div>
<!-- Include Relevant JavaScript -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/globalVariables.js"></script>
<script tyoe="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/chart.min.js"></script>
<script type="text/javascript" src="js/appStart.js"></script>
<script type="text/javascript" src="js/mainClock.js"></script>
</body>
</html>
Have you tried commenting the following code under Chart.js ?
helpers.retinaScale(this.chart);
That tends to fix the issue.
It's so silly, but removing the []'s from my backgroundColor and borderColor options fixed the rending issue I was having.
Related
I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working
What is your purpose in the draggable, you need to define the options for it
https://jqueryui.com/draggable/
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">
general description
</p>
<div id="draggableHelper">
<img id="image" src = "images/jimslogo2.png"/>
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#draggableHelper').draggable();
$('#image').resizable();
});
</script>
</body>
</html>
Use these two links instead.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
You can try my answer here https://jsfiddle.net/a68mdzes/
Hope it works :)
You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.
$(document).ready(function() {
$('#draggableHelper').draggable();
$('#image').resizable();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="div1">
<h1> About Us </h1>
<p class="card-text">general description</p>
<div id="draggableHelper" style="display:inline-block">
<img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
</div>
</div>
<div class="div2">
<span class="dot">
<div>
<div id="rotator"></div>
</div>
<p class="textScale">
<b>Featured Products </b>
</p>
</span>
</div>
</div>
The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.
I'm trying to build my web portfolio and I want a card format which includes an image thumbnail and text below it. The problem I have is that can't control the size of the initial image and that makes the cards misaligned.
I'm wondering if there's way to fix it so it adjusts to any image size. Here's my code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">
<div class="container">
<i class="fas fa-code"></i> BODY OF WORK
</div>
</nav>
<section id="header" class="jumbotron text-center">
<h1 class="display-3">FRANK DIN: WEB DEVELOPER</h1>
</section>
<section id="gallery">
<div class="container">
<div class="row">
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/LandingPage/blob/master/Landing%20Page%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Landing Page</h5>
<p class="card-text">Landing page for a fictitious dating site built with Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
<div class="col-lg 4 mb-3">
<div class="card">
<img class="card-img-top" src="https://github.com/frankdin1/Bootstrap-Image-Gallery/blob/master/BootstrapPhotoBlog%20thumbnail.PNG?raw=true">
<div class="card-body">
<h5 class="card-title">Bootstrap Image Gallery</h5>
<p class="card-text">Image gallery built using Bootstrap.</p>
Github
Webpage
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Add this CSS:
.card-img-top {
height: 20vw; // change this value and/or units to your liking
width: 100%;
object-fit: cover;
}
I'm developing a site for the corporation i work at and this time i chose to develop it with Materialize CSS as the UI framework. It looks really nice and i like its functions, though i have one major problem.
A periodic error!
Which means, that when i load the site sometimes i get a js error. For example i have a dropdown named selectDatabase (That is the object i defined).
If i reload the page a couple of times, this does not happen! The dropdown is initialized as it should be. Do you have an idea of what could possibly be wrong here?
Project Details:
Framework: Asp.net Core 2.0 MVC
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320" />
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="~/lib/materialize/materialize.css" media="screen,projection" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/style_guide.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/lib/corporationtheme/css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="~/css/font-awesome-animation.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="~/css/bundle.css" type="text/css" media="all" />
<title>AutoTest Validation</title>
</head>
<body>
<div class="visible-print print-logo"><i class="icon-logo"></i></div>
<div class="content-wrapper">
<div class="mega-menu">
<div class="container nav-top">
<div class="row">
<div class="col s12">
<a class="logo" href="/">
<i class="icon-logo"></i>
</a>
<span class="logo-text">
<i class="icon-logo-text"></i>
<i class="icon-logo-text-oneline"></i>
</span>
<a href="#" class="mobile-btn menu-btn">
<i class="icon-mobile-menu"></i>
</a>
<div class="logo-title">
<div class="userDropdownWrapper">
<a class="dropdown-trigger" id="userDropdown" href="#!" data-target="dropdown">
<img id="userpicture" src="~/images/profile.svg" class="avatar">
<span id="userfirstname"></span>
<svg class="caret" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</a>
</div>
<ul id="dropdown" class="dropdown-content">
<li><a><i class="material-icons dropdown-icon">border_color</i>Edit Profile</a></li>
<li><a><i class="material-icons dropdown-icon">vpn_key</i>Sign Out</a></li>
<li class="divider"></li>
</ul>
<div id="databaseSelectInputField" class="input-field">
<select id="databaseSelect">
<option value="1" selected>AutoTest</option>
<option value="2">AutoTest2</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col s12">
<ul>
<li>DashBoard</li>
</ul>
</div>
</div>
</div>
</div>
<div class="sub-nav">
<div class="container">
<div class="row">
<div class="col s12">
</div>
</div>
<div class="row">
<div class="col s12 sub-nav-items">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="container maincontainer" id="followMe">
#RenderBody()
</div>
</div>
<div class="footer-links">
<ul>
<li>corporation.com</li>
<li>Portal</li>
</ul>
</div>
</div>
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/lib/corporationtheme/js/app/main.js';
document.body.appendChild(script);
</script>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="~/lib/materialize/materialize.js"></script>
<script type="text/javascript" src="~/js/errorHandler/bundle.js"></script>
<script type="text/javascript" src="~/js/shared/layout/bundle.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
JS Code:
let selectDatabase = null;
let selectUser = null;
let dropdownUser = null;
let currentUser = {};
$(document).ready(function () {
selectDatabase = $('#databaseSelect');
selectUser = $('#userSelect');
dropdownUser = $("#userDropdown");
getUserProfile();
selectDatabase.formSelect();
selectUser.formSelect();
dropdownUser.dropdown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
It is hard to answer this question without being able to test a few things, but I'll try anyway :)
It looks like sometimes Materialize js does not load properly, or (what I think is the most probable) it loads after you use your function.
So the solution is this
Make sure that you use your code after the Materialize js is loaded. You can do it on couple of ways. The easiest would be to add defer attribute to script tag in html which loads js in the order of tags in html.
Example
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js" defer></script>
<script src="your_js.js" defer></script>
Okay. So it looks like i did find the problem.
Main.Js was interfering with Materalize and caused the error. I found a more simple main.js for our theme. Now the errors are gone and the website works like a charm. Thank you for your help guys.
The HTML file is generated using Markdown.
I have included a JavaScript file in HTML. It is visible that it is loaded in the browser (tried on Mozilla firefox).
See the proof below.
I tested if JS is enabled or not from https://www.whatismybrowser.com/detect/is-javascript-enabled
But somehow, it is not being executed.
Below is my generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-16"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="generator" content="Bootply-JBake-Custom"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-16"/>
<title>Title</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/asciidoctor.css" rel="stylesheet">
<link href="/css/base.css" rel="stylesheet">
<link href="/css/prettify.css" rel="stylesheet">
<link href="/css/styles.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico">
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
LOGO
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>Projects</li>
<li>About</li>
<li>Categories</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="page-header" id="banner">
<div class="row">
<div class="col-lg-8 col-md-7 col-sm-6">
<h1>Projects</h1>
</div>
</div>
</div>
<!-- This script is loading but not executing -->
<script type="text /javascript" src="projects.js"></script>
<p>Here is the list of projects</p>
</div>
</div>
<div id="push"></div>
<div id="footer">
<div class="container">
</div>
</div>
</body>
</html>
projects.js
$(document).ready(function(){
console.log("ready")
alert("hi");
});
console.log("loaded")
<script type="text /javascript" src="projects.js"></script>
Remove the space in type="text /javascript with the result:
<script type="text/javascript" src="projects.js"></script>
This should allow the browser to parse the HTML correctly and load the script.
EDIT: Or remove the type attribute from the <script> tag entirely, as suggested by the comment below.
I'm experiencing issues with the drawer in my asp.net mvc mobile application. After a lot of hassle (and possibly a few bugs in the asp.net mvc helpers) I decided to roll back to a javascript layout for my app.
The only problem I have is that I've implemented a drawer-menu that does not seem to work properly.
For some reason, Kendo generates a # in the middle of my url, causing the drawer to not show.
This is the url when it doesn't work:
http://localhost:55683/#/UnitDetails/Index/2
And here it is when it works:
http://localhost:55683/UnitDetails/Index/2#/
Here's my markup in my shared _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2013.2.716/kendo.mobile.min.js"></script>
<link href="#Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.flat.min.css")" rel="stylesheet" type="text/css" />
</head>
<body>
#RenderBody()
<!--Main Layout -->
<div data-role="layout" data-id="mainLayout">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a data-icon="action" href="~/Logout">Logout</a>
</div>
</div>
</div>
</body>
</html>
And here's the Index.cshtml of my UnitDetails-view:
<!-- Drawer layout -->
<div data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span data-role="view-title"></span>
#*<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>*#
<a data-align="right" data-role="backbutton">Back</a>
</div>
</header>
</div>
<div id="drawer-home" data-role="view" data-layout="drawer-layout" data-title="Unit Details">
<!-- Content removed for readability -->
<div data-role="footer">
</div>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home']">
<ul data-role="listview" data-type="group">
<li>Mailbox
<ul>
<li data-icon="inbox">Inbox</li>
</ul>
</li>
</div>
<script>
window.app = new kendo.mobile.Application(document.body, {
layout: "drawer-layout",
transition: "fade",
skin: "flat",
hideAddressBar: true
});
</script>
There was a bug with the kendo mobile drawer 2013.2.918 and was fixed with a later internal build. Try some debugging by removing the data-views attribute from the drawer. But this will cause the drawer to be displayed in all views via swipe.