Igor's Blog

Printing a page with JavaScript is easy but if you want to print the contents of a specific DIV, it gets a little trickier. If you want to do something more complex like intercept the page print request and then print only certain contents of that page there's even more work involved. This article will show you how I did just that over at travelblog.ws.

To give an example, I had a pop-up fixed sized dialog that showed the trip itinerary. I wanted to be able to print out just the itinerary without any of the header, footer, etc. You can see in the screenshot below this working in action.
jquery_print.png


To achieve the above first create a DIV with that will hold all of the content that you wish printed and set its class to printcontent.
 HTML
<div class="printcontent">Printable content here</div>


Then you need to add a JavaScript listener for the window.matchMedia event looking for the 'print' media change. That event will be fired every time the page media changes. If the media matches it means we're printing, if it doesn't we're back to displaying the HTML page as normal. I used jQuery in some of the code below but it could be done just as easily with plain JavaScript.

Two functions are called on these event changes, beforePrint() and afterPrint() - these are shown below.
 JavaScript
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
beforePrint();
}
else {
afterPrint();
}
});
}


[Read More and Comment]  

, , ,

I've been using Google DFP instead of AdSense on a number of sites that I run because it relaxes some of the AdSense rules and more importantly gives you fuller control of your ad placement. For example you can easily place AdSense ads on infinite scroll pages using DFP, which can't be done with standard AdSense code. One place that DFP falls short however is the ability to use responsive ads. This example shows how with a bit of extra code it is possible to make DFP ads somewhat more responsive friendly.

In case you're going to say that DFP actually supports the 'fluid' ad size, you would be right, but this ad size does not work when using DFP with AdSense as a fallback. Further, the 'Smart Banner' ad style is only available for mobile, so that's a no go either.
dfp_resp1.png


The image below shows the desired results. I wanted to be able to select the most appropriate ad size for any given container based on that container's width. This isn't exactly responsive but if your container is the width of your page it is as close as it gets. This approach works very well if you don't expect ads to resize if the browser window is resized. The ad size is picked when the ad is first inserted into a page and remains static, this still allows the same responsive page to contain ads that work equally well on desktop as on mobile.
dfp_resp2.png


So lets see how you can implement this. The first step is to select all of the possible ad sizes. I think horizontal banner sizes work best so that's what I did for my example. This is done in the DFP Inventory console for the ad unit you wish to use on your page.
dfp_resp3.png


Now for some HTML. This creates an 800px container DIV with another DIV element inside that will hold the DFP ad slot.

[Read More and Comment]  

, , , , ,

If you use Gmail (or G Suite) and have ever received one of those emails that lets you unsubscribe by replying with a specific subject line, you were probably at a loss when looking for the spot where Gmail lets you edit the email subject. I went looking for it recently and it wasn't as straight forward to find as I thought. Here's how you do it though.

First you have to hit Reply, which will lets you compose a message, but instead of doing that click the button with a down arrow next to the 'To:' field. That will show a drop down menu with an option to edit the subject line. Click Edit subject.
gmail_subject_2.png


The email subject line is now visible and editable!
gmail_subject_3.png


I don't know why Gmail doesn't always show the subject line when composing replies, but at least following the steps above you can change it if necessary.

[Read More and Comment]  

, ,

While updating code my my travelblog.ws project I came across an issue where I was not able to upload certain JPEG files to the blog and have them automatically scaled down for thumbnail generation. The files opened fine on my Mac but PHP would not load them.

This was the kind of error I was getting...
 PHP Error
PHP Warning: imagecreatefromjpeg(): gd-jpeg, libjpeg: recoverable error: Invalid SOS parameters for sequential JPEG
PHP Warning: imagecreatefromjpeg(): 'uploads/58a0ca1e227b5_20170210_170151.jpg' is not a valid JPEG file in UploadHandler.php on line 562


I wasn't exactly sure what that meant but since these files were loadable on my Mac there had to be a way to get them loaded via GD too, and I found it. There was a runtime configuration documentation page for the PHP GD library that described an INI parameter that could be set that would make GD ignore warnings while loading JPEGs. After setting the gd.jpeg_ignore_warning parameter to 1 I was able to load these seemingly 'corrupted' JPEGs.

Here's the code I used to set the parameter. I placed this right before any of the calls to the GD functions.
 PHP
ini_set('gd.jpeg_ignore_warning', 1);


[Read More and Comment]  

, ,
 
Programming, DIY, Games, Hacks, Tech and more.
Follow me on...
Current and Past Projects
See my Resume

Subscribe


RSS Feed

My Other Web Sites

Igor and Elise's Travels
Riverside Expressway Cam
StrFunc() Online
300 George St Blogumentary
Guru JSON-RPC Tester
Extrudifier Object Designer

Recent Blog Posts

New Nintendo 3DS XL, R4i SDHC RTS Lite and DSDoom

Older versions of JD-GUI crashing on macOS Sierra

How does Seeed Fusion stack up as a low budget PCB fab

Where to find the last item (Robbie's lost lyrics) in GravityFalls Lake level

Detecting print requests to print contents of a DIV with JavaScript

Using Google DFP with AdSense on responsive pages

How to change the email subject line in Gmail

Force PHP GD library to load JPEG images that have invalid data

How to uninstall Samsung Smart Switch from your Mac

Facebook adds weather forecasts but forgets to adjust them to your time zone

Recent Galleries

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

DIY spare parts computer build with a RAIDMAX Anura case

Fake 'Lepin' brand Lego packaging

Hardwood garden bench with clear resin void filler

Fixing a 3D printer extruder that stopped heating up

Easily increase disk space in a Lenovo Ideapad 100S 14" laptop with an M.2 SSD

Making a multi-piece 3D printed solder spool holder stand

DIY indoor apartment grow light wiring

Good Friday Electronics fun Easter Bunny LED PCB Kit IBEABU-01.0

Top Categories

Blogs I follow

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth

Friends

RAWS Parts Online
Alpha Dimensions Hosting
Kristensen Photography
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity
Follow me on... 
     
...or subscribe for updates!

Don't show this again