I am trying to create a Datetime picker for birthdays, as you can see here, the solution requires the use of many links and script sources.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<br>
<div class="form-group">
<div class='input-group date datepicker' name="datepicker" >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
I want to use mvc bundles, with links to those scripts and stylesheets. But the solution I found: How to setup bundles using CDN in ASP.NET MVC?
does not explain how to include many links in a bundle. Instead, uses one link per bundle:
bundles.Add(new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js")
.Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new StyleBundle("~/bundles/bootstrap", "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")
.Include("~/Content/bootstrap.css"));
As you can see, I would have to 6 different bundles.Add. I want to be able to do something like this:
bundles.Add(....,"https://maxcdn","https link","another link")
How can I do it ? I want to include that bundle in my view like this:
#Scripts.Render("~/bundles/myCustomBundle")
This an example you can change parameters according to your need.
Example
The cdnHost parameter refers to alternate URL for the bundle when it is stored in a content delivery network. The cdn bundle is supposed to be loaded as one file and should contain a combined content of all files uploaded on cdn for example server path is https://ajax.googleapis.com/ in your case
then you can load multiple script file as one bundle you just need to provide relative path of other files in include method.
var cdnHost = "https://ajax.googleapis.com/";
bundles.Add(new ScriptBundle("~/bundles/angularCDN", cdnHost).Include(
"~/ajax/libs/angularjs/1.3.0-beta.17/angular.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-cookies.js",
"~/ajax/libs/angularjs/1.3.0-beta.17/angular-route.js"));
i hope it'll work for you.
Related
I'm new to Django but have been tasked with doing the front-end work for the project. I've been researching how exactly to load the css files and the methods I've found just aren't working. Here is the .html file layout:
{% load static %}
<html>
<head>
<title class="title"> NHSEE Homepage </title>
<!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> -->
<link rel="stylesheet" href="{% static 'css/homepage.css' %}">
</head>
<body>
<div class="container">
<h1> NHSEE </h1>
<a class="btn btn-1" href="/judges">Judges</a>
<br>
Students
<br>
<a class="btn btn-1" href={% url 'scoring-sheet' %}>Scoring Sheet</a>
<br>
Students
<br>
Projects
</div>
Here is the layout of the files (not sure if its where I'm putting the files that causing the issue)
Any help is greatly appreciated. Its very frustrating as I've done frontend work professionally before and can't get a stupid css file to show up.
EDIT: The settings.py file
So, first you need to have STATICFILES_DIRS in your settings.py:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'assets')]
Then go ahead and move all your assets (css, js, fonts, ...) to a directory called assets beside manage.py (not inside your apps)
as an example, let's say you have assets/css/home_page.css; you should use {% static 'css/home_page.css' %} in your templates to access that (omitting the assets directory).
That was the basic idea, you can name those directory as you need.
At the moment, I am using the NuGet package which allows me to define large bundles with many JS files,
bundles.Add(new ScriptBundle("~/Bundles/js/PartOfMyGiantAngularApp").Include(
// messages
"~/App/messages/service/messageCache.module.js",
"~/App/messages/service/messageCache.service.js",
"~/App/messages/message-list/message-list.module.js",
"~/App/messages/message-list/message-list.component.js",
"~/App/messages/message-detail/message-detail.module.js",
"~/App/messages/message-detail/message-detail.component.js",
"~/App/messages/message-edit/message-edit.module.js",
"~/App/messages/message-edit/message-edit.component.js",
"~/App/messages/message-create/message-create.module.js",
"~/App/messages/message-create/message-create.component.js",
"~/App/messages/message.module.js"
)
and the pull them all into my main html file:
#Scripts.Render("~/Bundles/js/PartOfMyGiantAngularApp.js")
Which will either produce one file in production:
<script src="/Bundles/js/PartOfMyGiantAngularApp.js"></script>
, or in dev it will render multiple script tags.
<script src="/App/messages/service/messageCache.module.js"></script>
<script src="/App/messages/service/messageCache.service.js"></script>
<script src="/App/messages/message-list/message-list.module.js"></script>
<script src="/App/messages/message-list/message-list.component.js"></script>
<script src="/App/messages/message-detail/message-detail.module.js"></script>
<script src="/App/messages/message-detail/message-detail.component.js"></script>
<script src="/App/messages/message-edit/message-edit.module.js"></script>
<script src="/App/messages/message-edit/message-edit.component.js"></script>
<script src="/App/messages/message-create/message-create.module.js"></script>
<script src="/App/messages/message-create/message-create.component.js"></script>
<script src="/App/messages/message.module.js"></script>
How do we get this automatic multiple files in dev mode when using the new build-time Bundler/Minifier without having to both specify each file in my bundle config AND in the main HTML page with an environment tag?
I want it to just work out the paths and give them to be just like the old one. It's hard to debug a single line of JS code when I have no idea which file it's from.
It's written very nicely here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?tabs=visual-studio%2Caspnetcore2x
Under: Environment-based bundling and minification
That we will have to do things like this:
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
This is a horrible solution when I have a lot of JS files!
I believe you want to disable bundling.
In your RegisterBundles method (BundleConfig class in the App_Start folder).
Add this, it will disable bundling
BundleTable.EnableOptimizations = false;
How can I prevent all Prestashop's stylesheets from being included? By all I mean any stylesheet that is automatically added by CMS to website's <head> section.
I need this to use a single external stylesheet instead (my own, not the one generated by CCC).
It would be perfect to use non-JS method, but I'm not sure if it is possible in admin panel.
You can just open header.tpl file from your theme folder and remove the following code:
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
I have one form, something like that:
<html>
<head>
<!-- Some css file included here -->
</head>
<body>
<!-- Form parameters like action, method omitted for simplicity-->
<form>
<p class="someTextClass">msg[code.text]</p>
<input class="someInputClass" type="text"/>
<button class="someButtonClass">msg[code.button]</button>
<p class="someHelpTextClass">msg[code3.help]</p>
</form
</body
</html>
But currently there are a lot of conditions statements like "(condition) ? messageOne : messageTwo" and "rendered" attributes. But I want to switch all text in tags and related css classes simultaneously (and not to lose i18n). I want to set a parameter in one place and switch all css and text according to it automatically. It there something similar in JSF? When I learned Spring there is something like themes in it, is there theme analog in JSF?
P.S. If something unclear in my explanation please write a comment and I"ll update the question.
Can you upgrade to JSF 2.2? The notion of resources and contracts is what you are looking for.
Alternatively, you can potentially fetch the appropriate theme style from a backing bean:
webapp/
resources/theme1/css/styles.css
resources/theme2/css/styles.css
<h:outputStyleSheet library="#{someBean.theme}" name="css/styles.css"/>
Since outputStyleSheet can take an EL for the name as well, you can look at pushing that code to the bean as well.
For the pageTemplate itself, you should probably look at fetching that information from a bean.
Hope that helps.
I've fruitlessly looked for examples of using Meteor with an Iframe. (Note that I have to use an iframe instead of a DIV because of the content that will ultimately go there). I've tried both:
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click to see what you typed" />
<br>
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
</template>
<template name="iframe-content">
<body>
<div contenteditable="true">
Edit me
</div>
</body>
</template>
This loads recursively, creating sub-Iframes continuously.
I've also tried
<iframe id="compose" src="content.html" height=600></iframe>
but Meteor munges the multiple HTML files together which also causes the iframe to fail.
The only thing that worked so far is SRCDOC instead of SRC, but that isn't well supported by multiple browsers like FF.
So, what's the trick to use an iframe within Meteor, preferably in the template rather than strictly through code?
You want the 'public' folder. Meteor leaves content in that folder alone, as described here: http://docs.meteor.com/#/full/structuringyourapp
Move 'content.html' into a folder named 'public' at the root of your project/app and reference it like so in the html:
<head>
<title>iframe</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
<iframe src="hello.html"></iframe>
</template>
To be clear for other readers, Meteor has no problem with iframes. The issue was with the location of the 'content.html' file the iframe referenced.
I don't understand your first code example:
<iframe id="compose" src={{> iframe-content}} height=600></iframe>
As far as I know, that's not how iframes work; you have to specify a url in the src attribute, you can't just put the actual HTML there. So that won't work.
As for the second example:
<iframe id="compose" src="content.html" height=600></iframe>
Where do you expect Meteor to get content.html if you haven't specified that that path exists? Since Meteor doesn't set up routing by default, there is no resource at /content.html. So you'd have to add the Meteor Router package or some similar routing mechanism, and then tell Meteor that when asked to serve /content.html, it should just return the content of some template. The challenging part is figuring out how to get Meteor to return "real" HTML and not the Meteor-wrapped live HTML construction that is usually served up.
I have been playing with iframe lately (mainly to encapsulate some page made for an app webviews) and if you put those html files in the /public folder and in the iframe src write absolute url /file.html then it just works.