I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
// The click action
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name)
.parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
});
</script>
<style>
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
</style>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
OK, let´s start.
First of all, it seems that your links are outdated or broken.
https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js
is not working.
The files must be reachable.
Next point s that you are using javascript inside of style tags.
That won't work.
After your links are fixed, try it like this:
$(document).ready(function() {
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/
$('#map').usmap({
stateStyles: {fill: 'blue'},
'click': function(event, data) {
$('#clicked-state').text('You clicked:'+data.name );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>
Related
I try to run some examples from Jquery site and some videos i' ve seen, but it seems like i can't execute them properly. Here's my code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$("#btnclick").click(function() {
$("#divpopup").dialog({
title: "blabla",
width: 430,
height: 200,
modal: true,
buttons: {
Close:
function() {
$(this).dialog('close');
}
}
});
});
})
</script>
</head>
<body>
<div id="divpopup" style="display:none">
blablablabla
</div>
<button type="button" id="btnclick">Click me</button>
</body>
</html>
I can't find what's wrong, the only thing it may be is that i haven't input an important library or something. Every one of my explorers shows me the button, but clicking it doesn't trigger the modal window. Any ideas?
Thank you
Jquery library references should be in below order.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Can anyone suggest me a solution please? I've been trying half an hour to get jQuery ready and working for my Visual Studio but it does not work. I can't really be specific because i also don't know why.
<script>
$(document).ready(function () {
$("button").click(function () {
$("#square").animate({ left: '500px' }, slow);
});
});
</script>
<style>
#square{
border: solid; border-color: aqua; border-width: 1px; background-color: skyblue; width: 125px; height: 125px; text-align:center;
}
</style>
<body>
<div id="square">Focus on me!</div>
<div> <button>Click me</button> </div>
You have to add jquery to your page. You can add jQuery in two ways :
Download the jQuery library from jQuery.com
Include jQuery from a CDN, like Google
The jQuery library is a single JavaScript file, and you reference it with the HTML tag :
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
And for CDN :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
then write your code :
$(document).ready(function(){
alert("Hello there!")
});
Add this piece of code above the closing body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Now you have successfully added jQuery!
The JSTween library doesn't seem to perform a simple animation pulled from the library's tutorial. Using the following code, the alert box will show up after the allotted 1 second duration, but no animation will take place.
I must have set up the library wrong somehow, but I can't see the problem.
<html>
<head>
<style type="text/css">
#box
{
width: 16px;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="jstween-1.1.js" ></script>
<script type="text/javascript" src="jstween-1.1.min.js" ></script>
<script type="text/javascript">
function animate()
{
$('#box').tween({
width:{
start: 16,
stop: 200,
time: 0,
units: 'px',
duration: 1,
effect:'easeInOut',
onStop: function(){ alert( 'Done!' ); }
}
}).play();
}
</script>
</head>
<body>
<div id="box">
<img src="image.png" onClick="animate()" />
</div>
</body>
</html>
Additional info: using Safari on 10.7.5. Code does not work in Chrome or Firefox either.
For anyone who may read this in the future, I discovered the problem: the CSS element #box needs position: relative; as an attribute, otherwise the browser will hold the element in place by default.
is there some code I can add to setup which will achieve this or is it a case of configuring files or making a new skin.
<head>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='my-video'></div>
<script type='text/javascript'>
wplayer('my-video').setup
({
file: 'clash.mp4',
width: '480',
height: '270',
});
</script>
This is a bug that we are going to fix.
This probably sounds really stupid but I have noo idea how to implement jquery's rounded corners (http://www.methvin.com/jquery/jq-corner-demo.html). My javascript-fu is complete fail and I can't seem to get it to work on my page. Can anyone show me a simple example of the HTML and JavaScript you would use to get them to show? Apologies for my idiocy.
This thing does not work in Safari & Google Chrome.
You need to include jquery.js in your page. Don't forget to have a separate closing tag.
<script type="text/javascript" src="jquery.js"></script>
You need to include the jQuery Corner Plugin JavaScript file (jquery.corner.js) in your page as well.
<script type="text/javascript" src="jquery.corner.js"></script>
Somewhere in your page you should have the <div> you want to have corners:
<div id="divToHaveCorners" style="width: 200px; height: 100px; background-color: #701080;">Hello World!</div>
Somewhere else in your page, preferably not before the div itself, issue the following JavaScript command. This will execute the inner function when the page is loaded and is ready to be manipulated.
<script type="text/javascript">$(function() { $('#divToHaveCorners').corner(); } );</script>
You're done! If not, let me know.
jquery corners by Methvin http://www.methvin.com/jquery/jq-corner-demo.html are ok and working fine, but... there is more beautiful alternative:
http://blue-anvil.com/jquerycurvycorners/test.html
you can use that lib to do rounded images even.
And what is very important:
- 18th July 2008 - Now works in IE6,7, safari, and all other modern browsers. Fixed centering bug.
So, please download jQuery Curvy Corners 2.0.2 Beta 3 from:
http://code.google.com/p/jquerycurvycorners/downloads/list
and again you have to load jquery core lib first so example of your HEAD can be:
<head>
<script src="http://path.to.your.downloaded.jquery.library/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://path.to.your.downloaded.jquery.library/jquery.curvycorners.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.myClassName').corner({
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 }
});
}
</script>
</head>
where:
tl,tr,bl,br are top-left, top-right corners etc...
next, your BODY area:
and ?
and that's it :)
link to image about:
http://img44.imageshack.us/img44/3638/corners.jpg
... and ready to use code:
<html>
<head>
<script src="http://blue-anvil.com/jquerycurvycorners/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://blue-anvil.com/jquerycurvycorners/jquery.curvycorners.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.myClassName').corner({
tl: { radius: 12 },
tr: { radius: 12 },
bl: { radius: 12 },
br: { radius: 12 }
});
});
</script>
<style>
.myClassName
{
width:320px;
height:64px;
background-color:red;
text-align:center;
margin:auto;
margin-top:30px;
}
</style>
</head>
<body>
<div class="myClassName">content</div>
</body>
</html>
just copy, paste, enjoy :)
1) Ensure jquery is loaded
2) Ensure corners lib is loaded
3) In the ready callback, use a selector to grab the div you want to effect and call the corners method
$(document).ready(function() {
$("#idofdiv").corners();
});