I'm trying to get this fiddle to work locally. It does not render properly. I've no idea why. The linked .less file is copied directly from the fiddle. The result of my markup is a blank page. I opted to use the CDN because when I downloaded the source I was unsure which less.js file to copy.
Here's the markup:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>radial-progress</title>
<link rel="stylesheet/less" type="text/css" href="styles/radial-progress.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>
<body>
<div class="radial-progress" data-progress="0">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
<div class="fill fix"></div>
</div>
<div class="shadow"></div>
</div>
<div class="inset">
<div class="percentage"></div>
</div>
</div>
<script>
$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
window.randomize = function() {
$('.radial-progress').attr('data-progress', Math.floor(95));}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);
</script>
</body>
</html>
My guess is you are running off the C: drive instead of a local server so the relative protocol link is breaking.
src="//cdnjs..."
needs to be
src="http://cdnjs..."
Better yet look into running your own server. It is simple with python or node.
Related
I downloaded this project from github https://github.com/mcaule/d3-timeseries , but I don't know how to run this project to display the d3 graph. There are examples in this site: http://mcaule.github.io/d3-timeseries/.
For example I was thinking of writing a html page to run the project but I don't know how.
A working prototype for you -
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/dist/d3_timeseries.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<section class="main-content">
<h3>
Difference
</h3>
<!-- <div class="chartContainer"> -->
<!-- <p class="codepen" data-default-tab="result" data-embed-version="2" data-height="500" data-pen-title="d3-timeseries Example 1" data-slug-hash="wPpJWr" data-theme-id="dark" data-user="mcaule"> -->
<div id="chart"></div>
<!-- </p> -->
<script>
var data = createRandomData(80,[0,1000],0.01)
// [{date:new Date('2013-01-01'),n:120,n3:200,ci_up:127,ci_down:115},...]
var chart = d3_timeseries()
.addSerie(data.slice(0,60),{x:'date',y:'n'},{interpolate:'linear',color:"#a6cee3",label:"value"})
.addSerie(data.slice(50),
{x:'date',y:'n3',ci_up:'ci_up',ci_down:'ci_down'},
{interpolate:'monotone',dashed:true,color:"#a6cee3",label:"prediction"})
.width(820)
chart('#chart')
</script>
<!-- </div> -->
</section>
</body>
copy it as it is and paste it in an .html file then open that file in browser, everything would be working perfectly fine, and if it is not then please let me know.
I have a simple two page website developed using jQuery mobile framework. I had the need to use Datebox plugin for selection of times. Both pages of my website are in the same .php file separated by divs with data-role="page" appropriately.
My only problem is that if the datebox exists in the first page of the webpage, it loads properly, but in any other page, its icons are messed up.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="index">
<header data-role="header" data-position="fixed">
<h1>Home</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
<div data-role="page" id="onoff">
<header data-role="header" data-position="fixed">
<h1>ONOFF</h1>
</header>
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
<footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ON/OFF</li>
<li>Timer</li>
<li>Scheduler</li>
</ul>
</div>
</footer>
</div>
</body>
</html>
The following images show the issue. On page load, the first div with page-role="page" and id="index" is loaded and the datebox icon works as intended:
But if I navigate to the second page using the footer navbar ON/OFF tab, I get this weird icon placement:
Please help me figure out what is going wrong here.
Hmm, I'm not sure why this is but using local files instead of the CDN links in the head enabled me to use the datebox plugin across pages. The files were generated using the download builder found here:
http://dev.jtsage.com/DateBox/builder/
user3889963 hit the nail on the head.
Download the source files for JQM for Datebox and then call them directly within your head.
<script src="../jtsage-datebox.min.js" type="text/javascript"></script>
<link href="../jtsage-datebox.min.css" rel="stylesheet">
This previous question shows there is a problem with using the plugin via the CDN Jquery Mobile DateBox plugin only working when linked directly to page
Here is it working with the files installed directly.
Unique Naming is the problem.
Within both pages you are calling the datebox item by the same name, so only the first one gets styled correctly.
Just rename the second page as datebox2 this should fix the problem. As the label for searches for the first unique ID of "datebox" and styles that one.
<div data-role="main" class="ui-content">
<div class="ui-field-contain">
<label for="datebox2">Time (seconds)</label>
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>
</div>
</div>
I am having trouble with a stupidly simple problem. I have an HTMl file that has successfully hooked up to a css file, but ever time I try something easy in Javascript, it doesn't do it. All of my files are in the same folder. I am running this off of Notepad ++
enter code here
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div class="header">
</div>
<div class="main">
<div id="comic"></div>
<div id="caption"></div>
<div id="prompt">
<h3>Hello, world!</h3>
<div class="btn" id="yes"><img src="YESsmall.jpg"/></div>
<div class="btn" id="no"><img src="NOsmall.jpg"/></div>
</div>
</body>
</html>
And my Javascript looks like this:
$(document).ready(function() {
$('.main').hide();
});
what on earth have I done wrong?
I don't see you loading jQuery (or anything else providing a $). You can use a jQuery provided by a content delivery network (as described here) by adding
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
(or similar, depending on what version you need/want) before your other <script>
I am working on a single page application called 'bookMarks' using HTML+CSS+jQuery as the front end and Django as my back end. I created a Django project and put my app.html+app.js+app.css+jquery.js in /static.
My question is: I would like my view to return the app.html as it should be without using Django template. I have tried this:
#app/views.py
from django.shortcuts import render_to_response, HttpResponse
import urllib
def index(request):
index = urllib.urlopen('static/app.html').read()
return HttpResponse(index)
#static/app.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My Bookmarks</title>
<link type="text/css" rel="stylesheet" href="app.css">
<script src="jquery.js"></script>
<script type='text/javascript' src="app.js">
jQuery.noConflict();
</script>
</head>
<body>
<div id="title">
Easy-Save Bookmarks
</div>
<div class="left">
<h3 class="tag">News</h3>
<div>
<p> A book mark here!</p>
</div>
<h3 class="tag">Reading</h3>
<div>
<p> A book mark here!</p>
</div>
<div id="newTag"></div>
<div>
<form name="addTagForm">
<input type="text" name="newTag">
<input id="addTag" type="button" value="Add a new tag">
</form>
</div>
</div>
<div class="right">
</div>
</body>
</html>
But it seems that all JS and CSS effects are ignored.
Could someone help me to fix this?
Finally I found that's because I didn't include my js+css files in the absolute way.
Now when I put my HTML+JS+CSS files in my_app/static/, and include absolute
The view will return my html correctly.
I am developing a web app based on jQuery and jQuery mobile. I want to show different pages, but since the corresponding html-markup might become quite large I would like to split up the html into different files, i.e.:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<!-- import markup for page1 here -->
</div>
<div data-role="page" id="page2">
<!-- import markup for page2 here -->
</div>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
</body>
</html>
What can I do to import my markup where it says <!-- import markup for page<x> -->? Is there any way to achieve that?
I tried using <script>$("#page1").load("page1.html");</script> but this messes the entire page up! Since the web app should be packed as a native app for smartphones later php is not an option.
Thanks to Omar's comments above and his answer to this question I was able to come up with a working solution.
1.) Add external pages to the DOM by using $.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");
2.) Navigate to the newly loaded page by adding a listener to the document (i.e. $(document).on( "pagecontainerload", function( event, ui ) { //... } );)
3.) Make sure that the external ressource stays in the DOM by adding data-dom-cache="true" to the page's div-tag.
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
<title>Hello jqm</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script>
$(document).ready(function(){
$(document).on( "pagecontainerload", function( event, ui ) {
console.log('navigating to page1...');
$.mobile.pageContainer.pagecontainer("change", "#page1");
console.log('navigating done!');
} );
console.log('loading pagecontainers...');
$.mobile.pageContainer.pagecontainer("load", "page1.html");
$.mobile.pageContainer.pagecontainer("load", "page2.html");
console.log('pagecontainer-load done!');
});
</script>
</body>
</html>
page1.html
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
Go To Page 2
</div>
</div>
page2.html
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div role="main" class="ui-content">
Go Back To Page 1
</div>
</div>