Pizza pie and doughnut with html - javascript

I have downloaded a project of pizza pie and doughnut graphs with html and etc from Zurb website.
For some reason when i open the HTML from my PC the graphs cant show up, only the title and basic information.
Is there anything missing? Do I need to download more stuff for support?
Here is the link for Zurb website where I have downloaded the project
https://zurb.com/playground/pizza-pie-charts

This Pie Graph Support it on Jquery 2.0
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="dist/js/vendor/dependencies.js"></script>
<script src="dist/js/pizza.js"></script>
<script>
$(window).load(function() {
Pizza.init();
$(document).foundation();
});
</script>
Replace This Line on the bottom of Code In side Body Tag

Look at their explanations.
You have to write the following in the head tag to make it works:
The first link is the CSS (cosmetics)
Then you have to download jquery (seems that library depend on jquery)
After that you have links for pizza.js
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/vendor/snap.svg.js"></script>
<script src="js/jquery.pizza.js"></script>
To test if it works, simply insert their code:
<ul data-pie-id="my-cool-chart">
<li data-value="36">Pepperoni</li>
<li data-value="14">Sausage</li>
<li data-value="8">Cheese</li>
<li data-value="11">Mushrooms</li>
<li data-value="7">Chicken</li>
<li data-value="24">Other</li>
</ul>
<script>Pizza.init();</script>
Replace it by the pie you ant to create

Related

Events not displayed using jquery.timeline.min.js

I have set up a html page to display a timeline using jquery.timeline.min.js library.
I get the timeline displayed but no events are added to it.
Its the basic example given at the help page on the github of this library at https://ka2.org/getting-started/
What am i missing, my code is the following
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='dist/jquery.timeline.min.css'>
<script type='text/javascript' src='script/jquery-3.3.1.min.js'></script>
<script src='dist/jquery.timeline.min.js'></script>
</head>
<body>
<!-- Timeline Block -->
<div id="myTimeline">
<ul class="timeline-events">
<li data-timeline-node="{ start:'2019-02-26 10:00',end:'2019-02-26 13:00',content:'<p>Event Body...</p>' }">Event Label</li>
<li data-timeline-node="{ start:'2019-03-01 23:10',end:'2019-03-02 1:30' }">
<span class="event-label">Event Label</span>
<span class="event-content"><p>Event Body...</p></span>
</li>
</ul>
</div>
<!-- Timeline Event Detail View Area (optional) -->
<div class="timeline-event-view"></div>
<script>
$("#myTimeline").Timeline();
</script>
</body>
</html>
You need to make two changes.
initialize timeline inside jquery on-ready event.
set startDatetime of your timeline while initializing.
please see below
<script>
$(function () {
$("#myTimeline").Timeline({
startDatetime: "2019-02-25 00:00"
})
})
</script>
hope it helps.
thanks

How can I make list item with uniform length?

I am creating an unordered list for horizontal tab component. I want each list item filling in one of three boxes with uniform length and height shown on the image. Here is my jsFiddle and javascript. What should I change on CSS to make this happen?
$(function(){
$('#tabs').tabs({
event: "mouseover"
});
});
Here is the jsfiddle.
HTML & CSS: How to create four equal size tabs that fill 100% width?
I tried table display yesterday but did not work yesterday. Yet, it seems to work today so I post it in case someone shares the same problem with me
Nice solution.
One of advices and solutions is also to take look on bootstrap components, and just include the classes correctly:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-pills nav-justified">
<li role="" class="active">Home</li>
<li role="">Profile</li>
<li role="">Messages</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I think this can also be helpful, you can save a lot of time with design :)

Responsive drop down menu not rendering

I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:
http://jsfiddle.net/Lwdc4/
My JavaScript code is in an external file. This is what the file looks like:
$("#nav").addClass("js").before('<div id="menu">☰ </div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768){
$("#nav").removeAttr("style");
}
});
And my import to HTML:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="nav-menu.css"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nav-menu.js"></script>
</head>
What is wrong with my code? Any help is appreciated. Thanks in advance.
You need to add the jquery library to use the $ object
Add this line in your HTML to use it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Or choose your version directly on the jQuery website http://jquery.com/download/
Updated fiddle :
http://jsfiddle.net/Lwdc4/1/

Bootstrap - CSS file not loading

I'm having some issues regarging Bootstrap, I'm following a basic tutorial and all works however the CSS file is not loading properly. I've searched around on StackOverflow however none of it worked. My HTML file is in the exact same folder as the css folder is. This is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”></meta>
<title>This is a title, oh-ehm-GHEE</title>
<link rel=”stylesheet” href=”css/bootstrap.css” type=”text/css”/>
</head>
<body>
<div class="”container”">
<h1>Bootstrap Site</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
It looks like fancy quotes snuck into your code, as seen on these two lines:
<div class="”container”">
<h1>Bootstrap Site</h1>
Note the difference between the inner and outer quotes. The same quotes are in your meta tag, the link for the stylesheet, and your final script tag.
Replace the fancy quotes with standard quotes, and as long as your directory structure is right, it should work.
If your html is the same folder as you css? Then there is no css folder or your html is within the css folder am I right?
Try something like this
<link rel=”stylesheet” href=”bootstrap.css” type=”text/css”/>
Did you download the zip file from http://getbootstrap.com/? Typically the CSS, ICO and JS files are in "assets". So you need to upload those files and reference those files in your HTML. Make sure you have the files uploaded and are referencing correctly.
Also be sure you are referencing the CDN version of jQuery like so:
<script src="//code.jquery.com/jquery.js"></script>
Using the //code.jquery.... will ensure that your JS will always be up to date and if you ever use "https" on your website your JS files will be secured as well.
Hope that helps.

pycco (markdown doc generator), how-to embed an js (knowl) anchor?

I am working with pycco, and would like to embed a knowl, as part of the doc-html.
I am able to render doc-html directly if they are simply input as markdown comments.
ie #<div>hi<div> will correctly display in the doc-html.
I insert the javascript through the comments:
"""
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<link href="http://aimath.org/knowlstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://aimath.org/knowl.js"></script>
"""
However, when I insert a knowl anchor, <a knowl="/knowl/k1.html">knwl1</a>, the element opens/closes in the correct area; but, the contents of the linked html are not visible.
If I try styling the anchor (in some pycco-like manner) then the element spans the entire page and won't open or close in the right area. The html content doesn't display either.
<td class=docs>
<div class="octowrap">
<a class="octothorpe" href="#section-7">#</a>
</div>
<a knowl="/knowl/k1.html">knowli.</a>
</td>

Categories