There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?
I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!
Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
#media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.
Make all parents visible
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.
Like this:
#media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.
**DANGEROUS APPROACH**
Use this JS function:
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
My answer is based on the ones given by #Porschiey and #Paul Roub with a slight addition.
Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}
Google messages updated their divs. Use this:
(function() {
var originalContents = document.body.innerHTML;
var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
document.body.innerHTML = printReport.innerHTML;
document.body.style.display = 'block';
document.body.style.overflow = 'visible';
window.print();
document.body.innerHTML = originalContents;
}())
In case if someone just want to print the scrollable list, use your mouse to select the scrollable list, right click on selected content and print. Ctrl+A or select all or just right click without selection might not work, so you must select the list from start to end to be able to print on multiple pages
Related
This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):
You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }
I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!
It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}
it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you
I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks
I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.
To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality
I'm loading some picture from server by JS after whole page is loaded.
Means by user click i'm loading some image and insert it into DOM.
This image has unique ID, now i want to print out this image ONLY by JS help.
I did style file for printing purpose
* {
display:none;
visibility: none;
}
html, body, #out_image_1 {
background: none;
display: block !important;
left: 0px;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
}
and calling print such
$("#print-button2").click(function() {
window.print();
return false;
})
but page is blank (empty) Where i'm wrong ?
Thanks
There are a couple reasons it might not be printing.
Your image may be contained in another element, but according to your CSS, the parent element is still display:none
Your CSS will work only if #out_image_1 is a direct child of body:
http://jsfiddle.net/RXMx8/
But not if #out_image_1 has any parent elements other than body and html:
http://jsfiddle.net/RXMx8/1/
I'm betting that's the issue, but other reasons could be:
Your browser is not set to print images by default. Using window.print() may skip the "print preview" which could allow you to toggle this setting on.
Your HTML is OK, but you're targeting the wrong element.
You're out of ink ; )
Even though you're adding the element with javascript, you should still be able to print it. For debugging, remove the * { display:none; } and see what happens.
* By the way, it should be visibility: hidden;; "none" is not a valid value, but it's redundant with display:none anyways so you don't need it at all.
OKay first off this is really really similiar to the http://dribbble.com homepage.
In the simplest form possible. I have an image, and i'm trying to CSS it so that when i hover over the image, a DIV shows up with some text and a partially transparent background color.
I have no idea how to do this..
Here is a start. IE6 won't do this, unless you make the parent an anchor (a).
HTML
<div class="container">
<img src="something.jpg" alt="" />
<div>some text</div>
</div>
CSS
.container div {
display: none;
opacity: 0.7; /* look into cross browser transparency */
}
.container:hover div {
display: block;
}
#alex, I think he wants the text to appear over the image, not under it. Two ways to fix this:
Add position:absolute to the div containing the text.
Use a background-image instead of an img tag.
I'd go with 1, as it's better semantically and better for accessibility to use img tags for content-bearing images.
If what you want to obtain is an effect like that on Dribbble page, then you do not need to create a div over an img.
It's sufficient to have 2 versions of the image, one normal and one desaturated and with luminosity increased (or something like that, to give the impression of "transparency").
Now you create a div with the image as background and on mouseover you switch background and add the text.
On mouseout you revert the changes.
EDIT: Of course in practice you will dynamically assign the images name (e.g. with PHP), but that's another story. You may even automagically generate the "transparent" image by using GD libraries I guess.
A little example:
CSS:
.squareImg
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100.jpg");
}
.squareImgOver
{
display: block;
width: 100px;
height: 100px;
background-image: url("100x100transp.jpg");
}
HTML
<div id="mydiv" class="squareImg" onmouseover="writeText();"
onmouseout="eraseText()"></div>
JS
function writeText()
{
var d = document.getElementById("mydiv");
d.className = "squareImgOver";
d.innerHTML = "something here!";
}
function eraseText()
{
var d = document.getElementById("mydiv");
d.className = "squareImg";
d.innerHTML = "";
}
</script>
I suggest using jQuery as it's easy to say "mouseover" triggers another thing to show up.
I am displaying an HTML page within another HTML page depending on which link is selected using the following function:
function loadProject(sel) {
var url = sel[sel.selectedIndex].value;
if(url) {
document.getElementById('projectContainer').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="'+url+'"><\/object>';
} else {
document.getElementById('projectContainer').innerHTML = "Please select a project.";
}
}
And, I have a div tag inside the HTML with the id of projectContainer. This works, except for the fact that a vertical scroll bar is always shown no matter what I do to remove it. (It shouldn't be - even if I put nothing into the object, the vertical bar is still shown.) I have tried to edit the CSS in the following:
object {
width: 100%;
border: none;
overflow: hidden;
}
but that is not accomplishing what I'm looking for. Any suggestions? Thanks.
Using an <object> is new to me but very similar to an iframe, I suppose: It means that there is a document body that is separate from the surrounding document.
You need to declare overflow: hidden for the body inside the document you are embedding.
overflow: hidden won't work for content inside an iframe/frame/object. You are going to need to edit the CSS of the pages being rendered in the object tag. Also, I recommend you DO NOT do this, as you don't know if I have my browser set by default to have forced huge text due to bad sight or something similar, which would make the scrollbar unusable/hidden to me, hindering usability. Just don't do what you are trying to do.
make it overflow: auto; it works!