I am using the PHP-phantomjs and follow the doc I can output pdf and img. http://jonnnnyw.github.io/php-phantomjs/
but I have problem with page break. when a charts in the end of the page,but overflowed, it will be split in another page,like the capture below:
I found some advice:
<div id="main" style="page-break-inside: avoid;"></div>
But it doesn't work, or maybe I get it wrong.
And if it is the solution, that means I have to write this in every element of html? Sounds not good.
Here I found some solutions on github. As I understand PhantomJS has bug whith scales the page. Try to add to body:
body { zoom : 0.75 }
Related
I have a follow up for the question answered on this link:
ckecked element number in :nth-child css rule
The answer is just what I'm looking for but I can't figure out how to set the first Tab as default when the page loads? In the above link it is said that: "you may call the page with the hash #section1". Can anyone perhaps show me how to do this in code? I have been trying for a long time but can't seem to make this work.
Thanks a lot in advance!
In pure-CSS solution involving :target, you anyway need JS to go to URL with corresponding hash (e.g. location.hash = 'content1').
It's generally more flexible to show all tabs by default (incl. when JS is disabled), and hide/show/switch tabs with JS.
The people that suggested "you may call the page with the hash #section1" refer to the URL: if your page is http://www.yoursite.com/yourpage simply navigate to http://www.yoursite.com/yourpage#content1 (content1 because is the id of the first section in the example you provided).
Personally I don't like this solution because it's not flexible and maintainable but nevertheless it works for your simple example.
I'd go for a js based solution: at the begin I'd show only the first section and on click I'd hide all and show only desired one.
Check this (HTML + CSS + JS with jQuery).
HTML:
The same you provided.
CSS:
section { display: none }
section:first-of-type { display: block; }
JS:
$('a').click(function(){
$('section').hide();
$($(this).attr('href')).show();
});
Of course you don't need jQuery to do this but it was faster to write for me :)
Let me know if this was useful.
Can anyone tell me how to tell Github, that I want to see code reviews on Pull Requests in full screen width. Code lines are often longer than the area provided by Github and there is a lot of unused screen real estate.
Is there a setting in Github or a Chrome extension or Tamper Monkey or something like that.
Use Stylebot chrome extension
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en
I use my own style for my favourite websites, I love it.
Plus point is that you can use the styles created by other peoples also. Someone might have already done the things you need there. Or else you can modify on your own.
I have few CSS rules for you,
.repository-with-sidebar .repository-content {
width: calc(100% - 50px);
}
.container {
width: 90%;
}
Github's CSS has changed, so the new styles should be:
.container-lg {
max-width: inherit;
}
You can create a shortcut in your browser to automatically apply this style:
javascript:(function(){var a=document.getElementsByClassName("container-lg")[0];a.style.max-width="inherit";})();
There's a class on the body called full-width for that, so all that's needed currently is:
document.body.classList.add('full-width');
This can also be added as a bookmarklet:
javascript:(function(){document.body.classList.add('full-width');})();
Don't know why the OP said it's not a problem anymore, if you're doing a code review of your own work you won't be comparing it against another in side-by-side view.
Fix for full screen:
Inspect element on the white space to the left of the code
You'll be brought to a tag, expand this
Click on the 3rd div child of 'main'
Scroll down through the css on the right hand side until you find ".container-xl"
Untick this and you'll get the code full screen
If you want to you can write a console script or use one of the plugins mentions above but I find this method the simplest to remember and apply on anyones machine.
This is no longer an issue after GitHub introduced side-by-side code review. That really works well.
I've got a template designed to transclude content into the mainspace from a page in another namespace; it's used to aggregate a large number of pages into a single table. Its basic structure is this:
Template:Paget
<div class="plainlinks">
<span style="font-weight:normal; font-size:85%;">[[{{fullurl:{{{1|}}} {{{2|}}}.{{{3|}}}}} {{{2|}}}]]</span> {{#if: {{{blank|}}} | [No text] | {{{{{1|}}} {{{2|}}}.{{{3|}}}}} }}
</div>
So when you enter {{paget|page:cod.icon. 393 I|100r|jpg}} it transcludes the content of Page:Cod.icon. 393 I 100r.jpg and also labels it with a link back to that page that opens in a new tab. Very simple.
Aggregation pages are often constructed before all of the content exists, and in that case the template produces a redlink in place of the page content. I want to change this behavior so that it simply displays nothing when no page exists.
There are three main solutions, an {{#ifexist}} function, a {{#dpl}} function, and an {{#ifeq}} function comparing the output to a redlink url. All of these are unworkable for various reasons, but mostly because they slow the page loading way down (sometimes we're transcluding thousands of one-paragraph pages).
So I turned to a CSS solution, and created this rule in Mediawiki:Common.css:
.hidden-redlink > a.new,
.hidden-redlink a.new {
display: none;
visibility: hidden;
}
Then I added the class to the template, i.e. <div class="plainlinks hidden-redlink"></div>. This produced no result. I also tried wrapping just the transcluded portion in a <span class="hidden-redlink"></span>, and just adding the class to the aggregation table itself, but those also failed to produce any result. Wrapping it directly in <span style="display:none;"></span> hides the link, but obviously also hides the transcluded content.
I've rejiggered the CSS rules and class assignment every way I can think, but come up empty. Is there some piece of the puzzle I'm missing?
MediaWiki: 1.21.2
PHP: 5.3.10-1ubuntu3.9 (apache2handler)
MySQL: 5.5.29-0ubuntu0.12.04.2
Well, I tried doing something similar, getting a redlinked page through transcluding an uncreated help page by doing {{help:doesn't exist}} inside a div with class="hidden-redlink" and the following CSS worked to hide the red link:
.hidden-redlink a.new {
display:none !important;
}
To be honest with you, I don't quite understand why you are using such a long piece of code to get your transclusions, but yet again I don't recognise that namespace you're getting your code from, so I probably just don't use the software to the level of complexity you're pushing it to. Are there any problems with transcluding using {{namespace:pagename}} (obviously changing the words namespace and pagename to the namespace and page name respectively) instead of your current long piece of code which might be throwing things out of whack?
I am trying to implement a js accordion I found and I'm having problems with it. The titles are supposed to cleanly slide up to the top of the page and drop the content below. That is not what is happening. There is some obvious jumpiness going on when you look at it. It's not smooth at all. I don't know much about js so please explain your answers carefully. Thanks so much!
http://imip.rvadv.com/accordion.html
EDIT:
After replacing the js with the default file from the site I got it from, nothing changed. Here is a jsfiddle for it
http://jsfiddle.net/imakeitpretty/ruwjn/
Check this: http://jsfiddle.net/luissanchezm86/ruwjn/4/
The problem wasn't the .js, and you don't have to write it all on jsfiddle, since it's JQuery UI, you can simple check it to include it, if it's another external .js, use it as a resource, check fiddle's documentation for that.
Besides that, the other problem was your CSS markup, you had a lot of duplicated classes in that fiddle, it was a bit of a mess.
The main problem with the jumping was the:
.st-accordion ul li.st-open > a{
margin-top: 70px;
}
I just commented that margin-top: 70px;, and it fixed 75% of the problem, I recommend you to use the css that I arrange on the jsfiddle.
Hope it helps you!
UPDATE
Now, if you want to scroll all the way up like http://jsfiddle.net/luissanchezm86/ruwjn/5/ you need to make the body higher on height:
body {
height: 2000px;
}
After looking at your code, you appear to be using this plugin:
http://tympanus.net/codrops/2011/10/12/flexible-slide-to-top-accordion/
If you go to that page, it has the javascript options you need to control the animation speeds, as well as a working example which is more smooth than yours.
I have an HTML report, with each print page contained by a <div class="page">. The page class is defined as
width: 180mm;
height: 250mm;
page-break-after: always;
background-position: centre top;
background-image: url(Images/MainBanner.png);
background-repeat: no-repeat;
padding-top: 30mm;
After making a few changes to my report content, when I call abcPDF to convert the report to PDF, suddenly I'm getting a blank page inserted after every real report page. I don't want to roll back the changes I've just made to remove this problem, so I'm hoping someone may know why the extra pages are being inserted.
I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page. So I used the following code to eliminate the last page:
MyDoc.Delete(MyDoc.Page);
This however lead to a different kind of a problem. On development server, which has IE 8 I get an extra blank page and on production where I have IE6, I get no extra blank page. So I have emailed the support team at websupergoo to show me a way to look for a blank page. The idea is to iterate through a pdf and identify all blank pages and delete them using above logic.
And I second Jakkwylde's opinion. Websupergoo folks are extremely helpful and prompt in responding. I had another problem getting ABCpdf to work under 64 bit and had spent almost a day trying to figure it out. They provided me multiple scenarios which I could try out. Their support was right on the money and I got my app up and running in minutes.
protected void RemoveBlankPages(Doc pdf)
{
for (int i = pdf.PageCount; i > 0; i--)
{
pdf.PageNumber = i;
//get the pdf content
string textContent = pdf.GetText("Text");
//delete the page if it is blank
if (string.IsNullOrEmpty(textContent))
pdf.Delete(pdf.Page);
}
}
I've found abcPDF to be strange and unpredictable. That being said, what may be happening is that the combination of the page size and page-break-after may be the culprit. Reduce your page height and/or remove the page break.
One thing worth revisiting is the validity of your HTML markup if you are using the AddImageUrl method. Instances where the rendered PDF is not as expected can result from bad markup, busted tags, etc.
For what it's worth, WebSuperGoo has excellent support and respond great when you encounter anomalies. Often they can advise a work around or provide alternatives to your implementation if you send them your source code.
Kush is correct in that "I have experienced the same exact problem. the empty page is due to the page-break-after: always; in the CSS. Not just ABCpdf but also the printed will spit out an extra page."
If a div has "page-break-after:always" IE will literally always start a new page, and if nothing is added it will just print blank. Firefox does not.
abcpdf uses IE8s rendering engine, and as such makes a blank page. For purposes of the OP, just using an explicit height should solve the problem, and the engine will insert the page breaks for you.
I am trying to solve a similar issue, where I can't set the height explicitly because sometimes the content may take 2 pages. (Each page corresponds to a person, and each person should start on a new page when printed). I emailed abcpdf as well to see if they have a hack fix to detect the empty page, but was curious if anyone knows how to fix the underlying problem and css hack IE8 so as to make it not print the final page if empty. I'm guessing it's not possible, but wanted to make sure I'm not missing something obvious.
The AddImageURL() method of ABCPDF is loosely bind method which doesn't render html tightly within required area which causes new blank page.
try to use AddImageHTML() method to convert your desired HTML into PDF..
Doc theDoc = new Doc();
theDoc.Page = theDoc.AddPage();
int theID = 0;
theDoc.SetInfo(0, "CheckBgImages", "1");
theDoc.SetInfo(0, "RenderDelay", "5000");
theDoc.HtmlOptions.Engine = EngineType.MSHtml;
theID = theDoc.AddImageHtml(HTML);
while (true)
{
if (!theDoc.Chainable(theID))
break;
theDoc.Page = theDoc.AddPage();
theID = theDoc.AddImageToChain(theID);
}
for (int i = 0; i <= theDoc.PageCount; i++)
{
theDoc.PageNumber = i;
theDoc.Flatten();
}
theDoc.Save(HttpContext.Current.Server.MapPath(Path));
theDoc.Clear();
It will always give accurate results.
To avoid page breaking in the last page, I did something like this and it worked.
I made sure that the last page didn't have the page-break-after: always, this can be done with any templating or front-end framework like angularJS, but for this example I use blade templating (but any php will do...)
#if ($last_page)
<div class='footer last-page'>
#else
<div class='footer'>
and then I have this in my style sheet
.footer {
page-break-after:always;
}
.last-page {
page-break-after:avoid;
}
We had the same issue in production environment only but not in test environment. We only had page-brek-after used at multiple places in the html.
Fix for first issue: I spotted the issue by removing the page-brek-after attributes one by one and this finally gave me the DIV section where page break was causing by some of it's element.
I fixed the height of each elements inside the DIV and this finally fixed my issue without removing the page-break-after attribute.
Fix for similar issue: If you have a custom hard coded footer, make sure to check by increasing/decresing it's height and margine.
I had this same thing happen with html to pdf where abcpdf was adding a blank page with nothing but a footer on it before the rest of the content (as page 1). This would occur when my content included a table surrounded by a div where the div height was height:auto followed by a page-break-before: always. It only happened when the table data contained "", string.Empty, or a single line of text. If the table data contained 2 lines or more of text, the issue did not present.
I solved it by adding a min-hight: 1in style to the div that had height: auto.