I am using Dompdf to create invoices for an online shop.
If the list of articles exceed the available space on a page, it generates a page break and continues on the next page with a new thead as it is supposed to be.
What I need to do next is show an arithmetic carry (the sum of all previous articles) of the previous page(s) somewhere on top of the pages after a page break.
I am searching for a solution to find out the index of the tr after which a page break is produced.
I was thinking of attaching an invisible element with the current sum of all previous articles to each tr and then display only the correct elements according to the beaking tr elements' indices, but I don't know if this is the best way to do this.
Also I thought about css count which is working with Dompdf, but I wasn't able to find out whether I can make an element visible by the current number of a counter.
Just if it helps: I am generating the invoice document dynamically via Twig with an {{for ... in ... }} loop.
I appreciate any help! :)
Related
when i create via PHP a pdf using TCPDF, some times i get a last empty page body (so header and footer printed, but body empty).
It appened when i print different rows of text and the latest row is very close to bottom margin of my pdf...
When i output data into a file.pdf, for example, i get 3 pages...but text is not occupying 3 pages... it occupe only 2 pages (very close to bottom margin)... but TCPDF i don't know why, add 1 more useless page.
My idea is:
create my rows
after last row, add an empty span <span id="hidden_end"></span>
search inside the pdf: if I find "hidden_end" inside the last page, all is ok. I I find "hidden_end" NOT at the last page, the delete last page from PDF
But i don't know how to implement point 3.
Any ideas?
Hoping for some brainstorming here. I have a PHP app that submits a form and returns to a page with lots of columns and rows (scrolls in both x and y). Any ideas of how I might be able to get the screen to return to center on a particular ?
I'm open to just about any solution!
Thanks for the ideas!
You need to use CSS style ID's.
If you add #someTag at the end of your URL, the page will try to scroll to the matching ID. So, put unique ID's on your table Rows, and add the ID if the row to scroll to either to the redirect after the form, or the form action.
You can assign an identifier to the cell you want to focus on and use the following javascript:
document.getElementById("myAnchor").focus();
http://www.w3schools.com/jsref/met_html_focus.asp
I'm having trouble and I wanna ask, if it's possible to have column-based tables when PHPMaker generates tables for records? Because when I generate it only generates row-based records. Copy-paste the link below to URL to understand. I'm sorry I'm not knowledgeable in PHP that much. It's just very easy to make a complete application with this program and the only thing stopping me is the format of how it's shown. An example of how I wanted it to look like would be this one
I hope somebody answers! Thanking you all in advance!
That kind of column based view is not suggested as it has many flaws when we try to display huge number of records. Adding pagination or sorting feature is very difficult and not user friendly.
As you have so many fields you could try to group them into tabs by relevancy. Once you put them under different tabs they can be easily navigated and easily fit into row based structure.
Creating tabs is PHPMaker is very easy, on field configurations screen you will get Page No config next to each field. By default it set to 1 you can set required page number as per your choice. Once you done go to Table config of the table which is second tab available for each table. Scroll down to bottom and and click on 3 dots next to Page Labels config (Under Multi Page Config). This will pop up a screen where you can add captions for your tab.
Ive exhausted my amateur scripting skills and seeking help.
Here is my sites main index and the current working script with one set of adds randomly displaying on my home page.
http://blessone.netau.net/
Ive managed after alot of tries with different codes ive come across to come up with this.
divs = ['d1','d2','d3','d4'];
function hideDivs() {
for (var i=0; i<divs.length; i++)
document.getElementsByClassName('adbox');
}
function showDiv() {
hideDivs(); //hide them all before we show the next one.
var randomDiv = divs[Math.floor(Math.random()*divs.length)];
var div = document.getElementsByClassName(randomDiv).style.display =
'block';
setTimeout(showDiv,500); //set a delay before showing the next div
}`
Im trying to display a div randomly on my home page from a set of divs in "adverts/pop_left_ad.php"` Popular Products.
Works great!
But one problem. When i try to use.....
<?php include("adverts/pop_left_ad.php"); ?>
...twice on one page it doesn't give me two different random divs on my page, no matter where i place them. I am using different files for each set of divs that are than called upon randomly by their calling div.
I should point out im NOT sure how to edit the JS for my second inclusion. Do i only add a series of div ID's in there??? What elements do i change in the JS?
I have now learnt that the issue is my id setup and have changed that to a class setup.
So i need help making the additional changed to my JS to incorporate the Classes and so on.
Any help is greatly appreciated.
Many Thanks.
the issue appears to be that you are using id attributes for your divs. This is fine where there is only one copy of d1, d2, d3, d4 in the code, but if it's included multiple times, getElementById will have trouble differentiating between the different divs with the same id.
what I would do change the id attirbutes for each of d1 through d4 to class attributes (and do the same for the contents of each of d1-d4, e.g. make id="adTitle" into class="adTitle"), then wrap the set of ads in a div with a class attribute named something like "adbox"
from there, you modify your code to get all divs that have the adbox class, then loop through the interior divs with classname d1-d4 like you do currently. with jQuery you can do something like $('.adbox').each() which makes the looping dead simple, but you can also use document.getElementsByClassName('adbox') if you want to stick with pure JS
Screenshot mockup: http://tinypic.com/r/y2qex/5
Problem: I have a table that has 53 columns; one for each week of the year, plus one with the user name. It will have anywhere between 10 and 80 rows, depending on the number of users for each area.
The users need to be set a “flag” for each week, such as Annual Leave, Training etc.
I currently have a table, which has a select box in each cell. The problem is this works for 5 rows, but once I start getting 20+ rows, the browser wont open the page, because there are just too many select boxes.
Whatever new selections are picked must be able to be queried, so I can save them in my DB.
What I’m after are some generic ideas (i.e. not specific code) on how I can better solve this problem. Once I get a good idea, I’ll go off an work out the exact coding.
My ideas so far:
- Make all cells text only, with the current selection, then have an ‘edit’ option beside each user, which opens their row as a modal window which can be editted
- Make all cells have a “onClick” event, causing a dropdown list to be generated at the point of click
But I’d be keen to hear how other people might approach/solve this problem?
If the options are the same for many select boxes, you could consider using one datalist for all of them, this would be more performant, and I'm guessing allow you to have more per page. Unfortunately this is an HTML 5 feature, so it would not be backwards compatible with all browsers.
http://www.w3schools.com/html5/tag_datalist.asp
Other than that, you could consider pagenating your table if it gets over a certain number of columns. Or do like a tumbr thing, where more columns load via ajax if they scroll to the right far enough. You idea also should work.
You might want to look at using a calendar feature, I'm sure there's a ton of Javascript calendars out there. I also have had a lot of success lately using DataTables. You could use DataTables + jEditable to create a click to edit table representation, that when clicked gives you a select box, but otherwise shows only text.
Perhaps you could have a single hidden select box on the page and display it on a cell when clicked, and handle the result of the click by writing a data-attribute to the cell, and perhaps doing a simultaneous XHR?
You could also just have a bunch of hidden form elements, but that would be gross.
Implementation-wise, you could do it with a single event handler attached to the table, with each cell having data-attributes representing name and week.
Anyway, this should be performant, even though it would require an extra 20 or so lines of js.
Maybe something like this could work for you:
var td=document.getElementsByTagName('td');
for(var i=0; i<td.length; i++)
{
td[i].id='cellID_'+i;
td[i].onclick=function()
{
//make menu appear on this element id
}
}