Tag Archives: print

Yes, My Home Office is Officially Cooler than Yours My Life 17 MAY 2011

Yes, my home office is now officially cooler than yours. Why you ask? Well it is all thanks to the new addition in my little man den here at home, a little something I picked up from a frame/art shop in Canal Walk on my birthday this year.

Let’s just say that my office now comes with extra vigilante protection, thanks to the oversized, totally awesome, Jim Lee (one of the best comic book artists to ever walk this Earth) rendered, Batman wall print.

Did I mention it’s awesome?

Oh yeah, my office is now definitely cooler than yours! ;)

Awesome show-off angle 1...

Spectacular show-off angle 2...

Indicating the brilliant size of this thing

And finally, a clear look at the detailed artwork itself. Didn't I tell you that this was awesome? :P

DIY Home Upgrade My Life 17 MAY 2011

We really haven’t spent much time or money on improving the house in a very long time, with life and the garden simply getting in the way of the small amount of free time we do seem to have here in Country Mews. However, this weekend saw us pick up the DIY reigns once more, as we kitted out in the process two bathrooms, one bedroom and even slapped in one shiny steel rack for the shed!

Of course, one can’t tackle these sort of projects without spending some money (and by some money I mean a LOT of money), which is why both the day of my birthday and this past Saturday saw us spend an inordinate amount of time in the shops, targeting Mr. Price Home, Builder’s Warehouse and Game in particular, making them all a little richer and us a whole lot poorer in the process! :)

Sunday was deemed DIY day (although Saturday I did manage to finally get to the much needed lawn cut and edge trim, never mind the handing of my most awesome Batman print in the study) and when Chantelle popped in from her split shift, we first tackled the main bedroom where we hung our newly purchased curtain and put up our nifty three part purple flower print, complete with matching throw and pillows to bring a nice combination of grey and purple into our room. For the record, little Jessica LOVES the cylindrical grey pillow we’ve added into the mix.

Continue reading

jQuery: How to Expand an Accordion for Printing CodeUnit 05 MAY 2010

The jQuery UI library brings with it a host of cool effects and elements to apply to your project, one of which is the pretty cool accordion effect that basically turns a whole lot of sequential divs into an “accordion” – allowing you to click on a header to expand the selected div while the reset of them contract to hide away.

I did however come across a little problem that needed solving the other day, namely that when printing an accordion page, only the currently open, in other words visible, accordion segment prints, leaving the rest of the closed segments hidden on the final printed page.

Obviously this isn’t particularly useful when you are printing something out and needs to be addressed – which it turns out to be a pretty simple thing to achieve after all.

So let’s look at the code to expand and print our accordion page then shall we?

$('.printdocument').click(function(){
	var answer = confirm ("Do you wish to print this page's contents?");
	if (answer) {
		$('.ui-accordion-content').show();
		$('.ui-state-active').addClass('ui-state-default').removeClass('ui-state-active');
		print(document);
		$('.ui-accordion-content').hide();
	}
});  

The function above is called when the user clicks on the print button or whatever other element you have associated with the print functionality. The first step is a simple modal dialog to ask whether or not the user really wishes to print the current page. If we get a positive answer, when then move to dealing with the accordion, in other words expanding it so that all the information elements are showing.

To do this is a simple matter of grabbing all content divs and forcing them to show. Yup, as simple as that. The second line attempts to make the page look a little neater by changing the currently open header to look the same as all the closed headers – just for consistency of look of course.

We then run the javascript print function which initiates the browser’s print functionality and after that action has been done and control is handed back to the browser tab, we go and close all the accordion segments to make the page all neat and tidy again.

Done.

So as you can see, it is a pretty simple matter of expanding all those neat little jQuery UI accordions of yours after all! :)