Print sections that were hidden on the screen with javascript - javascript

I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...

The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.

All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}

You can add an extra class to add display:block to your print.css..

Related

transform: translateX makes hyperlink unclickable

I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)
Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).
Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}

Page break issue in browsers print

This is how my Html page looks in print view.
I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).
<div style='page-break-before: always'>
But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.
If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.
I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.
$(document).ready(function(){
$("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});
Try this article
Make Sure You use
#media print {
.page-break { display: block; page-break-before: always; }
}
As page-break-* doesn't work on google chrome, here is the solution which worked for me. I set display: inline-block for all the HTML Element which I don't want to get separated between two pages.
.msgbx,.svnotice, .imgdescbx img {
display: inline-block;
}

Centering images and text in a div

I have been having some trouble centering some items on my website.
The items in question are in the passphrase generator (images and text elements in the dark box). I have tried the usual margin:auto, all the different display properties, text-align, align-self, align-content and align-items. None worked.
I was also wondering if anyone knew how we could get the text element under our images isntead of to the right, this is the code used for the generator.
All help is appreciated
A p tag is a block element, so the default width is 100%. This is why you have one element per line
#passphraseBilder {
text-align: center;
display: block;
}
#passphraseBilder p {
display: inline-block;
}
Turn the p tag into inline or inline-block, and it will work ;-)
Have a look to the difference between block and inline: https://www.w3schools.com/html/html_blocks.asp
Try this:
#passphraseBilder {
display:inline-block;
width:100%;
}
Note: I have just added the properties which you should add or overwrite. Existing properties has to be there.

Multiple print styles in one document for different DIVs

I have a content slider on a page and I want to allow site visitors to print the contents of only the slide they click on. I have 7 slides and two of them have a button within the slide that says, "Print Contents". Each slide content is contained within it's own div.
I've successfully used a print specific style sheet before, but am not sure how to set varying print rules for one document. Is there some kind of JavaScript or jQuery I can apply? I am a novice with both but am willing to give anything a try.
Here is a similar question on SO but no answers; this one is close but I need to maintain CSS styles.
any help is appreciated. Thank you!
Set up a CSS rule for your main elements:
#media print {
div.main-element: display: none;
Then add another rule:
div.main-element.print-me: display: block;
Now you can add a "print" button to each section of content, and have a handler adjust the classes appropriately:
$('body').on('click', '.main-element button.print', function() {
$('.main-element').removeClass('print-me');
$(this).closest('.main-element').addClass('print-me');
window.print();
});

Print a website without printing the link locations?

I'm invoking the navigator print function using a simple window.print(); call. It prints perfect (I want to print the same I see on the screen, so I don't really use a special CSS to print) but it showing the link locations next to the text link, something like:
Homepage (http://localhost)
To be clearer: I don't want to have the link locations near the links in the printed version, I have control over the CSS but I can't find this behaviour defined anywhere, so I think is a navigator-related issue!
EDIT:
This happens under Firefox 3.6.8 and the last Chrome, on Ubuntu an Windows XP/Vista.
So to avoid additional print-out of link information in a printed web page, add the following rules to the #media print section:
a:link:after, a:visited:after {
content: "";
}
This will remove the ugly link information like Homepage (http://localhost) and reduce it to Homepage. You may of course add rules to avoid it only in the text section (or only in the navigation, but you shouldn't display navigation in the print-out format of your web page.
Seems you are printing a page with this styling from a CSS2 compliant browser
http://www.alistapart.com/articles/goingtoprint/
In a fully CSS2-conformant browser, we
can parenthetically insert the URLs of
the links after each one, thus making
them fairly useful to anyone who has a
copy of the printout and a web browser
handy. Here’s the rule, which
restricts this effect to the “content”
div and thus avoids sticking a URL in
the masthead:
#content a:link:after, #content a:visited:after {
content: " ("attr(href) ") ";
font-size: 90%;
}
Try it out in a Gecko-based browser,
like Mozilla or Netscape 6.x. After
every link in the printout, you should
see the URL of the link in
parentheses.
content: ""; does not work
I use this:
#media print {
.noprint {display:none !important;}
a:link:after, a:visited:after {
display: none;
content: "";
}
}
This works to disable!
Currently using the content property should work in all major browsers.
#media print - or - <style type="text/css" media="print">
a:link:after, a:visited:after {
content: normal; //TODO: add !important if it is overridden
}
More options here: CSS Content.
More usefull ways of using the content attribute here: CSS Tricks
My app server (rails) required me to use a parent selector. The body element is perfect for selecting what should be the entire page.
body a:link:after, body a:visited:after {
content: "";
}
I found the other solutions don't work (anymore) cross-browser.
The following works in FF 29, Chrome 35, IE 11:
a:link:after, a:visited:after {
content: normal !important;
}
For anyone using Bootstrap 3, the selector used is:
a[href]:after { }
And can be overriden with something like:
a[href]:after {
content: initial;
}
Use additional CSS for print.
See here:
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
Adding this will help you to remove those unwanted links
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
Reading this will help
While many css options have been suggested, if you wish to get rid of the links and headings in the header/footer which is forced on each page, there is a setting just for you. As shown below.
That's it.
I found the mentioned CSS and removed it but it did not help, and I couldn't find it anywhere else in the project so I used jQuery to remove the links but still retain the text.
$('a[title="Show Profile"]').contents().unwrap();
More info here Remove hyperlink but keep text?
I faced the same problem, if you're using chrome, the trick is when displaying the print window, this one contains a left config panel which gives some configuration of display mode and other, there is a link below named : more params or more config (I had in french so I tried to translate it ), click on it after that it will show some additionnal options, among them, there is a check box "header and footer" uncheck it, and it will hide the "localhost...."
hopefully it will help
Every browser having setting of printing header and footer ,and background graphics
If you disable this setting of printing header and footer then it will not show on your print page

Categories