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'});
Related
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#playerOne{position:absolute;top:500px;left: 500px;border:3px solid green; height: 500px;width:500px; background-color:black}
</style>
</head>
<body>
<div id="main">
<div id="playerOne"></div>
</div>
<script>
var playerOneDiv = document.querySelector("#playerOne");
console.log(playerOneDiv.style.top);
</script>
</body>
</html>
I am not getting anything in my console when I try it like this
I am trying to mimic w3schools example but am having no luck with it, thank you.
http://w3schools-fa.ir/jsref/prop_style_top.html
the issue is window imposing style from style sheet after display rendered. If you grab the window property you would be able to get imposed style properties. Please try by updating your script using following code:
<script>
var playerOneDiv = window.getComputedStyle(document.querySelector("#playerOne")).top;
console.log(playerOneDiv);
</script>
I hope this will help you. Thank you.
this is another extremely simple question. Is it just me, or does AOS.js only work with div's?
Because in the following link, I am trying it on an h1, and it doesn't work. I try it on a div, and it works. This is part of a larger question, and that project involves divs. It does not work there either. I can delete the attributes from the page in inspect, and it shows up like it is supposed to when it reaches the scroll point.
Then I hit control z + y and then I see the animation work, just not on the scroll. Please help. Thanks for your time. Here is the link to the mini project
[Edit] this one is solved, please help with the other one if you can thanks!
https://repl.it/#astroboyr/AOSJS-testing
If you find it out, here is the bigger project if you want to help,
https://repl.it/#astroboyr/PianoLife
The code you have doesn't have enough space on the bottom so that reason you are not able to see the animation. if you add more
<br> on the bottom you will see its working.
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div data-aos="fade-up"></div>
<!-- works with div -->
<h1 data-aos="fade-right">Some H1</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- doesnt with h1 WHYYYYYYY -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>
Sorry if I am asking a silly question. I just now starting with TinyMCE. I googled it and found examples where they all say to include in tinymce.js. I did that but I am getting a wired screen (as shown below. can anyone please help me, what I am missing
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.2.4.js"></script>
<script src="tinymce.js"></script>
<script src="theme.js"></script>
<!-- Just be careful that you give correct path to your tinymce.min.js file, above is the default example -->
<script>
tinymce.init({selector:'textarea'});
</script>
</head>
<body>
<textarea>Your content here</textarea>
</body>
</html>
This structure is working for me with TiniMCE 4.5.1:
Head:
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/skin.min.css" />
<link rel="stylesheet" href="lib/tinymce/skins/lightgray/content.min.css" />
<script type="application/javascript" src="lib/jquery/jquery-min.js"></script>
<script type="application/javascript" src="lib/tinymce/tinymce.min.js"></script>
Directories:
\lib
\jquery
jquery-min.js
\tinymce
tinymce.min.js
\plugins
\advlist
\anchor
\...a lot of plugins
\skins
\lightgray
content.min.css
skin.min.css
\fonts
tinymce.ttf + woff
tinymce-small.ttf + woff
\themes
\modern
theme.min.js
Hope this help!
What I'm trying to do is make a stock .html file with the nav, footer, basically anything I'd use on multiple pages and want to change easily. This is a small 20ish page site I'm working on and I really don't want to rely on php or something.
I've looked at other responses on here and followed them precisely but they don't seem to help me at all, although it's probably something I'm overlooking.
<!doctype html>
<html>
<head>
<link href='files/stylesheet.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<!--Navigation-->
<div id='navigation'></div>
<script>$("#navigation").load("templete.html #nav");</script>
</body>
</html>
Thanks in advance! -Shy♥
Is it cust a typo templete.html (third line from below). Otherwis, take a look at the jQuery docs and the restrictions of the functions (http://api.jquery.com/load/).
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',
}