I want user to be able to print a whole page with highcharts control in it with standard browser's Print functionality. But control is being cut off.
I wrapped control in .chart-wrapper div and try to set fixed width for printing:
#media print {
.chart-wrapper{
width: 1000px;
}
}
.chart-wrapper{
width: 100%;
}
But it does not work, and printed page looks like this:
If I set .chart-wrapper width to 1000px outside of #media print block chart will have 1000px width both on a page and printed page, but I need chart to take all width of non-printed page.
So how can chart be displayed with 100% width on non-printed page and with 1000px on printed page?
This worked for me.
<script>
(function() {
var beforePrint = function() {
chart = jQuery('#graphArea').highcharts();
chartWidth = chart.chartWidth;
chartHeight = chart.chartHeight;
chart.setSize(670,chartHeight, false);
};
var afterPrint = function() {
chart.setSize(chartWidth,chartHeight, false);
chart.hasUserSize = null; // This makes chart responsive
};
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
} else {
afterPrint();
}
});
}
window.onbeforeprint = beforePrint;
window.onafterprint = afterPrint;
}());
</script>
How it works: Detect 'before print' event, resize chart to 670px (a reliable width to print A4), detect 'after print' event and resize chart to original size.
Credits go to: TJ VanToll for detecting print event function, the people on this thread for highcharts resizing functions and this answer for suggesting the 670px.
Have you tried setting the screen width inside a #media screen css block ?
#media print {
.chart-wrapper{
width: 1000px;
}
}
#media screen {
.chart-wrapper{
width: 100%;
}
}
Related
I've got a parent DIV. Set with. I then have a inner DIV which is overflow-x: scroll.
It all works perfectly. But I want to display a message ONLY when scrolling is needed.
Is there a CSS or JAVASCRIPT method which can pick up on this without using libraries such as jQuery or Bootstrap?
Look for when I div is wider than the other...
function myFunction() {
var x = 0;
var parentWidth = document.getElementById("myDIV").clientWidth;
var x = document.getElementById("thisDIV").querySelectorAll(".awiderDIV");
if (x[0].clientWidth > parentWidth){
document.getElementById("scroll").style.display = "flex";
} else {
document.getElementById("scroll").style.display = "none";
}
}
When the user scrolls the website downward and reaches a certain point, I want it to trigger a certain behavior. Example could be a change in text position.
Here's an example of what you are describing using javascript:
function winScroll() {
if (window.pageYOffset > 1000) {
window.alert('You have scrolled down the page more than 1000 pixels');
}
}
window.addEventListener('scroll',winScroll,false);
body {
height: 4000px;
}
<h1>Keep scrolling down...</h1>
How can I prevent a div which contains a long list of items from expanding the page height. I want the div to take up the entire screen but no more so that it doesn't push the footer down.
Set an specific height for the div container, and also set overflow-y with auto in order to show the scroll bar only when the content of the div is larger than the height set in the container. Like this:
.container {
height: 500px;
overflow-y:auto;
}
Without js, it is not possible because your page can be viewed in different resolution. Different resolutions means different height. Matter of fact, you may want that behaviour when user resizes the browser window as well, am I right? So first, find out the height of the browser, subtract the height of the footer from it, and set this height to your container, which I believe you want to make scroll able on yaxis. That will solve the problem. All these tasks are pretty simple and you can do it by little googling.
Use JavaScript/jQuery for this:
jQuery Solution:
<div id="content-div">some content here</div>
$(document).ready(function() {
var height = $(document).height();
height = height - (your footer height);
$("#content-div").css({ 'max-height' : height.toString() });
});
Standard JavaScript solution:
<div id="content-div">some content here</div>
function myfunction () {
document.getElementById('content-div').style.height = getDocHeight() + 'px';
}
window.onload = myfunction();
document.getElementById('content-div').style.height = getDocHeight() + 'px';
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}
Also, change CSS to:
#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }
Long question: I have seen on Facebook that a single popup window (like those when you opens a question from someones feed) can affect the scroll behavior so it don't scroll the main content but only the content in the popup window according to the height of it, of course. How can I do something like this?
Short question: How can I make the scroll "focus" on the contents height in the welcome DIV?
I've made it this far: http://jsfiddle.net/y3qV5/506/. I hope you understand what I mean :)
Thanks in advance.
You can add overflow: hidden to the body.
http://jsfiddle.net/y3qV5/520/
body.freeze { overflow: hidden; }
$('#pop').click( function() {
$('.welcome').fadeIn();
$('body').addClass('freeze');
});
$('#close').click( function() {
$('.welcome').fadeOut();
$('body').removeClass('freeze');
});
Old answer:
http://jsfiddle.net/y3qV5/519/
//bind on show
$('.welcome').fadeIn().bind('mousewheel DOMMouseScroll', function(e) {
console.log('scroll');
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
console.log('prevent');
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});
//unbind on close
$('.welcome').fadeOut().unbind('mousewheel DOMMouseScroll');
I'm running into an issue with the ModalPopupExtender when displayed on a small screen device. The modals height does not rescale to fit within the viewable window. Because it is centered the top and bottom of the modal gets clipped. Trying to scroll it only scrolls the underlying page not the modal. Anyone run into this or have suggestions on a fix?
You have to set Po-pup's panel to use scroll bars.
There is 2 way of doing this :
Set a fixed height (ex : 500px) and overflow to auto using CSS.
Compute the height pup-up using JavaScript, you still have to set the overflow to auto with CSS.
Here an example of a JavaScript function that set the height to 90% of the page's height.
function pageLoad() {
$get('<%= Panel.ClientID %>').style.height = document.documentElement.clientHeight * 0.9 + "px";
}
I decided to handle it using a series of media queries....
.sModalCnt {max-height:480px;overflow-y:auto}
#media only screen and (max-height:600px) {
.sModalCnt {max-height:380px}
}
#media only screen and (max-height:500px) {
.sModalCnt {max-height:280px}
}
#media only screen and (max-height:400px) {
.sModalCnt {max-height:180px}
}
#media only screen and (max-height:300px) {
.sModalCnt {max-height:80px}
}