I have a requirement to print only part of a page. I cannot use css(media=print) to do this since I have no clue what the page contains. All the html in the page is dynamically generated.
Also is there any limitation on the css properties that are recognized in Print mode. Many of my css properties like background-image are not applied on the generated preview.
You can dynamically create a css and insert or switch in your html document (see http://docs.jquery.com/Tutorials:5_Quick_jQuery_Tips#Switch_A_Stylesheet).
You can also define a CSS like
<style type="text/css" media="screen">
#printableButNotVisible { display:none }
#visibleButNotPrintable { display:block }
</style>
<style type="text/css" media="print">
#printableButNotVisible { display:block }
#visibleButNotPrintable { display:none }
</style>
and add dynamically classes "printableButNotVisible" or "isibleButNotPrintable" to all elements which need be either printable or visible. You can do this for example with respect of jQuery.
You can aslo use jqPrint plugin to print selected part of the page.
Related
I have an html form that is submitted to a JSP. The form has an input that specifies background color preference. On the JSP page, I am trying to use the background color specified by the user, or, if they do not enter anything, use a color specified in a CSS file. Is this possible?
I have a in my jsp that specifies the location of the CSS file, so I know I can get to the css background color, but if the user specifies a color, I want to 'ignore' that, and use the color they chose.
Is that possible?
You could load the default css via a <link href...>, and then add the overrides in a <style> block on the page. Since the styles defined on the style block will have precedence over the other ones it will successfully override the default values. You can see more about how CSS "cascades" the styles on the W3C specs.
Try something like this in the <head>
<link href="default.css" media="all" rel="stylesheet" />
<style>
/* Define custom CSS by the user here */
body{
background-color: <% ... %>;
}
</style>
I suppose there are many ways of producing the correct output in JSP, but using JSTL Core IF Tag you could do something like the following:
<style>
/* Define custom CSS by the user here */
body{
<core:if test="${param.backgroundColor!= null}">
background-color: <%=request.getParameter("backgroundColor")%>
</core:if>
}
</style>
This way if the user has selected a custom background-color for the h1 element, it will override the default.
So I'm thinking I'm either missing something very obvious and setting myself up for a nasty fall or this is so obviously ok that no one really talks about it.
I want to use one style sheet for a small website, but I want a slightly different layout on some of the pages.
Example: Home Page would have right sidebar; another page would be full width; and another would possibly have three columns.
So that's it. What I'm creating is multiple div with different dimensions that would fit the various formats.
Ie. #rightSide; #leftSide; #fullWidth; #middleContent.
The idea is that I would use a certain combo of divs per page and the others would fade into the background until needed.
So I created the index page and it worked fine. It was a 3/4 width + rightSide. Now I'm creating a full width... and it still seems fine.
Yet all the research I do regarding multiple layouts on css insist that I use different style sheets even for small layout changes like double columns to full width.
I have seen zero reference to using CSS this way but maybe I'm using the wrong key words. Creating 3 or 4 stylesheets for a 6-8 page website seems a little excessive.
So what am I missing?
This is very simple you can user multiple classes for multiple page for example you can use css class for blogpage and use it in body tag
ur css will be like this
.menu{color:red}
.blogpage .menu {color:green}
and so on for each page
Just have a style tag at the top of the pages that you want to have special features on then put all of your special style features in there
You could use nth-child selectors:
div.class:nth-child(1) { specific style for first}
You can include the stylesheet on each page as normal but then overwrite the styling 'per page' to suite your needs:
Home page
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for home page */
#rightSide {
text-align: right;
}
</style>
</head>
Second page
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/* Custome style for second page */
#leftSide {
text-align: left;
}
</style>
</head>
EDITED
You could wrap each page in a container with an id of the page name. then target this within the CSS stylsheyy per page. eg
HTML
<div id="homePage">
<div class="mainDiv">
</div>
<div id="rightSide">
</div>
</div>
CSS
#homePage .mainDiv {
// style this home page only
}
#secondPage .mainDiv {
// style this for second page
}
#homePage #rightSide {
// style this home page only
}
#secondPage #rightSide {
// style this for second page
}
I am trying to print some Cards using web browser, the unfortunate part is that the browser writes a header and footer on my card and gets some space on my card which causes the card to be printed on two pages instead of one page.
How can I remove header and footer on the printing document ?
Thanks in advance .
You could use an alternate stylesheet for printing, and then you define distinct rules for that format:
.my-header { display: none; }
.my-footer { display: none; }
And include the stylesheet with the proper media type, print:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
#media print
{
.noPrint
{
display:none;
}
}
save it in your stylesheet and add this class to elements which you don't want to print.
The browser automaticaly adds a header and footer (with the url and such), you can not switch those off (unfortunately).
The Headers and Footers added by the browser at printing can only be turned off locally by the end user. In IE for instance go to Print > Page Setup and edit the settings under Headers and Footers.
An alternative might be to create a PDF on the fly using something like http://sourceforge.net/projects/itextsharp/
This would allow you to set the page size, insert images, etc. dynamically which might meet your needs.
I have some reports in HTML format and want print them in my web application. The problem I have is that I can not force printing operation to apply css properties to coloring header and footer.
<td style="background-color:gray">Total</td>
I expect to see a gray background color row in the printed paper, but everything is white as cells background color.
What do I have to do ?
Have you tried adding the styles via a media query? Either like this in a <style> block:
#media print {
td { background-color: gray; }
}
Or like this in a link in the <head>:
<link rel="stylesheet" type="text/css" media="print" href="your/print/css.ss" />
In case you're not aware of print stylesheets here's a good article on it http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
This is most likely a setting with whatever software you are using to print this page.
If you are using a web browser, the browser may be removing the colours to save ink etc.
These settings can usually be changed within the browser software itself. I don't think there is anything you can change on your web application to force this background-color.
I need to override some <style> elements within my Razor page so I've inserted the styles immediately after the opening code block:
#{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
The page renders correctly in the browser but Visual Studio green squiggles at <style> complaining that:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
I've doublechecked the master page - no problems highlighted there.
What's Visual Studio expecting at this point? What's the correct way to override styles on a page by page basis? Via jQuery?
The style element cannot be nested under the <body> or child elements of the <body>, instead it should go to the <head> element of the page.
If you try to override the styles like this, they get inserted into the default section of your layout page by #RenderBody(), which I assume is inside the <body> of the layout page, while the default styles still stay in the <head>.
The proper way to override some part of the layout page from the content page would be something along these lines, using Razor sections:
_layout.cshtml
<head>
#if (IsSectionDefined("Style"))
{
#RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
#RenderBody()
...
page.cshtml
#{
Layout = "layout.cshtml";
}
#section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Now if the Style section is defined on the content page, its contents will override the defaults from the layout page.
I suggest you read more on Razor layouts and sections. A nice article on this by ScottGu can be found here.
Regarding Visual Studio markup validation warnings
Visual Studio has a problem when markup that makes up a single page is being split up between different files like this. In most cases there is no way for Visual Studio (or any such IDE for that matter) to know how the different page fragments will be dynamically put together in the end. So usually you can't avoid some of these warnings on a project.
Personally I would ignore the warnings if I know what I'm doing and the resulting pages pass the markup validation (http://validator.w3.org/).
If you really want to hide the warnings, you need to disable the appropriate validation options in Visual Studio. E.g. for HTML in Visual Studio 2012 this can be done in Tools > Options > Text Editor > HTML > Validation.
This appears to be a quirk of using Razor. The validator can't "see" the overall HTML because it's scattered across multiple files using Razor logic to piece it all back together again.
The trick I just figured out is to "hide" the <style> and </style> from the validator. Instead of:
<style>
use:
#MvcHtmlString.Create("<style type\"text/css\">")
And instead of:
</style>
use:
#MvcHtmlString.Create("</style>")
The validator doesn't understand these lines are generating <style> and </style>, so it stops complaining about them.
Make sure you're using a #section XXX around the <style> element where "XXX" is referencing a #RenderSection(name: "XXX", required: false) in a master file that is within the HTML <head> element. This is necessary to make sure the <style> element gets inserted in the <head> element where it belongs.
I've seen this happen on my projects as well. Fortunately, when you run the program, it figures itself out and everything should render as expected.
Due to the separation of content at design time, I believe a few of the warnings from razor pages can be safely ignored.
If the CSS isn't actually being recognized, make sure to add that to the question, but if all you're doing is trying to get a perfect no warnings build, then you might just have to set VS to ignore parser errors such as these.
I think you should be set style in HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>
That good for me.
The style tag should be in the head tag, not in the body tag.
You should make a region in the head tag in your layout, and put the style tag in that region.
If you ViewSource one the page as it appears in the browser have you got
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
As that's what the validator implies.
If the page passes a W3 validation test, just ignore VS. I think it struggles a bit with Razor.