barryvdh/laravel-dompdf page break content changes PDF - laravel

I am using this package barryvdh/laravel-dompdf is there any way to detect if content fits on the current page if not I want to put that content to the next page if it does not fit completly.

This is said in the documentation about the asked subject: https://github.com/barryvdh/laravel-dompdf
Tip: Page breaks
You can use the CSS page-break-before/page-break-after properties to create a new page.
<style>
.page-break {
page-break-after: always;
}
</style>
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>
Update, you can iterate through the items and call for example after 10 divs:
<?php $i=0 ?>
#foreach($array as $object)
<?php $i++ ?>
<!-- do something here | divs -->
if( $i % 10 == 0 ){
echo '<div class="page-break"></div>'; ....
}
#endforeach
You will have to determine yourself how many divs you can show to fill a page. An A4 paper for example has always the same height so you could make a guess of how many of your divs can be displayed on this page.

This is how you do it. Put this code on your CSS
<style>
.page-break {
page-break-after: always;
}
</style>
Then use
<h1>Page 1</h1>
<div class="page-break"></div>
<h1>Page 2</h1>

Related

DOMPDF repeat element in dynamic page

I am generating a report using dompdf. And tried repeating an element in a page where it could take up to 4 pages depending on the data. But it only created on the first page
Currently i have this html markup.
<html>
<head>
<style>
#page {
margin: .5in;
}
.footer{
position:fixed;
width:100%;
bottom:60px;
}
.page-3{
position:relative;
}
.repeat{
position:fixed;
width:100%;
top:10px;
}
</style>
</head>
<body>
<div class="page page-1">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-2">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="page page-3">
<div class="content">
<div class="content-header repeat">
This must repeat in all pages generated
</div>
<div class="content-text">
atleast 2~4 pages
</div>
</div>
</div>
<div class="page page-4">
<div class="content">
<div class="content-header">...</div>
<div class="content-text">...</div>
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
Let's say .page-3 generated 3 pages. But the .repeat is only seen on the first page inside .page-3
I tried using a background image for .page-3 but it still the same and is shown only on the first generated page.
I using the 0.8.2 version of dompdf.
If anyone is having a same problem as i have. I end up using a page_script.
Since i know the first 2 pages are static and the last page is static, I accessed the $PAGE_NUM and place a condition like this
`
$pdf->page_script('
if( $PAGE_NUM != 1 ){ // 1st page has no header
$text = "";
if( $PAGE_NUM == 2 ){
$text = "This is 2nd page";
}else if( $PAGE_NUM > 2 && $PAGE_NUM < $PAGE_COUNT ){
$text = "This is the page 3 until before the last page";
}else if( $PAGE_NUM == $PAGE_COUNT ){
$text = "This is last page";
}
// setup postioning, color, size etc for design
// use $text as header text
$pdf->text( $posX, $posY, $text, $font, $size, $color);
}
');
`
And removed all <div class="content-header">...</div> in the HTML markup

How to edit main page content Magento Enterprise

