Posts Tagged ‘HTML’

Online html to pdf tool

June 27th, 2010

html to pdf converter I just want to present a new tool for converting HTML to PDF – html-2-pdf.com. It’s basically an online converter which could transform any* web site to a PDF document. Generally it could be useful if you want to print a website, or for example if you want to save the content of the website for offline reading.

The site is really simple – just insert the address of the web page which you want to be converted and few seconds after that it is ready to be downloaded. The site is just an interface of the amazing wkhtmltopdf library.

I am open for suggestions about the functionality of the site.

* – for some reasons there are web sites which are not converted correctly. This is because of HTTP headers which these sites restricting.

No comments »

Posted in CakePHP, Development, Labs, Tools

Tags:

How to – layout with fixed sidebar

March 13th, 2010

Today I was working on a page layout where a page width had to be fluid, while the sidebar had to be with fixed width. So here is my solution:

The layout looked like this in the beginning:

Layout

» Read more: How to – layout with fixed sidebar

No comments »

Posted in Development, Labs

Tags:

Fixing Dead Centre approach with jQuery

October 17th, 2008

I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.

Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.

I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.

You can see the difference in these 2 examples:

Resize your browser window in order to see the difference.
How it’s working?

First of all there are 2 javascript includes:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>

After this there is a function which track the size of the screen and the content.

<script type="text/javascript">
        /*Track height and width of the window and the content*/
        function resize(){
            if($(window).height() < $('#content').height()){
                $('#horizon').css('top', '0px');
                $('#content').css('top', '0px');
            } else {
                $('#horizon').css('top', '50%');
                $('#content').css('top', '-'+($('#content').height()/2)+'px');
            }
            if($(window).width() < $('#content').width()){
                $('#content').css('left', ($('#content').width()/2)+'px');
            } else {
                $('#content').css('left', '50%');
            }
        }
       
        //Bind events on resize
        $(document).ready(function(){
            resize();
        })
        $(window).bind("resize", function(){
            resize();
        });
    </script>

The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.

Hope this will help someone.

1 comment »

Posted in Development, Frameworks, JavaScript, Labs

Tags: