I am building an Advanced HTML/PDF Template in NetSuite to be a check with voucher (check on top). Everything works well until the number of voucher items overflows on to the next page. The table logically resumes at the top of the subsequent page. But because of the check stock we are using, it would ideally resume 1/3 of the way down the page on the next "stub" section.
If I was only printing 1 check at time, I could use a header that doesn't apply to page 1 to push things down on page 2 and be good. But when multiple checks are printed at once, this doesn't work.
I also attempted to add a large, blank thead row on the voucher table to push the table down when it resumes on page 2. The check itself is absolutely positioned on the page. So I also was planning to absolutely position the voucher table so they overlap on page 1 and the proper space is created on page 2. But this did not work because I can't make the table absolutely positioned.
<body> kid can't be absolute: Ignoring <table class=[...
I'm guessing there is likely a simple solution or otherwise creative workaround.
Resetting the page number on the page break for each individual check ended up being my answer.
<pbr pagenumber="1" />
https://bfo.com/products/report/docs/tags/tags/pbr.html
<style>
#page2,
#page3,
#page4 {
header: blankheader;
header-height: 260pt;
}
</style>
<macrolist>
<macro id="blankheader">
<div />
</macro>
</macrolist>
Related
please help me with this problem:
there is such a site, I need the portfolio to have accordions in a column, but the block itself opens them as a checkbox (one is open, the other closes) and I need to be able to add an infinite number of such accordions, and they occupied only the space of the block in which are. while not going beyond the scope of other blocks, and with the possibility of scrolling the list of accordions. how can this be solved?
Link to my github project
I tried to change the values in the "Panel" block for automatic height adjustment, considering that the next accordion is lower than the previous one
I'm building a program that scrapes a website. It looks at the entire website and takes only the header and footer navigation menus from that website, then inserts new html tags (div, p, table, etc.) in between the header and footer menus.
I'm looking for some ideas on how to strip only the header and footer nav menus, as well as add code in between the two.
I'm using HTML Agility Pack and have worked on a few methods.
Method 1:
In most cases, the header and footer navigation menus are mostly
links, and have very little text. I used a threshold variable that
was a ratio of text to links. If the ratio text:links for a node is
less than the threshold, the node would be considered a menu node, and
it would be saved. Any node whose text:links ratio was greater than
the threshold value would be removed.
Method 1 worked for some sites, but not for others, so I ditched it.
Method 2:
I searched each node for an id or class attribute that included "nav"
or "menu". "n","a","v", "m","e","n","u" could have been upper case or
lower case, and "nav" and "menu" could have been surrounded by any
combination of characters. That way, it would include id's and
classes such as "bottomNav", "navRight1", "LeftMenu2", etc. If the id
or class contained either "nav" or "menu", the node would be saved.
If the node's attributes did not contain either of those terms, or any
of the node's descendants did not contain either of those terms, the
node would be deleted.
Again, method 2 worked for some sites, but not for others.
For the sites where either of these methods worked, I still wasn't able to put new html code in between the two menus, because I had no way of telling where the header menu ended, and where the footer menu began.
I'm just looking for other ideas on how to scrape only the header and footer navigation menus from a website, and insert new html code in between the two.
Other than looking for specific elements or element classes (header, nav, ...), you can try to look at the problem in a different way:
first, fetch and parse two (or more) pages from each website, preferably checking that they vary substantially (but not totally);
then, do a diff (of the DOM, preferably), and retain only the common structure.
This common structure should consist mostly of headers, footers, navbars and other elements more or less constant across each website.
A final step might be to look in this common structure for small gaps caused by headers/footers that vary depending on context, as opposed to large gaps caused by different (main) content, and scrape their possible values from the largest set of pages you can fetch from each website.
So here is my challenge. I need to build a printer-friendly table in html/css that needs to meet a few requirements.
a) I am going to have an html table, with each row having adjustable heights depending on the amount of text in each row. A row cannot be "cut-off" at the end of a page and the start of the next page.
b) There is no defined number of rows per page, this needs to be flux depending on how many can fit.
c) every page must have the same header of a defined height.
d) The page must be printable on 11x17 paper with half inch margins.
Basically I am not sure how to approach this. I have built a normal in html - but when printing the rows get cut off. I also am not sure how to figure out the "header" on every page requirement.
Any ideas on the best way I can approach this challenge?
Thanks!
I've developed a static advert ticker that sits at the bottom of the window. This is in an <iframe> to make it easier for other people to place the unit on their sites. Another <span> around the <iframe> keeps it fixed to the bottom of the screen. The script has a help window which is within a tag - within the <iframe> and uses the visible / hidden property to show or hide text.
Now since the code is in an <iframe>, the help text would not appear on main window. To get around this, I made the <iframe> larger,and set it to transparent.
Visually, everything is fine. When the user clicks a button on the ticker, the help menu appears over the data in the background. However, I've just discovered that if there is a link on the main page that passes under the <span><iframe> section, it cannot be clicked. I've tried CSS pointer-events, but can't get that to work, (links within the <iframe> must also remain clickable)
Not sure which is causing the "fault", ie the <iframe> or the tag around it. Is it a security thing to stop "click jacking" (??) or more to the point, is there a work around.
If push came to shove, I COULD reduce the size of the <iframe> and use a javascript pop-up window to display help text, but those windows show the URL and status windows, and are not exactly elegant!
Here is the code before anyone asks:
This span covers the entire screen to the height of the underlying <iframe> I did this so the data could be centred
<span style="position:fixed;bottom:10px;display:inline;width:100%">
<center>
<iframe src="http://www.xxx.com/cgi-bin/ticker/run_tick.pl?s=xzy" frameborder=0 align=top width=800px height=330px marginwidth=0 marginheight=0 hspace=0 vspace=0 scrolling=no allowtransparency=true></iframe>
</center>
</span>
Set a height to the span the same as the iframe (330px)
Let me know how that goes
Oh boy, what FUN I've had getting this to work!! (Twelve hours on Wed 23rd, and about three hours today)
Originally, I had an <iframe> that filled virtually 3/4 of screen, (so that I could display the help window to uses in a '' rather than use a modal popup. But, for security reasons, the browsers will not let you click through text that covers links underneath.
I had to literally redesign the whole layout.
Now, I have the help file in a separate <span> window which has its visibility set to hidden till user needs it. But that still left the ticker code at the bottom.
I had to divide that into three <divs> one on either side of the main ticker. But again, the ones on the side are effectively masking the page underneath, so I had to set both <divs> so that they used "pointer-events:none" meaning the <div> was not clickable, and mouse events would pass through to the code underneath. The mid section for the ticker was set to the opposite, namily "pointer-events:auto" so that the TOP window got the clicks, but not the page underneath.
Next problem: Because the ticker shows graphics that extend into the main text, that left a 1/2" area where clicks on main page couldn't be accessed. Another span was added to the code which covered the area with a transparent gif. When the user places their mouse over this graphic, a swap takes place and displays a semi transparent checkerboard. They can then read what this means in the help file.
Finally, when user's click the minimize button, the <div> holding the ticker code is hidden (giving accesss to all the links on the page) and ANOTHER <div> displays "Restore" graphic. When they click that, it gets hidden whilst the main ticker window - and the two <divs> on either side are made visible again.
And it was only meant to be a simple script!! (Oh, and don't check the website or my blog 'cos I won't be uploading the changes till eve of Sat 26th)
I have a website where I want the following page to function - it currently works fine on a full page refresh (since each div is populated from a database) - but I'm starting to build in AJAX to update the database behind the page without the browser leaving the page. The following image shows what I want to achieve. Refreshing the whole page can be a bit slow due to the header information and item information might have a lot of images etc.
I can get it working OK by having my form submit button write out the results in each div area, however when a user returns to the page I want it to show the latest version of the page. Is there a way to change what my submit button on the form does (i.e. when pressed - refresh the "guess" and "guess_info" div areas of the webpage?
My AJAX/Jquery for the form is:
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
guess: {
min: 0,
number: true
}
},
messages: {
guess: "Please enter a valid guess.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
process.php just takes the form inputs (e.g. item_id, user_id, guess), and updates the database for new information.
I'm also having difficulties with the CSS side of things, my header and footer are generated by wordpress, however all the dividers detailed below are my own, (which i put inside the "content" divider.
I have managed to split the "content" into 3 columns, but I'm struggling to split my middle column into the divisions shown..
So my "content" divider is 900px, so I have the "middle" as 500px and each column as 200px.
So now I'm looking to divide up my 500px column into 3 rows (which can be as long as needed), first row one column 500px, second row 2 columns, say 150px (the thumbnail is 100px wide) and 350px, the final row would be split, say 100px, 100px, 300px. Can anyone advise me on this? I've tried following a lot of CSS tutorials, but I seem to struggle getting them to sit on top of each other!! :(
Regarding the submit button there are some ways of disabling the default of it.
The first one is
<form action="whatever" method="whatever" onsubmit="return myJSFunction();return false;">
Or, for keeping your code cleaner you can do:
<form action="whatever" method="whatever" onsubmit="return myJSFunction();">
For the last one you will need to add in your myJSFunction the following code at the start of it:
if(!event) var event = window.event //to prevent browser problems
event.preventDefault();
Remember that if everything works in your js function you need to return false. If you return true it might trigger the default call of your submit button.
Once you did this you should call your AJAX request and write/override your html in js.
Regarding the css I don't see why it doesn't work so I will give you a default solution (the following divs should be placed in your "middle" container):
<div id="item_info" style="width:500px; height:50px;background-color:green"></div>
<div id="description" style="float:right;width:350px;height:100px;background-color:blue"></div>
<div id="thumbnail" style="width:150px;height:100px;background-color:red"></div>
<div id="guess_info" style="float:right;width:300px;height:100px;background-color:black"></div>
<div id="item2" style="float:left;width:100px;height:100px;background-color:yellow"></div>
<div id="guess" style="float:left;width:100px;height:100px;background-color:pink"></div>
I tested this in my editor and it seems to work. Don't bother the colors I used them to get some visibility.
Sorry for the CSS being inlined but just copy the style attribute and put in in your .css page.
If you want each of your rows (the ones that are splitted) to have the same height as their neighbourgs you'll need to change the css a little bit and use some different tricks (but you will have to chose which one could have the biggest height).
Hope this helped.