Magento ver. 1.13
I'm trying to edit the code and layout of an existing Magento website.
From asking a question yesterday i had learned that when first landing on the website you are directed to the page tagged with the "home" URL key and you can find the pages by looking in the "CMS->Pages->Manage Content"
I then looked at what the page with the URL key "home" contains..
<div>{{block type="dip/dip" name="dip" template="dip/banner-home.phtml" }}</div>
<div class="content-home">
<div class="tab-text">{{block type="core/template" name="tabs_home" as="tabs_home" template="page/tabs.phtml"}}</div>
</div>
so i looked at the first line and decided that it was loading the banner that is at the top of the website.
I then looked at the third line that is loading a block from the template aswell and it appears to be loading the file tabs.phtml..
I then located the tabs.phtml hoping that the entire layout of the page would be located there, but i didn't find anything that seems of any use in there.
this is what the page contained..
<SCRIPT type="text/javascript" src="<?php echo $this->getSkinUrl('js/carousel.js') ;?>"></SCRIPT>
<div class="tabs">
<ul class="veiw-all-tab" id="navigation-links">
<li><a href="javascript:void(0);" class="slide-arrow-lft" ><img src="<?php echo $this->getSkinUrl()?>images/slide-left.gif" alt="" /></a></li>
<li>
<span id="newallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/view-all-products.gif" alt="" /></span>
<span id="featuredallproductspan"><img src="<?php echo $this->getSkinUrl()?>images/View-All-Featured-Products.gif" alt="" /></span>
</li>
<li><a href="javascript:void(0);" class="slide-arrow-rgt" ><img src="<?php echo $this->getSkinUrl()?>images/slide-right.gif" alt="" /></a></li>
</ul>
<div class="product-details-new-tab-content">
<ul class="product-details-new-tabs-horiz">
<li id="product_new_products" class="selected"><span><?php echo $this->__('New Products'); ?></span></li>
<li id="product_feature_products"><a href="javascript:void(0)" ><span><?php echo $this->__('Featured Products'); ?></span></a></li>
</ul>
</div>
</div>
<?php echo Mage::getBlockSingleton('catalog/product_new')->setTemplate('catalog/product/new.phtml')->toHtml(); ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('featured_block')->toHtml(); ?>
<script type="text/javascript">
var show_selector = new Array();
show_selector[0] = true
show_selector[1] = true;
//show_selector[2] = true;
function showNewProductGallery(counter){
selector = ".infiniteCarousel"+counter;
if(show_selector[counter])
{
jQuery(selector+" .jCarouselLite").jCarouselLite({
btnNext: "#navigation-links .slide-arrow-rgt",
btnPrev: "#navigation-links .slide-arrow-lft",
speed: 500,
easing: "easeinout"
});
show_selector[counter] = false;
}
};
</script>
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self=this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('selected')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
var counter = 0;
ul.getElementsBySelector('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
if (el==li) {
el.addClassName('selected');
// Added by Zeon
if (el.id == 'product_new_products') {
$('newallproductspan').show();
$('featuredallproductspan').hide();
}
if (el.id == 'product_feature_products') {
$('featuredallproductspan').show();
$('newallproductspan').hide();
}
// End
contents.show();
showNewProductGallery(counter);
} else {
el.removeClassName('selected');
contents.hide();
}
counter++
});
}
}
new Varien.Tabs('.product-details-new-tabs-horiz');
</script>
I'm starting to run out of leads to follow to find out how to actually change anything about this page at all.. i can't seem to find anything.. I'm starting to wonde if its even possible.
Any and all help is appreciated.. even if you don't know the answer.. even if you just have a few tips for me, that would be great!
Your question is extremely broad, but I'll try to get you started.
A page in Magento is made up of blocks pulled together using Magento's Layout XML and then rendered by a combination of block objects and php templates (phtml). Describing all of how that feature works is a bit beyond the scope of a simple Q&A, but there are some good guides out there.
I'm not going to talk much about Enterprise because it's not FOSS, but I will say that the default theme is "enterprise", which means that you want to look in app/design/frontend/enterprise/default/layout/page.xml for a fairly global example of layout xml. You can see here that layout xml consists of handles which contain blocks, references and removes, which can contain actions or recur to blocks.
A block in layout xml corresponds to a block class in php, which can be identified by its type. Block type names are fully resolved to their block classpaths in Mage_Core_Model_Layout*.
An action in layout xml calls a method on the containing block. Its children are arguments (the xml node names are ignored for immediate children, but are array keys for grandchildren of the action node.)
A remove lets you ignore an existing block.
A reference allows you to update an existing block by firing off one of its actions or by attaching or removing child blocks.
If you just want to tweak layout, you can do that by dropping a local.xml file in the current theme package. That's a good way to get some practice with layout xml without a lot of the headaches of massive theming. If you want to create your own theme with extensive changes, read the Designer's Guide.

Using a background image with an 'H' tag

I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers

animate hover effect dissapears after filter in quicksand

