Currently I am using this code to add a CSS resource to my Wicket Web Application,
this.add(new CssResourceRefernce(FontAwesomeStyleSheetResourceReference.class, "css/font-awesome.css"));
I want to add this same CSS file as a on-line resource to my application. Using HTML I can do ti like this,
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
What is the 'Wicket' way of doing this task?
In Wicket 6.x, you can override renderHead() to include a CSS resource via URL like this:
#Override
public void renderHead(IHeaderResponse response){
response.render(CSSReferenceHeaderItem.forUrl("url_to_your_css.css"));
}
You can do it like #Tom did it or what you are looking after is the UrlResourceReference that is
A ResourceReference that can be used to point to a resource by using an Url. For example to a resource residing in a CDN (Content Delivering Network) or context relative one.
Related
The code is here:
But i couldn't link with the css.
I tried using
{{asset('public/added')}}
All the templates css,vendor,js are kept in the public/added folder.
The result in the browser is here:
By Default the asset helper will look under the public directory
From looking inthe picture your project structure is
public > added > css > css-files.css
For this you could use
<link rel="stylesheet" href="{{asset('added/css/css-files.css')}}">
You can omit the public since laravel asset helper will pick it for you
Alternatively you could use {{url}} helper or you could paste the whole url
Hope this would help you,
I followed this tutorial on using a content version strategy in spring for static assets. Everything works as intended except there is a corner case that I don't know how to fix:
My HTML has a <link> to a css file, a.css. If I look at the html returned by the server, I see that the link has been transformed to a-(md5).css, as it should. The problem I have is that a.css imports b.css. Spring is also properly updating the import from #import '/css/b.css' to #import '/css/b-(md5).css' The problem appears when I update b.css. Because the md5 of a.css is the same (the #import is to the static name), the browser is caching the request of a-(md5).css, which still points to the resolved b-(old-md5).css and I end up with the wrong styling
This sounds like a common problem. How can this be fixed?
Is it possible to tell the version strategy to compute the md5 after resolving links so that if the dependency's md5 changed, so would the dependent's md5?
This is my config
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//content-based versioning and max caching
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/")
.setCacheControl(MAX_CACHE_DURATION)
.resourceChain(false)
.addResolver(new VersionResourceResolver().addContentVersionStrategy("/**"))
.addTransformer(new CssLinkResourceTransformer());
//no cache
registry.addResourceHandler("/*.html").setCacheControl(CacheControl.noCache());
}
I couldn't find a way to solve this cleanly. My workaround was to disable caching for all css
registry.addResourceHandler("/ui/css/**")
.addResourceLocations("classpath:/static/css/")
.setCacheControl(CacheControl.noCache())
.resourceChain(false)
.addResolver(new VersionResourceResolver());
I was wondering how do you add link tag/google font to head in yii2.
I want to add the following
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
I have found this documentation but doesn't mention anything about link/adding google font etc
The correct answer is to create a new AssetBundle.
While you can directly place the HTML for the fonts into the of your main.php file, this isn't the Yii way. If you have tried to load jQuery files this way, you might notice odd behavior when directly putting them into the HTML.
For example: Directly place the HTML tag for Bootstrap CDN into the head of your main.php. Then, somewhere in your code try to use the tooltip. You will get an error in your console that tooltip is not a function. - This is because the way Yii puts all your template files together, and at that time, Bootstrap is not available.
While simply loading a font probably won't cause any problems, it is a good idea to do things the way they were intended. Following MVC rules, properly documenting your code, and following the Yii best practices, will go a long way. Not only will you thank yourself a year later when you have to go back into a project, but the next guy will appreciate it. I can't stand going into systems, and seeing stuff thrown everywhere, chincy hacks, and spaghetti code, and no documentation or comments.
Correct Way:
Create a new AssetBundle. In your assets folder, you probably already have AppAsset.php. Duplicate it, and name it FontAsset.php.
Here is an example from my project, using 3 Google fonts.
FontAsset.php
<?php
namespace app\assets;
use yii\web\AssetBundle;
class FontAsset extends AssetBundle
{
public $basePath = '#webroot';
public $baseUrl = '#web';
public $css = [
'//fonts.googleapis.com/css?family=Open+Sans:400,700',
'//fonts.googleapis.com/css?family=Ubuntu:400,700',
'//fonts.googleapis.com/css?family=Oswald:400,700'
];
public $cssOptions = [
'type' => 'text/css',
];
}
In your layout, main.php for example. Right under where you see AppAsset::register($this)
main.php
use app\assets\FontAsset;
FontAsset::register($this);
For every layout file that you want to load those fonts, include the FontAsset.
The AssetBundle is basically a bundle of CSS and/or JS files and options. You could add another one for say JWPlayer say named VideoAsset, and add your JS/CSS files for JWPlayer in it.
Point being, you shouldn't be adding these things directly into the HTML of the layouts directly, as it can cause problems. Let the AssetManager handle them by declaring AssetBundles.
It might save you later down the road!
The best way is to create an asset bundle and add the link to the bundle.
You can find a complete guide here:
http://www.yiiframework.com/doc-2.0/guide-structure-assets.html
You can put it directly in the head of the layout (file views/layouts/main.php)
I would like to embed an RSS feed from a site of mine into another site. Is there any free service that can do this for me or a way I can insert the HTML or javaScript?
JavaScript will not be able to load an RSS feed from a different domain; a page on domain A is not allowed to make a simple GET request to domain B because of security restrictions. However, if you build a proxy under the same domain using your server-side language of choice, your JavaScript can load the content from there. Here's a really simplified example using jQuery on the client and ASP.NET on the server.
Client:
$.get('Proxy.ashx?feed=http://stackoverflow.com/feeds', function(data) {
// Do something with the feed
});
Server:
public class Proxy : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
using (var webClient = new WebClient())
{
context.Response.Write(
webClient.DownloadString(context.Request.QueryString["feed"]));
}
}
}
You can provide the link to the current page's RSS like so:
<link rel="alternate" type="application/atom+xml" href="link_here">
But to have it visible in a web page, you'll need to use at least a server side script if no JavaScript is used. It's not available in plain HTML.
You can easily use jQuery to pull the RSS (its an XML Format) with a $.ajax('http://pathToRssFeed') and then format it and put it into the page using something like jQuery Templates. It's very simple.
How do hosted services like UserVoice embed their content on other web sites?
I see that it is via including a JavaScript file from the service provider on your own page, however, what I'm interested in are the building blocks for creating a service like that.
For example, do they use a library like jQuery, mooTools, or prototypejs and how do they avoid namespace clashes?
Also wondered if there were any books, articles, blog posts that go over this specific use of JavaScript (not looking for general resources on JavaScript).
Regards and thanks in advance,
Eliot
Here is a great tutorial I found on How to build a web widget (using jQuery)
Generally, what you are describing is called a "Javascript Widget" (UserVoice's just happens to show up on the side of the page).
There is a good tutorial about creating Javascript Widgets that you can check out.
The basic structure of such an embeddable service would be:
If the service doesn't mandate that the script is to be included at the bottom of the page, hook the body onload event, without stepping on the toes of any existing handlers (by intercepting the existing handler function, which could in turn be chained to other functions).
Inject new HTML elements into the document. The HTML code would most likely be inlined into the script as string literals as setting innerHTML on a single injected element would be easier and faster than direct DOM manipulation using a flurry of function calls.
The entire script should live inside a closure to avoid name clashes.
A JS framework may or may not be used; caution is required when including a framework since it could clash with a pre-existing, different framework, or a different version of the same framework.
EDT: Generally you'll make your client/customer/friend include a script in their page, then via that script you can do following:
In pure JS you can load scripts from remote location (or not so remote) dynamically via
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'your/remote/scripts/path.js';
document.getElementsByTagName('body')[0].appendChild(script);
// $.getScript('your/remote/scripts/path.js'); in jquery but you'll be sure jQuery loaded on remote site
Then script you loaded can perform different actions like creating elements like this
var body = document.getElementsByTagName('body')[0];
var aDiv = document.createElement('script');
/* here you can modify your divs properties and look */
body.appendChild(aDiv);
// $('').appendTo('body'); for jQuery
For deeper look into JavaScript you can read for example Javascript: The Good Parts or Definitive Guide To Javascript.