Here is the <head> tag of content.html:
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script type="text/javascript" src="codemirror.js"></script>
<link rel="stylesheet" href="codemirror.css">
<script type="text/javascript" src="matchbrackets.js"></script>
<script type="text/javascript" src="closebrackets.js"></script>
<script type="text/javascript" src="expression.js"></script>
<style>
.right {
text-align: right;
}
</style>
</head>
File is loaded via:
view.getEngine().load(getClass().getResource("content.html").toExternalForm());
HTML file loads just fine, but none of the files referenced with src or href (css/js). All linked files are in the same package as HTML file. So is the class that loads it.
Ok, just tried to compile it with old 1.8_45 JDK and it works as intended, so it seems like some major fault on Orracle's side.
Update:
Bug fixed in Java 8u72 !
Related
I am creating an email using Spring Boot and Apache FreeMarker. Is it possible to include CSS in the email without needing to have a huge tag in the header?
Here is an example .ftl file that I would like to link a .css file to:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="style-in-css-doc">
Some text to be styled
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can simply include the css file into your template by putting css code in another ftl file and then include it to your main template with include directive
<#include path>
I have a .jsp file
<!doctype html>
<html lang="en">
<head>
<title>Calendar</title>
<h1><div align="center">My Sunlife App</div></h1>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="cssFiles/BackgroundIMGE.css" media="screen">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
It is using a css file (BackgroundIMGE.css) which sets the background image. I have placed this css file in my Workspace\MySunlifeApp\cssFiles\BackgroundIMGE.css.
Name of application using this is MySunlifeApp.
The css file is:
body {
background-image: url(/asd.jpg); /*You will specify your image path here.*/
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: top center !important;
background-repeat: no-repeat !important;
background-attachment: fixed;
}
Here asd.jpg is also in the same folder as the CSS file.
When I am running the application, it is not loading the CSS file.
http://localhost:8090/MySunlifeApp/cssFiles/BackgroundIMGE.css Failed to load resource: the server responded with a status of 404 (Not Found)
I'm using Dojo 1.6.1 on JSP pages.
<html>
<%#include file="includes/head.jsp" %>
<body class="tundra">
<div
id="appLayout"
class="demoLayout"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design: 'headline'"
style="width: 100%; height: 100%">
<div
class="edgePanel"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'top'">
<%#include file="includes/headline.jsp" %>
</div>
<div
class="edgePanel"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region: 'center'">
.........
contents of head.jsp
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/dojo.1.6.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css">
<style type="text/css">
</style>
<script src="<%=request.getContextPath()%>/dojo.1.6.1/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
</script>
</head>
When deployed, I get javascript error.
Could not load class 'dijit/layout/ContentPane'
when inspected with firebug.
Seems that dijit.layout.ContentPane is not in the classpath. Try to add it or try to change the require for a define to see if fix.
Here is the example.
Internet Explorer doesn't support HTML <base> tag and even other browsers do, there are some problems when redirect takes place inservletsto some.jsppages for examplerequest dispatching.`
It's feasible to add ${pageContext.request.contextPath} with each URL
nor request.getServletPath()
JSP relative links for CSS and images with servlets forwarding may change things a lot. This link : Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
Is there a better approach with JSP / servlets or it's just an IE issue?
Link : HTML <base> TAG and local folder path with Internet Explorer
And if it is an IE issue:
1. how to fix the IE issue as the above post is unable to give a valid answer?
2. how to solve it with JSP / servlets?
My website is now showing CSS and images.
E.g. HTML output is:
<base href="http://localhost:8080/Alpinema/" /> is not working for
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
It works in other browsers like Firefox and Chrome.
My JSP code portion:
<head>
<base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />
<meta charset="utf-8">
<title>Alpinema.com</title>
<link media="all" rel="stylesheet" type="text/css" href="css/all.css">
/css?family=Merriweather|PT+Sans:700|Nobile:400italic' rel='stylesheet' type='text/css'>
</head>
Use <c:url> tag from JSTL to reference CSS/JavaScript resources inside my JSP files. By doing so you can be sure that the CSS/JavaScript resources are referenced always relative to the application context (context path).
Example
index.jsp:
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="<c:url value="/css/main.css" />" />
<script type="text/javascript" src="<c:url value="/js/utils.js" />"></script>
<script type="text/javascript" src="<c:url value="/js/jquery-1.8.3.js" />"></script>
</head>
<body>
...
</body>
</html>
For even more solutions see my answer here:
Adding external resources (CSS/JavaScript/images etc) in JSP.
i am trying to run a jQuery on tomcat server and weblogic server but its not working
<html>
<head>
<script src="/WEB-INF/js/jquery-1.7.1.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
<link href="/WEB-INF/css/styles.css" type="text/css" rel="Stylesheet" />
<title>Dual List Box</title>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
can any one help me ..!!
If you're deploying a war file, the contents of the WEB-INF directory won't be accessible to the public via http. Ensure your js and css directories are in the root of the war (on the same level as WEB-INF) then change your path in the html to /css/styles.css and /js/jquery-1.7.1.js in your style and script tags.