Including css and js files in a JSP not working - html

Hi I am facing a problem including js/css even image src in JSP files.
When my application starts with any context say abc ex. http://localhost:8080/abc and browser on a url ex http://localhost:8080/abc/reports/userCount and in that JSP i am including css as
<link rel="stylesheet" type="text/css" href="resources/thirdparty/css/jquery-ui.smoothness.min.css">
a 404 error is shown in browser console and the URL to download css is formed as
http://localhost:8080/abc/reports/resources/thirdparty/css/jquery-ui.smoothness.min.css
But when I am on on a page with URL like
http://localhost:8080/abc/createBadgeStep2
the same include to css works fine because url to download css is created fine.
http://localhost:8080/abc/resources/thirdparty/css/jquery-ui.smoothness.min.css
I can see clearly here that second slash after Context in the URL is creating problem. But can't figure out how to fix it. The problem goes for js and images too.
Any help will be highly appreciated.

Import your stylesheet as
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/thirdparty/css/jquery-ui.min.css">
If you are importing several resources down the page, better set the context path in a page-scoped variable using the <c:set> JSTL tag.
<c:set var="ctxPath" value="${pageContext.request.contextPath}" />
Then use the variable in your href attribute.
<link rel="stylesheet" type="text/css" href="${ctxPath}/resources/..." />
You would also need to import the JSTL tag library to use the <c:set> tag.
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Related

<%= foo %> not pulling value through on css src

I'm trying to force a value into the linked .js and .css files. It works fine on my js files but not on my css. Example code:
<script src="/Scripts/ExampleJSFile.js?v=<%= version %>"></script>
<link href="/Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet" >
Which is giving the following result:
<script src="/Scripts/ExampleJSFile.js?v=5.0.0.1"></script>
<link href="Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet">
I am using asp.net c# (WebForms) as my code behind framework.
Thanks
Event binding and dynamic codes run only on server side controls and code snippet that can be accessed by .net.
By default asp.net process script src tag and replace value for you, But when it come to somethings like css link or favicons, the compiler dose not process your code and just send it to client.
You must place things like these into server container elements like placeholder.
I always use code like this to solve it:
<asp:PlaceHolder runat="server" ID="StylesPlaceHolder">
<link href="/Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet" >
</asp:PlaceHolder>
It will result in something like this:
<link href="/Styles/ExampleCSSFile.css?v=5.0.0.1" rel="stylesheet" >

My css import fails

stupid HTML question but I ve spent a lot of time trying to solve it.
I have difficulties to include some css files into a jsp page.
When I try:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
And when I try:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
server returns a 404 error and fails to import the file:
{code="404", msg="/css/bootstrap.css", uri=/css/bootstrap.css}
The text
" rel="stylesheet">
gets displayed on the web page.
The imports where at the top of the to avoid issues with previous lines.
The file is IS in /css dir
and I copied it in all possible places where it could be seeked to make sure.
So I m really puzzled...
Is there something obvious top that knocks somebody's bells?
I had forgotten to include this:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
To make it work:
<link href="<c:url value="/css/bootstrap.css"/>" rel="stylesheet">
Maybe the use of single quotes inside double quotes will fix it.
<link href="<c:url value='/css/bootstrap.css'/>" rel="stylesheet">
Also, have you tried simply
<link href="../css/loginstyle.css" rel="stylesheet">
?

Using runat="server" in stylesheet link not resolving

I'm trying to include a stylesheet in one of my aspx pages. The stylesheet is in the directory /Dir1/style.css (relative to the project root). I'm trying to get it to resolve in a page that's at the path: /Dir1/MyPage.aspx. I'm aware that I could just include the stylesheet in the header, since it's in the same directory, but I'm trying to use the runat="server" tag so that it would be easier to move the page later if needed.
This is the line I'm using:
<link runat="server" rel="stylesheet" href="~/Dir1/style.css" type="text/css" media="all"/>
Everything I read indicate this is supposed to work, but no matter what I do, I get a 404 in the browser for that stylesheet. The runat attribute doesn't seem to be doing anything - the path the browser is trying to fetch ends up being: http://localhost:7205/Dir1/~/Dir1/style.css. What am I doing wrong?
try this:
<link runat="server" rel="stylesheet" href="<%= Page.ResolveUrl("~/Dir1/style.css") %>" type="text/css" media="all"/>
And you should not need the runat=server

Template’s CSS is not styling the HTML

I've downloaded a template from w3layouts.com to make a website, and when I unzip the layout and try to open any of the HTML files, none of the CSS styling the page (it just looks as if there's no CSS).
When I inspect the HTML files, the CSS appears to be included in the header. For example, this is included in smartphone/blog.html's header:
<link href="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
You have to simply update this link tag
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Because in this template href="smartphone/css/style.css". but actually css dictonary present in same level where other html file are. So you just update html file link tag to new href="css/style.css".
Is this template is for website, phone so you must set this template using index.php file to set dynamic path. but above solution is static not a dynamic. if you have to set dynamic path you must configure template step.

Export JSP to Word With External CSS

I am trying to export a JSP generated document webpage to Microsoft Word. In the web browser, everything looks great. However, when I change
<%# page contentType="text/html; charset=utf-8" language="java" import="java.util.*, java.text.*;" errorPage="" %>
to
<%# page contentType="application/msword; charset=windows-1252" language="java" import="java.util.*, java.text.*;" errorPage="" %>
The page will try to open in word, but it will lose all of its styling.
I am linking to few external style sheets, but these are not picked up in the Word Document.
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/general.css"/>
<link rel="stylesheet" type="text/css" href="css/headerfooter.css"/>
I have also tried linking href to the direct location on the server. This also did not work.
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/common.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/general.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/app/css/headerfooter.css"/>
Finally, I have tried to move the styling inside the JSP. However, this has not worked when it comes to exporting the document to word, either.
How can I export a JSP to Microsoft Word and have it retain styling?
Linking to external styling sheets will cause the JSP to lose formatting. The solution is to embed the styling inside the JSP. While I mention above that I did that, it contained formatting errors that, once fixed, displayed the styling properly in Microsoft Word.
Additionally, here is a good resource for adding Word specific styling to your document such as orientation, page margins, and embedded images:
http://sebsauvage.net/wiki/doku.php?id=word_document_generation