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.
Related
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!
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
In my Ruby on Rails templates I write underscore templates within <script type='text/html'> elements.
I'm using rails.vim and other plugins, but syntax highlighting and identation rules don't work for the htmls inside these elements.
Put it in a partial. That also keeps the page with all the html scripts from growing into a monster.
<script type="text/x-underscore">
<%= render 'my_partial_with_syntax_highlighting' %>
</script>
Ditto for using something other than text/html for content type.
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).
My javascript paths work on this page:
http://localhost:53049/
But not on this page:
http://localhost:53049/Home/Messages
The reason is that the relative paths are different, the former requires ("js/...") and the latter requires ("../../js/...").
I'm including my javascript in my Site.Master file:
<script type="text/javascript" src="js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="~/js/jquery.jqGrid.js"></script>
<script type="text/javascript" src="<%= this.ResolveClientUrl("~/Scripts/jquery-1.2.6.js") %>"></script>
How do I get around this relative path madness, i.e. what is the best practice way in ASP.NET MVC to set CSS/Javascript paths in the Site.Master so that they work for each view no matter how deep that view's URL happens to be.
ADDENDUM:
It seems that for the Index view, any path will work, strangely:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../../../Scripts/jquery-1.2.6.js"></script>
But for any other pages (pages with a deeper URL), none of these work.
What's going on here? How can we set the Javascript path once in Site.Master and they work for all pages?
ADDENUM II:
It turned out to only be a problem with the jqgrid javascript file (not the jquery file), apparently inside that file it is referencing other javascript files and gets confused:
<script type="text/javascript" src="<%= Url.Content ("~/js/jquery.jqGrid.js") %>"></script>
You can also use the Url.Content method call to make sure that the paths are correctly set.
Examples can be found here.
Regarding paths used in CSS documents:
/Content/site.css
Body {background-image:url('background.jpg');}
Relative paths in CSS documents are related to the CSS document, not the document being displayed.
This information saved me some headaches.
Try setting the javascript to use a forward slash at the beginning, like "/js/jquery.jqGrid.js" This will set them to use the root domain instead of relative pathing.
The solution for jqGrid: open the file jquery.jqGrid.js and locate the line:
var pathtojsfiles = "js/"; // need to be ajusted
As the comment says, you need to edit that path, e.g. for a typical ASP.NET MVC app,
var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
You need to add runat="server" and to specify the absolute path like this:
<script type="text/javascript" runat="server" src="~/js/jquery.jqGrid.js"></script>]