I've been trying to use this really cool JVector Interactive map plugin with my Rails 3 app but I must be doing something wrong because the map is not rendering. I haven't used JQuery much with Rails so am kind of new at this. I created a controller called Maps and a view called Intro.html.erb, which included my html from this tutorial: http://developer.practicalecommerce.com/articles/2988-Create-an-Interactive-Map-with-jVectorMap
I also split up my .js functions by putting them in application.js. Since that didn't work I found some other code that I tried to put in my Intro.html.erb file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="public/javascripts/jquery.vector-map.css" type="text/css" media="screen" />
<script src="public/javascripts/jquery.min.js"></script>
<script src="public/javascripts/jquery.vector-map.js"></script>
<script src="public/javascripts/world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
It's still not rendering. I'm trying to run this in my development environment and am pointing locally to the files. For example: public/javascripts/world-en.js"
Any help would be greatly appreciated.
You want to use "world map" but in your finction you are defining the"#map". Here is the correct code you may try:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="scripts/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
<script src="scripts/jquery-1.8.2.js"></script>
<script src="scripts/jquery-jvectormap-1.2.2.min.js"></script>
<script src="scripts/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function(){
$('#world-map').vectorMap();
});
</script>
</body>
</html>
Here is the folder with docs you need. Download and unzip the following folder to you htdocs on your local host
Same problem, fixed by specifing the imported map into the js initialization
$('#world-map').vectorMap(
{
map: 'world-en',
}
Related
trying beginner's Angular using tutorial here: https://www.youtube.com/watch?v=WuiHuZq_cg4. i think files are in proper places, permissions set, yet my index.html shows nothing on my browser, and Chrome dev tools show everything in place, no errors. code is here" https://gist.github.com/9ad771c60d33fc020216.git, but also here: [what am i missing??]
index.html:
<!doctype html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.0.0rc3/angular-1.0.0rc3.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"
</head>
<body>
<div ng-controllers="TodoCtrl">
{{totalTodos}}
</div>
</body>
</html>
todo.js:
function TodoCtrl($scope) {
$scope.totalTodos = 4;
}
Try
ng-controller="TodoCtrl"
instead of
ng-controllers="TodoCtrl"
S won't tag with controller
I am using the following code to show a BootstrapDialog and its not showing up
Please help
<!DOCTYPE HTML>
<html>
<head>
<title>dialog box example</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="button" value="button1" class="btn btn-info" onclick="showmes();">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
function showmes() {
BootstrapDialog.show(typeof(BootstrapDialog)); //.alert('I want banana!');
}
</script>
</body>
</html>
BootstrapDialog is not part of the bootstrap library, it is a part from an external javascript library built on top of bootstrap.
Therefore, you must include the bootstrap-dialog.js and the bootstrap-dialog.min.css (or respectively minimal versions). You can build the files yourself following the readme, or get them from the js and css subfolders of the dist folder.
I am trying to build my personal website using express and want to put a datepicker on one of the page.
I tried to change the ejs file of this page, however, nothing works.
I am wondering if it is because that the layout.ejs file exists, and wondering how can I just load jquery-ui in only of the ejs.file? Because I cannot find any related npm to install . Many thanks for answering！XD
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(function() {
$( "#datepick" ).datepicker();
});
</script>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
There is another similar question, but I think the answer does not works for me.
node.js - DatePicker jquery UI not workinng
When I just use Express and change the index.ejs like the following, it works , but when there are many pages, it seems that it cannot be loaded...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepick').datepicker();
});
</script>
</head>
<body>
<aside class="widget">
<p>Date: <input type="text" id="datepick"></p>
</aside>
</body>
</html>
node.js - DatePicker jquery UI not workinng
For whom run into the same problem, this is the reference.
I finally found the answer by checking the code.I was unable to load JQuery for in the layout.ejs, I retyped the following in order to load the bootstrap, but actually by using https://npmjs.org/package/twitter-bootstrap-node twitter-bootstrap-node, there is no-need to load the javascripts again. This may be a common problems for beginners in Node.JS like me.Hope this answer can be helpful to people who run into the same problem and the code is in the answer of the related problem.
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/vendor/twitter/less/bootstrap.less"></script>
Hi look at this jsfiddle link http://jsfiddle.net/w7PHj/
you need to use like this....
$('#datepick').datepicker();
Hope someone can help me out. I found this nice jQuery plugin to display vector maps in our intranet but I'm not able to create the HTML code to make it work.
http://jvectormap.owl-hollow.net/
I would appreciate your assistance or guidance.
Thank you,
Tony
Probably you forgot to set size of container inside of which you want to place the map. This should work:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.vector-map.css" type="text/css" media="screen" />
<script src="jquery-1.6.min.js"></script>
<script src="jquery.vector-map.js"></script>
<script src="world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
I will add width and height parameters in the next version
You must set your map. which name is on top of map.js. Probably you forgot
$('#map').vectorMap({map: 'europe_en'});
I am trying to use a tooltip jQuery plugin. This is what I have in <head> of index.html:
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="js/homepage.js" type="text/javascript"></script>
</head>
And this is in js/homepage.js:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
But for some reason, the tooltip doesn't show. But it does show if I include the tooltip function on the index page. Is there any way to get this working without having the tooltip function on the index page, but in an external file? Thanks.
I have never use the simplest plug in but i copy and pasted your header and your js code and everything seemed to work just fine.
I linked to the latest version of jquery and downloaded a fresh copy of simpletip.js and it worked with on the first try.
The only differences are/maybe:
- I don't know what your code looks like where you call 'supported_hosts' class in the html.
- The name of the simpletip.js file I didn't change it upon download, so I would check your file names and relative location.
Sorry there wasn't something more but what you have worked for me, here is the code I used in full incase this helps you:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="homepage.js" type="text/javascript"></script>
</head>
<body>
<span class="supported_hosts">Tool Tips here</span>
</body>
</html>
Javascript you gave:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
I downloaded the simpletip.js here:
http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=
I would just double check your relative paths and class naming. Your code looks good.
Moving
<script src="homepage.js" type="text/javascript"></script>
to the end of the body seemed to solve the problem:
<body>
[code...]
<script src="homepage.js" type="text/javascript"></script>
</body>