When you need to reference a resource file from a JSP file within SpringMVC you have to pass an absolute url for the resource, which is traditionally done with either <c:url ... or href="${pageContext.request.contextPath}/css/....
However, how do pass absolute urls within my CSS and JS files? In CSS this can be necessary at times you use a url for a property. In my JS files I may need to make an AJAX call to an absolute URL that I define somewhere. In both of these instances these URLS can change at different times, but Googling has not pointed me to the best way to handle cases like these.
I wouldn't be above adding a new maven plugin or some other JS or CSS compiler to achieve this.
CSS URLs don't need to be absolute, because the URLs are not resolved relative to the path of the current page, but relative to the path of the CSS file itself.
For JS, you simply have to define, for example, the base URL in a global variable, from your base JSP template, and reuse that base URL from your JS files:
In your JSP:
<script>var BASE_URL = "<c:url value='/' />";</script>
<script src="someFile.js"></script>
In your JS file:
$('#foo').load(BASE_URL + 'some/path.html');
Related
I'm trying to refactor a nodeJs project and my css is in my .ejs file. I need to put some dynamic data in my css file. I need to have dynamic data in my css, when my css is in my EJS file it's good.
But when I put my css into an external file, nothing happens!
So, how can I inject ejs tag in my external stylesheet file?
This is one of the questions to which one has to ask you - why do you want to do that? You are asking about a solution to a problem that you didn't describe.
By suspicion is that you are trying to use a templating system for something that could be done with a CSS preprocessor like Sass or Less. Particularly Less can be easily used on both the client side and server side. See http://lesscss.org/#client-side-usage
Now, if you really want to use a templating system created for HTML to generate CSS then you will have to take few things into account: You need to store your CSS templates somewhere where your HTML templates are stored, not where you store your static assets like images. Then, your server will have to serve your generated CSS with a correct MIME type. Then, your HTML will have to reference the styles using a URL to your generated CSS that will be generated on every request instead of being served directly from disk.
jsDelivr ( http://jsdelivr.com ) has Multiple File mode:
https://github.com/jsdelivr/jsdelivr#load-multiple-files-with-single-http-request
Problem is, libraries with CSS such as Gritter and Font Awesome use images in their interface components.
This leads to 404 errors when doing something like this:
//cdn.jsdelivr.net/g/jquery#2.1.0,bootstrap#3.1.1,summernote#0.5.0,mousewheel#3.1.6,jquery.timeago#1.3.0,jquery.gritter#1.7.4,jquery.unveiljs#1.0,jquery.waypoints#2.0.2,bootstrap.tagsinput#0.3.9,bootstrap.datepicker-fork#1.3.0,jquery.jqote2#0.9.8,portal#1.1.1
How can we use multiple libraries off the one CDN pageload, but change the paths CSS files reference to use the appropriate jsDeliver.net URI?
Is this a job for post-processing CSS in-browser, by jQuery or pure JavaScript, or is one forever doomed to one CDN pageload per CSS file referencing images, plus one remaining pageload for the CDN served CSS without image references?
Yes, unfortunately /g/ does not work with files that contain relative paths.
You can load this kind of files individually and use /g/ for the rest of them normally.
hello i am in a fix on what to do with my current situation.
I am trying to implement an html5 blog template with Umbraco. My template loads the css files with the help of jquery for the sake of responsive design.
Now this is okay for the home page as all the files are placed at the root of the site.
But whenever I click on a particular blogpost, the css files are not correctly retrieved because of the folder structure. A blogpost is placed in a datefolder directory as you already know.
I cant explicitly include the css files as all the files are not loaded at once. They are loaded one at a time depending on the browser window size.
Please give me some directions about which way to go. Ask me if you need more details.
You could use the base tag to define the base URL for all linking attributes, e.g. href, src
<head>
<base href="http://www.site.com" />
</head>
Even if this does not work exactly as intended in loading your CSS dynamically, you could use jQuery to pull the base tag's href value out to prepend the CSS file location.
You can of course make the href value editable via the CMS if required.
I have page specific css files I would like to call automatically. Does anyone have a nice way of doing this elegantly?
This should do it
link(rel="stylesheet", href="#{req.path + '.css'}", type="text/css")
Where you pass either req (the request object) as a local variable when rendering the jade template (or even just pass in req.path as path). This could just be handled in your layout.jade and it will work for each of your route paths.
If you want to get fancy, you could establish a consistent pattern where a page's route maps 1 to 1 to a filesystem path for a .css file in your public directory. In that case you could easily but the stylesheet link tag inside a conditional and only link to the .css file if you find a matching one on disk.
as you all know, ASP.NET includes each CSS stylesheet in the App_Themes's Theme folder inside the page. No discussion.
But now, I'm facing a little problem having lots of CSS files in a theme and willing to use a static content domain. I would like to load all the static content of my website from the static domain (not only CSS, but also icons, images, etc.), but let's now pay attention only to CSS.
My question is
Is it possible to override the behaviour of Page class, and for each CSS file found in Theme's folder, rewrite the <link> tag with the correct URL of the static content domain? I have nothing preventing me to deploy files into http://static.domain.com/App_Themes/Theme path, so at least adding a prefix to the tag is fine.
Thank you in advance.
Yes, you can. You can have a custom base page class write the CSS files it finds in the folder. Though, I'm not sure you can override the default behavior of the themes feature, so the easiest way is to move the CSS files outside of the default themes. Then, you can use the System.IO objects to read the directory, access the file, and generate the link.
HTH.
An alternate method is to write an http module. Have the module inspect the html being sent back to the client.
If it detects a style sheet reference, change the location that the style sheet is pulling from.
This works for the other items as well, such as images etc.