i want to join multiple countries more than 2 in a single highmaps javascript version.I have tried a lot bur if they overlap each other.
Is it is possible or not. If yes please guide me.
I think that the easiest way to render multiple countries in Highcharts is by rendering them in separate containers and style them as you want - visual output will be the same.
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/gb/gb-all.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container1"></div>
<div id="container2"></div>
Demo: https://jsfiddle.net/BlackLabel/phrke17w/1/
If you have any additional questions - feel free to ask!
Related
I am a newbie to MVC application development. I'm trying to add functionality to a EF table using datatables. I created my table and can access it fine (without any functionality). I followed the instructions found at: https://datatables.net/examples/basic_init/. In summary here's what I did:
I added the following lines to the <head> section of _Layout.cshtml
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"></script>
Then I assigned an ID to the table on the Index view generated by the MVC controller:
<table id="tblServer"class="table">
Finally I added the following block of code at the end of the tag on _Layout.cshtml
<script>
$('#tblServer').dataTable();
</script>
I disabled all other references to JQuery so they're not loaded multiple times. I commented out the following sections:
#* #Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")*#
#* #Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)*#
I'm able to see the table, but no styling is available. No filtering, search functions are available either. Please help.
See screenshot here -
You need to include the JQuery library which you have commented out. Also the JQuery library should load before the JQuery.Datatable.js file. Jquery is the dependency for the jquery.datatable.js file.
So you may want to do something like in exact order:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<script type="text/css" src="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"></script>
I would like to know if, or how to, combine Rikulo UXL templates -- That is, provided it is possible.
Just to keep things simple I took the ScrollViewDemo and LoginDemo from the UXL Overview web page as an experiment. My aim would is to see something like this (which you cannot do, of course) in Dart.
index.dart
<body>
<style> ... </style>
<script src="ScrollViewDemo.dart" type="application/dart" ></script>
<script src="SignInDemo.dart" type="application/dart" ></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
In Dart you are only permitted one dart script per document.
So what I'm looking for is a way to do as shown above with Rikulo mark-up.
Can we do that?
There are a few options for adding a tree of views into the document. Please refer to addToDocument for details.
For example, you can have two different DIV in the HTML pages:
<body>
<div id="scrollView" class="scrollView"></div>
<div id="signinView" class="signinView"></div>
Then, you can invoke addToDocument with the target element you prefer:
scrollView.addToDocument(node: document.query("#scrollView"));
Then, the other program can add the sign-in view to #signinView.
You can have multiple dart programs running at the same page as long as they cooperate, such as residing separated DIV blocks as illustrated. The only catch is that each dart program will be compiled a separated JS file and the resulted size will be larger than putting them all in the same program.
Problem: datepicker is not showing up at all. No errors in the console. All files are included and accessible via Firebug.
After spending way too much time trying to get the jQuery UI datepicker to work, and that includes reading through dozens of Google results, I need your help. Not even the simplest, plain, straightforward implementation of the datepicker is working for me.
Current example I'm testing (stripped down to nothing but the datepicker):
<html>
<head>
<meta charset="UTF-8">
<title>DatePicker Test</title>
<!-- JavaScript -->
<script type="text/javascript" src="../js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.19.custom.min.js"></script>
<!--script type="text/javascript" src="../js/jquery/jquery.ui.datepicker.js"></script-->
<!-- Stylesheets -->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.19.custom.css" />
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div><input type="text" id="datepicker" class="hasDatepicker" /></div>
</body>
</html>
This does NOT work. I've downloaded the entire jQuery UI code (jquery-ui-1.8.19.custom.min.js) and tried everything. I've even tried to add a simple datepicker field to the demo HTML page that comes with jQuery UI. Nothing.
Then I downloaded the developer bundle of jQuery UI, and tried just the datepicker.js with jQuery, but even that failed.
So although I get no errors, and I can see my selector in the code and through calling it up from the console, I just get plain old nothing.
Then I've tried numerous CSS modifications that have been posted in several forum posts, moved my JavaScript from the top to the bottom, after the datepicker . . . and all kinds of mutations, but nothing has worked.
Is it me?
Certainly, it's possible for others to use the datepicker plug-in, what am I doing wrong?
Hey so I looked into your issue. I suggest removing the class declaration in the input that helped me. Also make sure your script links are correct. You are currently asking them to pull from a folder that comes before your current page. If the page and css/js folders are in the same directory you can remove the "../" at the front.
<input type="text" id="datepicker" />
A helpful add-on in FireFox are the Web Developer tools
Check out this js fiddle here for a working example. It's pretty similar to what you are doing minus the class on the input field, aswell as in this case the example is using CDN's.
You must have something wrong (maybe a script or css isn't getting sourced).
I tried gmaps4rails on jQueryMobile Framework.
One page is only link to gmaps page.
Two page is gmaps4rails page.
jQueryMobile ajax page enabled.
From one page to two page don't display gmaps.
But Two page direct access is success display gmaps.
This is my repository.
https://github.com/y-hirasawa/sample-jqm-map
I want to use ajax pages, and display gmaps.
Help me.
You need to include the googlemaps javascript files in your layout:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
the map is created thanks to a window.onload callback. Since the page is already loaded, it fails. So you have to add a jquery mobile callback in your application.js:
$('#gmaps').live('pageshow',function(event){
Gmaps.loadMaps();
});
If you want this to work, you have to set an id to the page containing the google map:
<div class="page" data-role="page" id="gmaps">
Last, you must prevent double loading of scripts, so change your call to the gmaps4rails helper:
<%= gmaps4rails(#json, false, false) %>
I don't know how to use CKEditor in Mvc2 Framework.
I tried but it will not work
<%= Html.TextAreaFor(model => model.ABSTRACT) %>
<script type="text/javascript">
$(document).ready(function() {
$("$ABSTRACT").ckeditor();
});
</script>
Change the $ with # and it should definitely works
$("#ABSTRACT").ckeditor();
also be sure to have this 2 scripts referenced in your page.
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/ckeditor.js")"></script>
<script type="text/javascript" src="#Content.Url("~/yourpath/ckeditor/adapters/jquery.js")"></script>
You can also consider to associate ckEditor to a class instead of the Id of controls. so with only one call you can set the editor for all the control that have that class in your apps.
Is there any way you could just use the asp.net usercontrol for ckeditor?
http://ckeditor.com/download 3rd one down.
I have not tried it in mvc but I do not see why it would not work in MVC.