I have using Jvector Map as a default Jvector map its working hover function.Now i changed hover to click function.but now i want display country details from database.i have created php database? i don't know how to call my database php file?
code:
<!DOCTYPE html>
<html>
<head>
<title>Country Footprint</title>
<link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
<script src="assets/jquery-1.8.2.js"></script>
<-- jvectormap scripts here -->
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-single').click(function(){
$('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
});
$('#focus-multiple').click(function(){
$('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
});
$('#focus-coords').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
});
$('#focus-init').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
The answer is easy but you will need to do some more coding.
First of all you need to realize, that you JavaScript application can't connect to your database directly (and if it could, you'd have to store you database credentials in your JS app and reveal them to everyone out there).
JavaScript apps usually get the data using AJAX - you need to have a webserver configured that at a certain endpoint (eg. http://example.com/getdata.php) returning a JSON response. That can be then loaded in your JS app.
The getdata.php script is just a simple PHP script, that connects to the database and selects all required data and encodes them to JSON and writes to the output (don't forget to add Content-Type: application/json header).
Related
I have currently Using Jvcetor Map showing error in IE8 browser.document mode and browser Mode different showing errot. but both same its working Here attach MY code :
<!DOCTYPE html>
<html>
<head>
<title>Country Footprint</title>
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-single').click(function(){
$('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
});
$('#focus-multiple').click(function(){
$('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
});
$('#focus-coords').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
});
$('#focus-init').click(function(){
$('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
});
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
</script>
its showing web page error In IE8. how to run when document mode and browser different ? please help me
This is like the fifth time you're asking the exact same question?
I've answered it in the comments, and you keep asking the same thing, with the same code, here
https://stackoverflow.com/questions/30475659/jvector-map-not-working-correctly-ie-8#comment49031731_30475659
and here, different user, but exact same code
Jvector Map not working when browser Mode and document mode different in IE8
Try to listen this time, you have a trailing comma inside the object that defines the options for jVectorMap
$('#map1').vectorMap({
map: 'world_mill_en',
panOnDrag: true,
focusOn: {
x: 0.5,
y: 0.5,
scale: 1,
animate: true
},
series: {
regions: [{
scale: ['#688FA0'],
normalizeFunction: 'polynomial',
values: {
"TL": 0.62,
"TO": 0.3,
"GB": 2258.57,
"US": 14624.18,
"VU": 0.72, // IT'S HERE ----------------
}
}]
},
Note the trailing comma, the last property in an object shouldn't have a trailing comma as there are no more properties following it.
Most browsers don't care, but in old IE you'll get the exact same error you're getting, and you have to remove the last comma.
I have a jQuery vector map defined as follows:
<div id="worldMap" style="width:800px;height:550px"></div>
In the JS onReady function:
$('#worldMap').vectorMap({
map: 'world_en',
backgroundColor: '#a5bfdd',
color: '#f4f3f0',
hoverColor: '#0000ff',
hoverOpacity: null,
selectedColor: '#666666',
attribute: 'fill',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#ffffff', '#a00000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element,code,region) {
displayInfo(code,region);
}
});
I set a timer to kick every five minutes to update the map data. The function it calls is:
function updateMap() {
$.getJSON('docs/testdata.json',function(data) {
var map=$("#worldMap").vectorMap('get','mapObject');
map.series.region[0].setValues(data);
});
}
The map displays correctly in the browser with all data points. The problem arises when updateMap() is called. It cannot get the mapObject (it is always undefined). Thinking it was some kind of timing issue, I moved the var map=$(... line to immediately after the definition in the onready initialization of the map and MAP is still undefined.
Also, try:
var obj = $('#world-map .jvectormap-container').data('mapObject');
Then:
obj.series.region[0].setValues(data);
I have the same problem
I solve it with that :
map = new jvm.Map({
container: jQuery('#world-map'),
map: "map",
regionsSelectable: true,
regionsSelectableOne: true,
backgroundColor: 'transparent',
zoomMax: 1,
zoomMin: 1,
zoomOnScroll: false
});
map.clearSelectedRegions();
I would like to go to a URL when I click on a certain country, the code I am using at the moment is the sample code.
I am building a website that has the map on the index page and when you click on say 'Brazil', you go to the Brazil wiki page.
You can use the callback function onRegionClick to determine when an area has been clicked, and then proceed to do what you want.
Using the default sample from JQVMap you would initialize your map with the onRegionCallback and check if the returned country code corresponds to the one you're looking for.
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onRegionClick: function (event, code, region) {
switch (code) {
case "br":
window.location.replace("http://en.wikipedia.org/wiki/Brazil");
break;
}
}
});
});
First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});
To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best
Looking for a simple example of how beautytips can be used( HTML + CSS included)?
My requirement is this - I am displaying product names.On hovering of product name,I want to display products image in the tooltip.How can I do this?
thanks
Here is a website with some samples:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html
Assuming that is that you are referring to this jquery plugin.
Here it is. You just have to make sure the js files are getting loaded. Note that i'm using hoverintent lib here to give a delay before anything pops up.
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jquery.bt.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.r6.js">
<div id="mydiv">Mouse over here to see it poppin'</div>
<script>
$("mydiv").bt("Text to pop out",{
showTip: function(box){
$(box).fadeIn(300);
},
hideTip: function(box, callback){
$(box).animate({opacity: 0}, 100, callback);
},
hoverIntentOpts: {
interval: 1000,
timeout: 200
},
fill: '#E1EEF8',
cornerRadius: 10,
strokeWidth: 0,
shadow: true,
shadowOffsetX: 3,
shadowOffsetY: 3,
shadowBlur: 8,
shadowColor: 'rgba(0,0,0,.9)',
shadowOverlap: false,
noShadowOpts: {strokeStyle: '#999', strokeWidth: 2},
positions: ['top', 'bottom','right']
});
</script>