Tcpdf - Enable Scrolling - php

Is there any class in tcpdf that make Page Display -> Enable Scrolling default options (When i open it in adobe reader), please help, i lost half of day on this. I found this class, but not what I need.
// set pdf viewer preferences
$pdf->setViewerPreferences($preferences);

I was looking for the same answer and your question actually put me on the right track.
From inspecting the TCPDF class, ended up finding the answer in the TCPDF_STATIC class, in the static method TCPDF_STATIC::getPageLayoutMode().
The correct function to use would be TCPDF::SetDisplayMode($zoom, $layout, $mode). For your purpose I'd suggest:
$pdf->SetDisplayMode('default','OneColumn');
OR
$pdf->SetDisplayMode('default','continuous'); // continuous not documented, although should work.
Possible values for those parameters are as follows (from the method's PHPdoc):
$zoomThe zoom to use. It can be one of the following string values or a number indicating the zooming factor to use.
fullpage: displays the entire page on screen
fullwidth: uses maximum width of window
real: uses real size (equivalent to 100% zoom)
default: uses viewer default mode
$layoutThe page layout. Possible values are:
SinglePage Display one page at a time
OneColumn Display the pages in one column
TwoColumnLeft Display the pages in two columns, with odd-numbered pages on the left
TwoColumnRight Display the pages in two columns, with odd-numbered pages on the right
TwoPageLeft (PDF 1.5) Display the pages two at a time, with odd-numbered pages on the left
TwoPageRight (PDF 1.5) Display the pages two at a time, with odd-numbered pages on the right
$modeA name object specifying how the document should be displayed when opened:
UseNone Neither document outline nor thumbnail images visible
UseOutlines Document outline visible
UseThumbs Thumbnail images visible
FullScreen Full-screen mode, with no menu bar, window controls, or any other window visible
UseOC (PDF 1.5) Optional content group panel visible
UseAttachments (PDF 1.6) Attachments panel visible
public function SetDisplayMode($zoom, $layout='SinglePage', $mode='UseNone') {
if (($zoom == 'fullpage') OR ($zoom == 'fullwidth') OR ($zoom == 'real') OR ($zoom == 'default') OR (!is_string($zoom))) {
$this->ZoomMode = $zoom;
} else {
$this->Error('Incorrect zoom display mode: '.$zoom);
}
$this->LayoutMode = TCPDF_STATIC::getPageLayoutMode($layout);
$this->PageMode = TCPDF_STATIC::getPageMode($mode);
}

Related

fpdf : increase size of footer and add multiple lines in pdf

I am using FPDF to generate a report.
I have a fairly large amount of data I want to put in my footer. i.e the name and signatures of three people
I would like it to be on multiple lines.
PROBLEM: It keeps on being pushed out of focus. Not to the next page buti cannot see it once it reaches near the botton of the page.
Also, if shown, it is shown once at the end of the page only...
How do I increase the size of the footer?
this is the code for my footer
function Footer() {
$date=date(' jS F Y ');
$this->Cell(-28,150,$date,10,0,'C');
$this->Cell(-190,150,$date,10,0,'C');
$this->Cell(-50,150,$date,10,0,'C');
$this->Cell(75,130,'The Village Market Representative',10,0,'C');
$this->Cell(195,130,'Betting Control and licensing Board Representative',10,0,'C');
$this->Cell(-55,130,'Witness',10,0,'C');
}
How would I do this so as to have it on every page and not have my footer pushed out of focus?
Try using setY() to set cursor location above the bottom of the page before writing out your cells:
function Footer() {
$this->setY(-30);
$date=date(' jS F Y ');
$this->Cell(-28,150,$date,10,0,'C');
$this->Cell(-190,150,$date,10,0,'C');
$this->Cell(-50,150,$date,10,0,'C');
$this->Cell(75,130,'The Village Market Representative',10,0,'C');
$this->Cell(195,130,'Betting Control and licensing Board Representative',10,0,'C');
$this->Cell(-55,130,'Witness',10,0,'C');
}
Most examples I see online utilizing setY() to set footer use (-15), but that seemed to always push the footer onto the next page for me, so I set the negative value higher. The negative value sets the Y position based off of the bottom of the page.

Wordpress: Show extra sidebar widgets based on size of adjoining content?

I'd like to be able to show or hide content in a sidebar based on the height of the adjoining content div, but i'm not exactly sure if/how it can be done.
For example, on the blog page of my current project (http://djryanmcnally.pixelworx.it/?page_id=18) I have two widgets in the sidebar (one for latest tweets, and one for latest music news) however, as you can see on this page, the content of the blog posts (all test posts...) are much longer than the height of the two widgets, and would of course, get larger as more posts are added. This leaves a certain amount of blank space below the last widget in the sidebar, which I would like to fill based on the height of the adjoining #content div.
Suppose, for example, I also wanted to put into the sidebar some other content divs, such as #latest-pics, #latest-mixes and #latest-events but only if the adjoining content was large enough to create space for them, how would I do that?
I thought about using inline styling with variables, such as: (Pseudocode)
$i = #content(height);
if $i > 500px { $display1 = 'inline' }
else { $display1 = 'none' }
elseif $i > 1000px { $display2 = 'inline' }
else { $display2 = 'none' }
elseif $i > 1500px { $display3 = 'inline' }
else { $display3 = 'none' }
.......
endif;
and using <div id="latest-pics" style="display:<?php $display1 ?>;"> etc...
But, I highly doubt that would be anywhere even close to doing what i want, but, y'know, thought process, etc! lol!
I could of course use a floating sidebar that moves down as the use scrolls, but it'd be a nice touch to be able to do this somehow!
Any thoughts?
p.s - excuse the sketchy code example, i'm typing in a rush as I have to go to work!
Thanks in advance! :D
This was mind bugling for me too ;) That's why I created a simple java script plugin that removes last widget or widgets from sidebar until sidebar height is equal as a content height.
This way you can add as much widgets as you want, and they will be removed if content is not high enough.
It works by default with Twenty Thirteen theme but you can use plugin settings to adopt it to any theme. It's called sidebarAutomizer and can be found at wp repository - http://wordpress.org/plugins/sidebarautomizer/
Definitely looks like a javascript kinda thing. You want a vertically responsive layout, which is close to impossible to do with pure php. The webserver loads the php code first then runs the javascript; meaning you can't reference javascript variables with your php.
Looks like your theme already has jquery installed so you might as well work with that.
In my opinion, I'd have all the divs on the side bar there but make sure they are all hidden (style="display:none"). Once the page has loaded and the content div is on the document, you can grab the height of the main content div on the left with
var h = $('#main').height();
Now the tricky part is knowing how the content in each of your sidebar widgets is going to be populated. You might want to put some limits on that to make things easier, or else you're going to require alot more post processing.
Once you know how you are going to handle the heights of you individual widgets, and what tier schema you want them to show in, you can show them as simply as
$('#widgetId').show();
Where '#widgetId' is going to be the id="" attribute on your div that you originally set to display: none.
So it would end up being something like
if(h > 100) $('#widget1').show();
if(h > 300) $('#widget2').show();
...
ect
If some of the widgets are too tall (say the widget2 is 500px usually) then you can set the height of the widget with javascript and handle the overflow however you'd like. You can use a overflow-y:scroll but that'd look pretty ugly, maybe just overflow:hidden, and make sure the height is at a consistently asthetic place for the widget.
I was going to do some commenting for suggestion; however, after some thoughts, I decided to go for answer area.
I think it is totally achievable. (Pseudocode)
set up sidebar area with fixed sidebar items with divs and define empty sidebar divs for other hidden content.
(empty divs for hidden content: ...)
Loop start: get total scrolled_height by jQuery ($(window).scrollTop() + $(window).height()).
get used_space_height including header and sidebar height
calculate the available_height by (scrolled_height - used_space_height)
see if next sidebar div height can fit into avaiable_height or not:
4.1. if yes, load next sidebar div => go to step 5.
4.2. if not. => go to step 6. end
load next sidebar div with ajax call to return content => go back to step 1.
Loop End.
Execute the above steps in javascript/jQuery by detecting that user stops scrolling.
Hope this helps.

load div only for mobile devices with javascript

Is it possible to load a div if a mobile is detected or if a resolution is lower than 641px?
I have different menus for desktop and for mobile. Mobile menu uses image svg sprite, but for desktop i don't want that svg image to load to save HTTP request.
I can hide the div based on media queries, but how can i at least prevent the image from being loaded, or load the intire menu div only for mobile?
What is the best approach to this?
You can prevent the image from being loaded in certain condition's
$(document).ready( function() {
if(yourCondition){
$("img").removeAttr("src");
}
});
https://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect
check above link, you can just use it in if else statement to show hide div on basis of device type
<?php
// Written By Adam Khoury # developphp.com - March 26, 2010
// PHP swapping CSS style sheets for target device layouts
// Make your index page of your site a .php file instead of .html
$styleSheet = "default.css";
$agent = $_SERVER['HTTP_USER_AGENT']; // Put browser name into local variable
if (preg_match("/iPhone/", $agent)) { // Apple iPhone Device
// Set style sheet variable value to target your iPhone style sheet
$styleSheet = "iphone.css";
} else if (preg_match("/android/", $agent)) { // Google Device using Android OS
// Set style sheet variable value to target your Android style sheet
$styleSheet = "android.css";
}
?>
above code is simply taken from http://www.developphp.com/view_lesson.php?v=310, check the complete code if you want.
If your biggest problem is to prevent loading some images if not needed I would recommend to stay with media query.
If you load different css-files (depending on media) you can add the needed images as "background-image:".
This should also work for SVG Spite.
How to use SVG Sprite Sheet as CSS background-image while maintaining aspect ratio and scalability

why can't I overlay text on the bottom part of the page using fpdfi?

Background:
I'm developing an application that involves taking an existing pdf form and overlaying text on top of it. The pdf is version 1.3. I'm using the fpdfi class (written in php) that can be found here:
http://www.setasign.de/support/manuals/fpdi/
I am using fpdfi as an extension of the tcpdf class found here:
http://www.tcpdf.org/index.php
I use a line of (php) code that looks like this:
$this->SetXY(25, 250);$this->Cell(0, 8.6, $data['my_data_to_overlay']);
where $this refers to the instance of the fpdfi class, the SetXY function tells it the coordinates I wish to place the text (x,y), and the Cell function tells it what text I want displayed and how large and such.
The page height is 279.4 (all units here will be in mm)
The problem:
If I set my y coordinate higher than 250 (even at 251), the text will be placed on the next page instead of near the bottom of the current page as expected. All other coordinates above that line at 250 will display properly, even at the top edge of the page.
Why can I not overlay the text near the bottom of the page? What am I doing wrong?
Also of note: all margins for the page are set to 0 and headers and footers are disabled.
Disable auto page break by calling FPDF::SetAutoPageBreak with false, or true but with 0 margin.
EDIT: Using FPDF::SetMargins you can only set left, top and right margins, but not the bottom one. This is the proper way to specify a bottom margin.

Lightbox image / link URL

Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.

Categories