CSS trick

Probably everybody know how to match dom elements with css. For example if you want to match all <li> elements. you are doing something like this:

<style>
li{color: red}
</style>

This way every list element will have red text color.

The more advanced example is if you want to select only the active element – an element with a specific class. This way you are adding a style like:

<style>
li.active {color: red;}
</style>

This way only the active elements (list elements with class active) will have red text color.

Ok, but what if we want to match elements which has 2 specific classes?

Let’s say you have following structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Selectors</title>
</head>
<body>
    <ul>
        <li class="first second">test 1</li>
        <li class="first">test 2</li>
        <li class="second">test 3</li>
    </ul>
</body>
</html>

How to make the first list element to be with red color?

The obvious solution is to add an extra class like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Selectors</title>
    <style type="text/css">
        .third{color: red;}
    </style>
</head>
<body>
    <ul>
        <li class="first second third">test 1</li>
        <li class="first">test 2</li>
        <li class="second">test 3</li>
    </ul>
</body>
</html>

but what if there is an easiest solution?

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CSS Selectors</title>
    <style type="text/css">
        .first{color: green;}
        .second{color: blue;}
        .first.second{color: red;}
    </style>
</head>
<body>
    <ul>
        <li class="first second">test 1</li>
        <li class="first">test 2</li>
        <li class="second">test 3</li>
    </ul>
</body>
</html>

As you may notice the css selector which is used is .first.second, so no spaces between them.

This way you can assure that only the element which has class first and second will meet the criteria and will be colorized in red. This notation works with ID’s as well, but basically if you have ID, then you know what is the exact element, so it’s useless, but for selection of two classes I think it really useful.

I would like to know if somebody knew about this way of selecting elements?

Demo

Share it:
  • Facebook
  • Twitter
  • Digg
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Yahoo! Buzz
  • Add to favorites
  • Identi.ca

Online html to pdf tool

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.

Share it:
  • Facebook
  • Twitter
  • Digg
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Yahoo! Buzz
  • Add to favorites
  • Identi.ca

Fixing Dead Centre approach with jQuery

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.

Share it:
  • Facebook
  • Twitter
  • Digg
  • StumbleUpon
  • del.icio.us
  • Google Bookmarks
  • Yahoo! Buzz
  • Add to favorites
  • Identi.ca