I have an online viewer(popup) where Images are displayed in a div, along with some buttons to zoom in/out or rotate the image. Now I want to print the image programatically on certain user action. Is there any option to print just the from the browser or to print from a stream. I can't install extra plugins on the browser to accomplish this. If not printing an image directly, can I somehow print the image if I convert it into pdf before printing? I have tried finding a solution for this but the only thing I could find was javascript's window.print() function.The problem is that it will print the entire page including the buttons if I use it. I just want to print the image.
You can use the media print option to set contents of the body to hidden and only the image you want to print to show. Add a wrapper to contents in the body and append the image you want to print out side the wrapper with class print and add the following css.
<style type="text/css" >
.content-wrapper{
display:block;
}
.print{
display:none;
}
</style>
<style type="text/css" media="print" >
.content-wrapper{
display:none;
}
.print{
display:block;
}
</style>
Related
I have a simple webpage where opening html tag has an attribute font-size:60% !important set in css file.
<html>
<head>
... some js and css ...
</head>
<body>
... header ...
... content ... <-- need to replace that by new content
... footer ...
</body>
</html>
Everything is rendered well (header/content/footer).
I also have another file where I've got content to be placed on this webpage (based on bootstrap 4) and I am not allowed to modify existing js/css files (they are loaded via API, so created dynamically).
Problem is that this content looks well when I render it it in separated file as it is. Once I replace old content with new (leave header and footer) and add css files it looks well but of course everything is smaller due to this font-size set in html tag.
Is there any way to make it working?
I've tried to unset current font size by font-size:unset also in html tag (by adding and targeting class) and then my content is rendered properly but unfortunately header and footer have to big font then.
Looks like the best way would be to unset this font-size only for this new content which can be enclosed in a div but I didn't found a way to do that.
Here is a jsfiddle: fiddle
It basicaly shows my problem, html tag styling is loaded with external js API and cannot do anything with that.
I am backend programmer so do not have much experience with all css stuff. Need help with that...
If you can add all your new content in a div, as you say, and then add a class to that div like:
<div class="content">…</div>
Then your css to set the font size would be:
html .content {
font-size: 100%;
}
Now for your specific problem:
Say the font-size was 100px (as an example);
the font-size set on <HTML> is 62.5%, so 62.5px;
The font-size for the content wants to be back to 100px, and %'s are relative, so if you do 100% on the <content> you get (100% * 62.5px = 62.5px);
You need your content bigger, and this works out to be (1 / 0.625 = 1.6x, or 160%)
I believe your solution is then to set css of:
html .content {
font-size: 160%;
}
You should not need the !important flag for this to work.
body {
font-size: 137.5% !important;/*62.5% = 100% - 37.5% so 137.5% will be original font size*/
}
I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.
I'm not a programmer, but I need to find out if there's a way to force a java script to fit completely within an element in my page, without showing a horizontal scroll bar. Sorry if I use the wrong terminology.
Below is a given code that I get from a third party, which I place on my page, to get a display gallery of items. The problem is that it too wide.
Is there a code I can add, to force the script to completely fit inside the screen (600px wide), so the horizontal scroll bar disappears automatically?
Below is the script:
'<noscript>
<p>powered by example.com</p>
</noscript>
<script id="scriptId_718x940_60872" type="text/javascript" src="//example.com/?scriptId=60872&bid=1301660001&format=718x940&bannerType=3">
</script>
I should add that this is a specific html element within my page, and that I'm trying to apply this code only to this element, not to the whole page or the whole site.
Thank you so much for your help!
600 what? I'm going to assume pixels. Add this to your CSS:
body {
max-width: 600px !important;
}
Added !important in edit
Add this to your html. It isn't very pretty but it should narrow the iframe that is displaying the coupons.
<style type="text/css">
div#ci_gallery {
width: 600px;
overflow: scroll;
}
</style>
I have a webpage with dynamically populated tables. They are wide, so they have horizontal scroll bars when being displayed on the page.
My problem is that when I go to print, the tables are cut off by a little bit. As a solution, I want to reformat the tables by changing the contents of some <td> elements to make it fit, for example:
//before
2014-01-23T18:28:35
//after
2014-01-23
18:28:35
This will decrease the width of the table so that it will fit on one page when printing.
I have two ideas so far:
When I dynamically populate the table, also populate a second table with the modified data. When on screen, the original table will be displayed, while the second one will be hidden. When printing, the original table will be hidden, and the second one will be displayed.
Call a JavaScript function or use CSS to modify the contents of <td> elements only while printing. (Is this even possible?)
What is the best approach for this situation?
EDIT
I am not asking about using a CSS stylesheet only when printing. I have already done that, and shrunk the font size to the minimum size (in my opinion) for human readability.
You can use a stylesheet for print.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
The styles defined there are only displayed when you are printing the page.
There is a #media print thing you can add to your css to change the styling of how things print.
So if you just want to shrink some td's you can do this for example:
#media print {
td {width: 50px}
}
Here, here and here are good examples of how you can do this. It's very powerful stuff, you can change just about anything to make the printing look completely different.
You can add this to your existing css file or make a completely new file that just has your printing css in it. Most people go for that second option, so all that css is together in the same place. If you do that you have to add media=print to your css link:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
EDIT AFTER QUESTION CLARIFICATION:
You could do a minified version of your option number 1.
Instead of making two complete tables and hiding one, put divs into each td that needs two types of data. Hide one for the screen css and then switch which one you are hiding in your print css.
This seems like less overhead than a completely different table.
So something like this:
<td>
<div class='screenShow'>Show this on the screen</div>
<div class='printShow'>Show this when I print</div>
</td>
Then the css would be:
#media screen {
screenShow {display: block}
printShow {display: none}
}
#media print {
screenShow {display: none}
printShow {display: block}
}
or something other than block, whatever makes it look right.
I ended up going with the solution in #Bobo's comment.
In each <td>, I put both options of text in <span> elements.
<td><span id="hideOnPrint">SCREEN_TEXT</span><span id="hideOnScreen">PRINT_TEXT</span></td>
In the screen.css, I only hid the id="hideOnScreen".
In the print.css, I only hid the id="hideOnPrint".
I have a page with a top navigation area, a side navigation area, a control button area and somewhere in the middle a DIV with an id="content" that contains content.
I would like to be able to print just the contents of that DIV. I realize I have many lines of code making my other areas invisible and resizing everything but is there some alternative? Is there some way I can just print the contents of the DIV?
Take a look at using Media Types - specifically #media print - in your CSS to specify styling that only applies to printing.
This way, you can write a stylesheet that hides everything except your "area inside a DIV".
Use a css print stylesheet putting display:none in the fields that you don't want to print.
Use the tag link like this:
link rel="stylesheet" type="text/css" media="print" href="print.css"
OR
#media print {
BODY { font-size: 10pt }
}