Quite simply:
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde"></canvas>
</script>
Is the canvas tag not properly escaped or something? I've tried the following as well, to no avail:
<canvas data-processing-sources="processing.pde"><{{!}}/canvas>
How can I include the canvas with a source in my handlebars.js template and get it to render?
Update:
All of the scripts in my header:
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Typicons -->
<link rel='stylesheet' href='typicons.font-master/src/font/typicons.min.css' />
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<!-- Materialize JS -->
<script src="js/materialize.min.js"></script>
<!-- Drop Down -->
<script>
$( document ).ready(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on click
alignment: 'left', // Aligns dropdown to left or right edge (works with constrain_width)
gutter: 0, // Spacing from edge
belowOrigin: false // Displays dropdown below the button
});
});
</script>
<script>
var data = {
width: 200,
height: 100,
background: "#000"
};
var template = Handlebars.compile($("#write-tpl").html());
document.body.innerHTML = template(data);
</script>
<!-- Style -->
<link href="css/materialize.css" rel="stylesheet"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
And my template:
<script id="write-tpl" type="text/x-handlebars-template">
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="js/processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
<{{!}}/script>
</script>
And scripts at the bottom of the page prior to :
<!-- Javascript -->
<script src="https://www.parsecdn.com/js/parse-1.2.19.min.js"></script>
<script src="js/blog.js"></script>
<!-- Popup -->
<script src="view.min.js?auto"></script>
<!-- Processing -->
<script src="js/processing.js"></script>
Remove your inner script in your template:
<script id="write-tpl" type="text/x-handlebars-template">
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
<{{!}}/script>
</script>
Like this:
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
</script>
Here's a working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.min-latest.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.16/processing.min.js"></script>
</head>
<body>
<script id="write-tpl" type="text/x-handlebars-template">
<canvas data-processing-sources="processing.pde" width="{{width}}" height="{{height}}" style="background:{{background}};"></canvas>
</script>
<div id="content"></div>
<script>
$(document).ready(function(){
var data = {
width: 200,
height: 100,
background: "#000"
};
var template = Handlebars.compile($("#write-tpl").html());
$("#content").html(template(data));
});
</script>
</body>
Output:
Related
I want to create a chart using Highcharts. I know nothing about JS :) I code in Java
I have a map in controller class:
Map<Integer, Integer> surveyMap = new LinkedHashMap<>();
surveyMap.put(10, 21);
surveyMap.put(12, 23);
surveyMap.put(14, 25);
surveyMap.put(16, 17);
Ant it is my html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="ISO-8859-1" />
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
</head>
<body>
<div class="container">
<h2 align="center">Technology Line Graph</h2>
<div id="container"
style="width: 550px; height: 400px; margin: 0 auto"></div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script th:inline="javascript">
$(function(){
Highcharts.chart('container', {
xAxis: {
title: {
text: 'Dive time'
}
},
yAxis: {
title: {
text: 'Dive Depth'
}
},
series: [{
data: [${surveyMap.values()},${surveyMap.values()}]
}]
});
});
</script>
</body>
</html>
Of course it doesn't work. How to set data from a map for x and y axis??
Maybe it is just a syntax error.
Are there any better solutions?
I have tried to add the fullCalendar jquery to a view in my MVC 4 project. When I try to laod the page there are no errors but the calendar does not appear on the page. I am not sure why it isn't appearing and I have looked at the documentation and it looks like I got everything covered.
Here is my HTML:
#{
ViewBag.Title = "Calendar";
}
<h2>Calendar</h2>
<html>
<head>
<title>Calendar</title>
<link href="#Url.Content("~/Content/fullcalendar.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/fullcalendar.print.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("/Scripts/moment.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/jquery-ui.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("/Scripts/fullcalendar.min.js")"></script>
<script type="text/javascript">
$("#calendar").fullCalendar({
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
HERE IS MY CSS:
#calendar {
width: 900px;
margin: 40px auto;
}
Add refs to the libs you want to use;
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script type='text/javascript'>
I'm trying to recreate the JQuery Google maps demo page and the page is rendering the box for the map, but the map itself isn't showing up.
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#basic_map').live('pageinit', function() {
demo.add('basic_map', function() {
$('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
var self = this;
self.addMarker({'position': this.get('map').getCenter() }).click(function() {
self.openInfoWindow({ 'content': 'Hello World!' }, this);
});
}});
}).load('basic_map');
});
$('#basic_map').live('pageshow', function() {
demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});
And this is the div further down the index.html page
<div id="basic_map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">maps page</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
and if it helps, here is the head of my index.html
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FTF</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false">
Thanks.
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FTF</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<scripttype="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false">
you have not included three more files which are the following:
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.
I have almost finished a website, but I'm struggling with combining two different javascript files... If I exclude A, B works. If I exclude B, A works. So there seems no go-between.
I'm trying to combine a JQuery-form validation and a JCarousel. As you can see, I have to exclude the validation script in orde to get the Carousel working...
Isn't there a way to combine both these script? I already tried the $j-trick from JQuery documentation, but with no luck.
I have included the files in this order:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery-1.6.min.sliding.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<!-- THIS MUST BE COMMENTED OTHERWISE THE CONTACT SLIDER DOENS'T WORK!!
MUST FIX!!!
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
-->
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
I can see the problem but not what is causing it. I imagine you're outputting some javascript via PHP but it is coming out above the <html> tag.
If you goto view-source:http://www.YOURDOMAIN.be/new/index.php?page=&action=shout
The html looks like this:
<script>
$(document).ready(function(){noty({"text":"Uw shout is succesvol toegevoegd.",
"layout":"top","type":"success","animateOpen":{"height":"toggle"},
"animateClose":{"height":"toggle"},"speed":500,"timeout":5000,
"closeButton":true,"closeOnSelfClick":true,"closeOnSelfOver":false,"modal":false});});</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=ISO 8859-1" />
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- css links -->
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<link rel="stylesheet" type="text/css" href="styles/skin.css" />
<link rel="stylesheet" type="text/css" href="includes/js/form/css/validationEngine.jquery.css" />
<link rel="stylesheet" type="text/css" href="includes/lightbox/lightbox.css" />
<link rel="stylesheet" type="text/css" href="includes/notify/css/jquery.noty.css"/>
<link rel="stylesheet" type="text/css" href="includes/notify/css/noty_theme_default.css"/>
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/demos/demos.css">
<link rel="stylesheet" type="text/css" href="includes/js/jquery-ui/development-bundle/jquery-ui-timepicker.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="includes/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="includes/js/hover.js"></script>
<script type="text/javascript" src="includes/js/jquery.jcarousel.js"></script>
<!-- js links -->
<script type="text/javascript" src="includes/js/coda.js"></script>
<script type="text/javascript" src="includes/js/placeholder.js"></script>
<script language="javascript" src="includes/js/popup/modal.popup.js"></script>
<script type="text/javascript" src="includes/notify/js/jquery.noty.js"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine-nl.js" charset="utf-8"></script>
<script type="text/javascript" src="includes/js/form/jquery.validationEngine.js" charset="utf-8"></script>
<script src="includes/lightbox/lightbox.js"></script>
<!-- JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="includes/js/jquery-ui/development-bundle/ui/jquery.ui.timepicker.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});
// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
</script>
<script>
$(function(){
$('.leader_picture').contenthover({
overlay_background:'#000',
overlay_opacity:0.8
});
});
</script>
<script language="javascript">
$(document).ready(function() {
//Change these values to style your modal popup
var align = 'center'; //Valid values; left, right, center
var top = 100; //Use an integer (in pixels)
var width = 500; //Use an integer (in pixels)
var padding = 10; //Use an integer (in pixels)
var backgroundColor = '#FFFFFF'; //Use any hex code
var source = 'includes/php/popup.php'; //Refer to any page on your server, external pages are not valid
var borderColor = '#333333'; //Use any hex code
var borderWeight = 4; //Use an integer (in pixels)
var borderRadius = 5; //Use an integer (in pixels)
var fadeOutTime = 300; //Use any integer, 0 = no fade
var disableColor = '#666666'; //Use any hex code
var disableOpacity = 40; //Valid range 0-100
var loadingImage = 'lib/release-0.0.1/loading.gif'; //Use relative path from this page
//This method initialises the modal popup
$(".modal").click(function() {
modalPopup(align, top, width, padding, disableColor, disableOpacity, backgroundColor, borderColor, borderWeight, borderRadius, fadeOutTime, source, loadingImage);
});
//This method hides the popup when the escape key is pressed
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup(fadeOutTime);
}
});
});
</script>
</head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
is wrong
use this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
see the difference it is src.