Window.print() scaling of page content? - javascript

Hey all I am running into an issue trying to print out an image on a page. I'm using the simple Window.print() method in javascript to get this done however in the print preview the image doesn't maintain its border. I can mess with the margin settings in the print dialog that shows up but I can't ever get the whole border to show up.
Does the method autoscale images or something? I'm not sure why it would change the border setting on that image.

The window.print() method doesn't autoscale or modify document in any way. Consider adding a Print CSS (try this tool) to get this right for the printed format without affecting what's already being displayed on the screen.

Related

Chrome print preview breaking Highchart div

My problem is that I have a highchart in a div, using dotnethighcharts I am setting the height of the chart container div depending on the number of Y-Axis values. So what happens is the div expands and I scroll down the page to see all of the bars. This is working as intended in Firefox, but in Chrome when I select Print from the Highcharts options dropdown and exit the print preview window, the divs scroll ability breaks and I can't see the whole graph.
I have googled endlessly about this issue and have found nothing that might help. I wonder if there is a way to override the Chrome print preview functionality using javascript, so that when I click Print in the highchart the Chrome print window doesn't open.
Any ideas?
Thanks,
H

Lightbox 2 fully functional, want to make the viewed image full size?

I am building a site that has a small preview image of a map at 281 x 348. I wanted to make a way to click the image to see it full size, which would be very zoomed in, at the original image size which 1066 x 1600. However, I wanted to get fancy and make the image pop up within the same window, dimming the page behind it.
So I got Lightbox 2 to fully work, and the image displays as a popup, but it is pretty small. I want to have it large and, what I'm assuming is the best option, is to be able to scroll up and down the image.
How should I go about doing this? Every code for Lightbox including the jquery I got directly from here.
I haven't tested in Lightbox2, but it looks like in lightbox.js there is an option named this.fitImagesInViewport. Try setting that value to false and see if it gets the result you're looking for.
Edit: I ran a quick test, and it looks like that should do it. You can take a look at the source for lightbox.js here, so hopefully the change in your code should be fairly trivial.

WebPage Prints in two print pages

I want to print a page on my website via javascript, but it prints in two pages instead of one. What should I change?
All my CSS is inline.
window.print();
Here is my HTML: JSFiddle
Its only table based, but it still is not working. There is no height assigned to it.
A screen has 72ppi, creating things in HTML sticks to this rule as it is on screen so the only thing you can really do is reduce the amount that's in your table or print-screen your table and print it as an image so you can re-size it.

Facebook likebox - css issue

I am having issue with the facebook like box. The stream isn't displayed correctly. So i wonder if there is a way so that i can customize the the css. I just need to add float:left to a div and it will all be working but i am not getting a way to do this.
If anyone can guide me so that i can have the desired result, that would be awesome.
You can check the current look of the like box Here. If you just scroll down you can see the texts are not displayed correctly.
I tried to design with js and css too but couldn't get it to work.
If you want the text on the right to display properly, you simply need to change the width from 395 to about 480. Or, are you trying to have the text on the right display below the image? You won't be able to handle that unless you are able to manipulate the source of the iframe -- or use JS after the iframe is loaded.

Pulling data-caption from image with Elastic Image Slideshow, and display it on the page

I am using the Elastic Image Slideshow script, and would like to add data-caption text for each image, then display the text of the currently shown image into a div, outside of the slideshow (basically in a different section of the page.)
I found this script, to work with jQuery cycle, and tried to modify it to work but I am not having much luck.
Ok, I found this fiddle: http://jsfiddle.net/Snfst/6/ and modified it down to this:
$('img').hover(function(){
$('#caption').html($(this).data('caption'))
});
Question now is how do I get it to load without having to hover over the image, and only show the data for the currently shown image?
The page that I'm trying to make this work on might better show what I'm trying to do:
http://diguiseppi.com/Brad/Andy/portfolio-web-design.html

Categories