i have data for create table and print it. The structure is like :
Title
Data
Sum
The title must not be at the end of page and the Sum must not be at the start of page when print it. Thant is why i made html table with Divs and give all size with mm. but i couldnt colculate when break page. couse in different computers height changes.
here is my javascript code for calculate and break page
$(document).ready(function(){
var mydiv ='<div class="page-break"></div>';
var i=0;
var h = px2cm($("#myinfo").last().height())*10;
var limit=297;
var g =0;
$('#content div.ptr').each(function(){
g=0;
h = h + px2cm($(this).height())*10;
var nexth=px2cm($(this).next().height())*10;
if(h>=limit-nexth)
{
if($(this).hasClass("ptrtitle")){
$(this).before(mydiv);
h = px2cm($(this).height())*10;
i++;
g=1;
}else{
if(String($(this).next().attr("class"))==="ptr ptrsum"){
if($(this).prev().hasClass("ptrtitle"))
{
$(this).prev().before(mydiv);
h = px2cm($(this).height()+$(this).prev().height())*10;
}else{
$(this).before(mydiv);
h = px2cm($(this).height())*10;
}
//h=0;
i++;
g=1;
}else{
$(this).after(mydiv);
h=0;i++;
}
}
}
});
});
function px2cm(px) {
var d = $("<div/>").css({ position: 'absolute', top : '-1000cm', left : '-1000cm', height : '1000cm', width : '1000cm' }).appendTo('body');
var px_per_cm = d.height() / 1000;
d.remove();
return px / px_per_cm;
}
here i add limit=297(for A4 height, it works good on some computers, but doesnt work good on others). doesnt work good means that, on the first computer it prints 40 row in one page, but on another some rows go to the next print page
How can i normally print data in all computers
Try adding css2 property page-break for your class page-break with #media print instead of calculating page break manually. Also different scale can be used specific to print if needed.
#media print {
.page-break {page-break-after: always;}
}
Related
I have a js code that adds margin-top to a row with a specific class name (page with id=3) . I would like this code runs before page load because now it instantly displays the row without margin-top and then add it. The row should be displayed with the margin-top already be added.
My site is on wordpress and i added the js script on head.
I have tried
window.onpaint = checkMargin();
but it did not work. Any idea?
This is my js code
<script type="text/javascript">
//sets margin-top in serv-col --- IF not mobile version
function addServMargin() {
containers = document.getElementsByClassName('serv-cont');
titles = document.getElementsByClassName('serv-col-title');
texts = document.getElementsByClassName('serv-col-text');
links = document.getElementsByClassName('serv-col-link');
col_pad = '0px';
if ( window.innerHeight > 800) { col_pad = '8.3vh'; }
for (var i = 0; i < titles.length; i++) {
title_height = titles[i].offsetHeight;
text_height = texts[i].offsetHeight;
style = window.getComputedStyle(containers[i], '');
cont_height = style.getPropertyValue('height');
cont_padd = style.getPropertyValue('padding-top');
links[i].style.marginTop = 'calc(' + cont_height + ' - ' +
cont_padd + ' - ' + col_pad + ' - ' + title_height + 'px - 1.48vh - ' +
text_height + 'px - 127px - 5vh)';
}
}
function checkMargin() {
if (document.getElementsByClassName('page-id-13')[0] && window.innerWidth > 900) { addServMargin(); }
}
window.onresize = checkMargin;
</script>
I don't think making it run first will solve anything. The first thing the code does is get the containers, titles, texts, and links... which it does by searching the DOM. It then loops through the titles array and does the adjusting as needed. If the script runs before any rendering is done, the DOM elements won't exist. It 1) won't be able to find them, and 2) can't loop through them because the array will be empty.
Actually even before that, it checks for the existence of the elements it's looking for, and the screen size. I think the only way to get it to work w/o making it look like an after thought adjustment, would be to use CSS and media sizing to set the styles in the first place.
As I know JS is executed as the script tag is reached by Browser html interpreter. So putting it in the head tag on the first position may guarantee that it strats first, but can't guarantee that it ends execution before page loads, because the page loads asynchroniously.
I am trying to emulate A4 page for a given HTML document. Basically I am trying to create very basic version of Google Docs for a custom document format. This document format has also footer,header and page margins. I have found this question which is very similar to what I am trying to achieve. However, no matter how I change the padding, it doesn't leave same space at the bottom as the top one. I attached the screenshot of a layout I am trying to achieve and my current HTML.
As you can see from the JSFIDDLE link, my content doesn't divide to 2 pages. If I change padding size, it leaves a weird spaces on top, but bottom one doesn't have much spaces as the top one.
JAVASCRIPT
<script type="text/javascript">
var max_pages = 100;
var page_count = 0;
function snipMe() {
page_count++;
if (page_count > max_pages) {
return;
}
var long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
console.log('Long: ' + long)
var children = $(this).children().toArray();
var removed = [];
while (long > 0 && children.length > 0) {
var child = children.pop();
$(child).detach();
removed.unshift(child);
long = $(this)[0].scrollHeight - Math.ceil($(this).innerHeight());
}
if (removed.length > 0) {
var a4 = $('<div class="A4"></div>');
a4.append(removed);
$(this).after(a4);
snipMe.call(a4[0]);
}
}
$(document).ready(function() {
$('.A4').each(function() {
snipMe.call(this);
});
});
</script>
JSFIDDLE
https://jsfiddle.net/t2u7v0mq/
I'm trying to cycle through numbered questions based on the exact percentage of what what the user has scrolled. My goal is to get this to work responsively.
I've created a sample fiddle so that you see what I'm trying to do...
$(document).ready(
$(window).scroll(function(){
var progress = $(this).scrollTop() / $(document).height();
//calculate the percentage of the total window that the user has scrolled
var questNum = progress * 4;
//multiply that by the total number of questions, to get the corresponding question number
if (questNum < 1) {
$('#question').text('Hello?');
}
else if (questNum < 2) {
$('#question').text("It's me...");
}
else if (questNum < 3) {
$('#question').text('I was wondering if after all these years...');
}
else if (questNum < 4) {
$('#question').text('You'd like to meet.');
}
else{
$('#question').text('*ring ring*');
};
});
);
*{
height: 500px;
font-family: sans-serif;
font-size: 1em;
font-weight: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="question" style="position: fixed">...</span>
</div>
In theory it seems like it should work, but I'm so lost. Thanks!
Some things to correct or change:
$(document).ready needs a function as its argument, so add function() { ... };
Single quotes need to be escaped with a backslash when they occur in a single-quoted string: 'It\'s me...' and 'You\'d like to meet.'
As you don't know on which window size your code will run, setting 500px as window height will only have the desired effect on some devices. Instead, set the height dynamically:
$('body').height($(document).height() + slackSpace);
... where slackSpace should be the number of pixels you want to have available for scrolling.
The space you leave for scrolling (slackSpace) should be greater when you have more questions, so it should be made dependent on the number of questions. You would need to decide how many pixels scrolling would need to be done before switching to the next question. You could therefore define slackSpace as follows:
var slackSpace = 5 * scrollPerQuestion;
...where the 5 would be the number of questions. That number should better be managed dynamically (cf. next point).
It will be easier to manage if you put your questions in an array. You then don't need those if .. else if ... else if ..., but can just pick the question text by its number:
var questions = [
'Hello?',
'It\'s me...',
'I was wondering if after all these years...',
'You\'d like to meet.',
'*ring ring*'
];
// ... once you have the questNum value:
$('#question').text(questions[questNum]);
This way you also have access to the number of questions: questions.length.
The calculation of the progress is not correct. The two parts measure a different aspect: the scroll top gives the top of the (visible) content, while the document height corresponds to the bottom offset of all content. The difference between the two will be at least the window height, so you'll never get a progress of 100% like that. It will probably even make some questions unreachable. Instead use this:
var progress = $(window).scrollTop() / slackSpace;
... where slackSpace is the value defined in the previous point.
Some browsers retain the previous scroll position when you come back to a page or refresh it. So you'll want to scroll the page to the top whenever the page loads.
The document has a default margin of some pixels at each side. This badly influences the calculation of the progress. To make things easier, set that margin to zero and apply some spacing to the question element itself so that the text still appears at a nice distance of the window borders (also give the question element a class name instead of an inline style):
body {
margin: 0px;
}
.question {
position: fixed;
padding: 10px;
}
Here is the code applying all these ideas:
$(document).ready(function() {
var questions = [
'Hello?',
'It\'s me...',
'I was wondering if after all these years...',
'You\'d like to meet.',
'*ring ring*'
];
// How many pixels to scroll before going to next question
var scrollPerQuestion = 50;
// Total space needed to scroll through all questions
var slackSpace = questions.length * scrollPerQuestion;
// Set appropriate document height for scrolling all questions:
$('body').height($(document).height() + slackSpace);
$(window).scroll(function(){
// Calculate the percentage of the total window that the user has scrolled
var progress = $(window).scrollTop() / slackSpace;
// Convert progress into question number
var questNum = Math.floor(progress * questions.length);
// Make sure the question number does not pass the maximum
var questNum = Math.min(questNum, questions.length);
// Display corresponding question
$('#question').text(questions[questNum]);
});
// Scroll to top on page load
$(window).scrollTop(0).trigger('scroll');
});
body {
font-family: sans-serif;
font-size: 1em;
font-weight: 100;
margin: 0px;
}
.question {
position: fixed;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span id="question" class="question">...</span>
</div>
... it will do the job in the snippet.
I've modified your code on
$(document).ready(function(){
and
$('#question').text('You\'d like to meet.');
Try this instead. It should work:
$(document).ready(function(){ //$(document).ready(
$(window).scroll(function(){
var progress = $(this).scrollTop() / $(document).height();
//calculate the percentage of the total window that the user has scrolled
var questNum = progress * 4;
//multiply that by the total number of questions, to get the corresponding question number
if (questNum < 1) {
$('#question').text('Hello?');
}
else if (questNum < 2) {
$('#question').text("It's me...");
}
else if (questNum < 3) {
$('#question').text('I was wondering if after all these years...');
}
else if (questNum < 4) {
$('#question').text('You\'d like to meet.');// $('#question').text('You'd like to meet.');
}
else{
$('#question').text('*ring ring*');
}
});
});//);
I have jquery script where you can click a left and right button and it will scroll horizontally to show more content.
The content that needs to be scrolled are in a div with a width of 1296px, but i want to set my jquery code to automatically get the width of the div and when you press on one of the left or right scroll button it will scroll exactly 1296px.
I want to do it this way because I need to later on optimize the design for all screen size and this would be the easier way.
My code:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item.length ); //End index
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=1296px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=18.5%'});
}
});
This Javascript should work:
var $item2 = $('div.group'), //Cache your DOM selector
visible2 = 1, //Set the number of items that will be visible
index2 = 0, //Starting index
endIndex2 = ( $item2.length ); //End index
var w = $("#group").width();
$('#arrowR').click(function(){
index2++;
$item2.animate({'left':'-=' + w + 'px'});
});
$('#arrowL').click(function(){
if(index2 > 0){
index2--;
$item2.animate({'left':'+=' + w + 'px'});
}
});
Check this fiddle. Basically we calculate the width initially to not do the same thing repeatedly and the reuse it whenever we need it.
Why not get the width of the visible container first, and then use that value later? Quick example:
var width = $('container').width();
And then during animations:
var left = $item2.css('left') + width;
$item.animate({'left',left});
As a note, innerWidth and outerWidth may be more beneficial than just width depending on how you've set everything up, so if values aren't quite right take a look at those documents.
I've created a fiddle that I think solves your problem:
http://jsfiddle.net/77bvnw3n/
What I did was to create another variable (called width) which on page load, dynamically gets the width of the container.
var width = $('.group-container').width(); //Container Width
This variable is also reset whenever the Next or Previous buttons are pressed (in case the window has been resized since the page loaded).
$('#arrowR').click(function(){
index2++;
//recheck container width
width = $('.group-container').width();
$item2.animate({'left':'-=' + width + 'px'});
});
Take a look and let me know if it helps.
Note: I replaced the 'Next' and 'Previous' images with coloured boxes in my Fiddle and I think you also had a typo in your code, should
endIndex2 = ( $item.length )
be changed to:
endIndex2 = ( $item2.length )
I know that you don't normally like doing things like this but I'm at University and have to do a project with several different stylesheets for the same page. I have been given JavaScript code to enable me to resize the page when the window is resized.
This code works however I am getting a peculiar effect on one of the stylesheets where the content div takes up most of the page when it shouldn't, this page has measurements in ems whereas my other stylesheets use px but I am supposed to use ems for at least one page. Although I could give my lecturer a reason for it being bigger I would prefer to fix the problem. The JavaScript code I am using is shown below:
function smoothresize() {
blockwidth = 59.4; /*This is in ems as per the lecturers request a well and is the size of the container div I created*/
minmargin = 0;
minsize = 10;
emwidth = (minmargin * 2) + blockwidth;
computeResize(emwidth, minsize, false)
}
function computeResize(wide, minsize, jerk) {
windowpixels = document.documentElement.clientWidth;
pixelsize = windowpixels / wide;
emsize = calculateEmsize(pixelsize, minsize, jerk);
b = document.getElementsByTagName('html')[0];
b.style.fontSize = emsize + "em";
}
function calculateEmsize(psize, minsize, jerk) {
if (psize > minsize) {
raw = psize;
}
else {
raw = minsize;
}
if (jerk) {
result = ((Math.floor(raw)) / 16);
}
else {
result = raw / 16;
}
return result
}
This is where I have Implemented the code in my XHTML:
<body onload="smoothresize()" onresize="smoothresize()">
I wouldn't be able to use jQuery as a solution to the problem either, I would only be able to modify the code given.
Any help in this matter Would be greatly appreciated
Check out jQuery's user interface plugin. It contains a "resizable" option; you ought to be able to add <script type="text/javascript">window.onload=function(){};</script> that loads the desired JQUI function upon page load.