I have a portfolio page with quicksand, which is working perfectly.
To add some more fun, I added prettyPhoto to it, working perfectly too.
But now I added a hover effect to the images. It is working, but when I sort with the filter, the hover effect has gone. I don't even see it working in Firebug.
Loading .js files -> jquery, quicksand, prettyphoto and then the hover function.
The php file (wordpress) looks like this:
<script type='text/javascript'>
$(document).ready(function(){
$("img").hover(
function() {
$(this).stop().animate({"opacity": "0.8"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
}
);
});
</script>
The rest of the php file:
<!-- #content BEGIN -->
<div id="contentport" class="clearfix">
<ul class="filter clearfix">
<li><strong>Filter:</strong></li>
<li class="active">All</li>
xxxx php magic xxxx
<ul class="filterable-grid clearfix">
xxxx php magic xxxx
<li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">
<?php
// Check if wordpress supports featured images, and if so output the thumbnail
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) :
?>
<?php // Output the featured image ?>
<a rel="prettyPhoto[gallery]" href="<?php echo $large_image ?>"><?php the_post_thumbnail('portfolio'); ?></a>
<?php endif; ?>
<?php // Output the title of each portfolio item ?>
<p><?php echo get_the_title(); ?></p>
</li>
xxxx php magic xxxx
</ul>
xxxx php magic xxxx
</div>
I hope you have everything you need, I already looked at those links, but I really don't know what to do ...
hover effect with quicksand plugin
jquery live hover
How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?
jQuery quicksand plugin with .click method
Thanks in advance !
Almost solved, for the jQuery, this code works. But the magnifying glass still doesn't work.
(function($){})(window.jQuery);
$(document).ready(function(){
$('#contentport > ul > li').live('mouseenter', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport > ul > li').live('mouseleave', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
I'm not sure if this will help with your magnifying glass issue, but after suffering with some false starts on this problem myself (namely QuickSand killing my rollover functions), I found the solution for me was to specify the selector inside the .on() function call:
$(document).ready(function(){
$('#contentport').on('mouseenter', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport').on('mouseleave', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
That seemed to solve the issue for me where simply using $('#contentport ul li').on('mouseenter', function() {... didn't work with the cloned elements.
Fingers crossed that's helpful.

Show only next and previous link in condeigniter pagination

I use codeigniter pagination class in my project it's works fine for me . But there is no option to tell class just show next and previous link ,
please see this image I want to show result paged plus I'd like to use to link for next and previous instead of numeric links and when the user click on the next button I'll use Ajax to retrieve request I don't have problem with Ajax calls in pagination in numeric links but I want to just show this to link :)
I don't think I can explain what I need very good so please see the image .
link text
Here is my view file :
<div style="height:200px; position:relative">
<div id="left_nav"></div>
<div id="right_nav"></div>
<div style="width:622px;margin:0 auto;">
<!-- Gallery Box1 -->
<?php foreach($last_profile as $l) : ?>
<div id="galleryBoxHolder">
<div id="galleryBoxContent">
<div id="ImageHolder">
<img src="dummy_data/1.gif" /> </div>
<br />
<p><?=$l->artname?> </p>
<br />
<p style="color:#1a4688">asdasd</p>
<p style="color:#1a4688 ; direction:ltr"><?=$l->length?> cm x <?=$l->width?> cm</p>
</div>
</div>
<?php endforeach ;?>
<div>
<?=$links?>
</div>
<!-- Gallery box1 :off -->
</div>
</div>
Please Check This url which is exactly what I need (#:title Customers Who Bought This Item Also Bought)
In version 2.0.3 Codeigniter - To show Next / Previous only you can add the following config settings:
$config['display_pages'] = FALSE;
$config['first_link'] = FALSE;
$config['last_link'] = FALSE;
You have a couple of options. The first is really simple, hide the thumbnails portion of the pagination module with CSS. The second options isn't too complex either: modify the pagination class to not include the thumbnails, and instead limit its output to the next/prev buttons. This should be somewhat trivial as well.
Line 199 of the System/Libraries/Pagination Library is where the "digits" are handled. This is where you will remove any appending to the $output variable:
if ($this->cur_page == $loop)
{
$output .= $this->cur_tag_open.$loop.$this->cur_tag_close; // Current page
}
else
{
$n = ($i == 0) ? '' : $i;
$output .= $this->num_tag_open.''.$loop.''.$this->num_tag_close;
}

Resources