I am somewhat new to web development, so I'm not sure how "stupid" this question is, but I couldn't find much when searching, so I wanted to ask.
I am creating a page that, when a user presses an Export button, it exports a snapshot of the site as a PDF. The PDF library takes a URL. That works well. However, I want this page inside a larger site. When I print, however, I don't want the larger site to be printed. Is there a way to supply an "internal" HTML address so that my web page can still be accessed. What should I look at to do something like this?
Thanks.
The best way to "hide" the rest of the page when the user prints a web page is to create a print stylesheet and include it in the page header like this:
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Then simply hide the elements of the page that you don't want printing in your print.css file.
I'm wondering if by "larger site" you mean the template surrounding your content. Is that true? If so, a common approach is to provide a parameter that can be added to your request, like print=1, which would suppress the outer template when delivering your content.
Related
I have just created a Newsletter Form on my website, via an external provider called "Benchmark" - to save time because I am not a professional programmer, so I only know HTML and CSS coding so far.
Their service generates an automatic thank you page that I am free to use, but when you click "back to the website", it automatically goes back to the cached page, which means that all the data inserted into the Newsletter form (email and name) is still there.
I think this gives the customers a lot of uncertainty about whether their data has gone through (and Benchmark replied that I had to make my own "Thank You" page if I want this function), so I would like to create my own page with a link (using HTML-code), which will automatically refresh the page that is linked back to - so that the customer comes back to the page with an empty Newsletter Form.
I have seen some similar questions with answers in the Forum, but as far as I could see, they use other programming languages that I don't know how to implement, so if anybody knows of a method of how to do this with HTML (and CSS, if needed), I would be very grateful. Thank you in advance!
If I understand correctly, you want a page that will redirect to your newsletter form (with the fields empty). You have a couple of options: use a bit of javascript, or use an HTML meta tag. For both of these you'll need a new page. Since you want a pure HTML answer, I'll show you the meta tag version first.
For the meta tag, you'll simply want to put the following code in the head section of your page:
<meta http-equiv="refresh" content="0; url=http://example.com/" />
The javascript solution would also go in the head section as a <script> tag:
<script type="text/javascript">window.location.href = "http://example.com/";</script>
In either one, just replace http://example.com/ with the address of your newsletter form and you should be good to go.
There's also this question that you can look at if you want to learn more.
I have a scenario in which I want to test four different versions of a page, each with different javascript content loaded in the HTML head section.
I would like switching between the templates to behave as though the page has been re-loaded, clearing the state and re-running the JS in the head and body of the HTML file.
Can I do this with four different Meteor templates?
The way I'd do this is to append the JS to the head from within the template's onRendered method, like so:
Template.templateName.onRendered(function() {
$('head').append("insert your script here");
});
So I'd keep the default head free of any of these js files, and just add them in depending on what template the user is on. You can also manipulate the user experience from within the onRendered method as well, using things like $(window).scrollTop(0) to make it appear as though the page has refreshed.
HERE there is a page that maybe the visitors would print. If you try to print it's a mess. I know that there is proper media queries to do that but I think it takes a a lot of work.
So my question is this: is there a way to open a external/existing PDF when I decide to print the page? I mean when I click the print botton of the browser, not a custom botton on the page.
Thanks guys :)
I think it is impossible to do this that way. But really, don't be afraid of media types.
Here are some ideas:
1 - BEST) Style media = print: http://www.w3schools.com/css/css_mediatypes.asp
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>
And Use another style sheet for printer media. This is the best solution, and this style can be really minimal.
2) Use some kind of converter (html to PDF) and convert each page that You want to 'be printable'. Then place Print icon somewhere on the page which is the link to pdf version. You can also map CTRL + P using JQuery for example, and run download pdf dialog.
It is not a good solution in my opinion, every new page = total mess and converrting, and... Not worth. It should be done automatically.
3) I don't know what kind of files are U using, but if it is simple html, U can run bash script using PHP that converts the page using for example html2pdf converter on the fly. Then, U can make the printer friendly version icon, and redirect someone to a php script which make pdf and display it. But here also You need a new icon, and File print doesn't work.
So the solution 1 is the best I think...
Hope it helps :)
PS. Media types are not so time consuming. You make only few changes. Navigation display hidden, font size, img display and that's really all. And You can do it once. Converting must be done multi, multi, multiple times :). If You have any questions about 2, and 3 solution write, I can help to make a sketch of them :).
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
I am writing a web application for use by multiple organizations which requires custom styling depending on which customer is using my page (the page is "branded" for different companies).
Basically, I have a database which stores some information such as primary color, background color, and company logo image, all of which vary depending on who is using my site.
When someone comes to my site, I look up their styling information and put it in session scope as a parameter named "brand"
I have a jsp called brandCss.jsp which does things such as:
#logo
{
background-image: url( '${brand.logoImage}' );
}
body
{
color: ${brand.primaryColor};
}
etc.
Then in the <head> tag of my page, I link to my JSP as if it were a css file:
<link type="text/css" href="/brandCss" rel="stylesheet"/>
Using the spring framework, I map a request for /brandCss to my brandCss.jsp view, so that this request returns my JSP as a view.
This works great in IE--someone hits my page and my server code goes off and finds the branding (styling) information they need to see, then splats it into my JSP which is then treated as a css file.
However, in Firefox/Chrome, my brandCss.jsp stylesheet is not used--my page IS pulling down the jsp correctly, and it gets exactly the same information as IE, but for some reason the browser chooses to ignore the styling in it.
Anyone have any idea why this or how to make Firefox treat my JSP like css?
Make sure your page is setting the Content-Type to text/css. If the page isn't being served with the correct Content-Type, I would suspect Firefox would ignore it. This is easy to check with the help of something like the Firebug (see the Net tab for the files that are requested).
I'm not exactly sure how you would go about setting the Content-Type in Spring, or from a Java web app, but that is what I would check first.