# Wednesday, 18 January 2012

In a former post I already presented the new CSS 3 column module and some funky stuff one can do with it.

However sometimes you want to provide your end users the possibility to decide for themselves how many columns they want to see. The following sample will do just that with the help of some javascript and the new HTML 5 range input type.

The following CSS is used to style up some range of text from the beginning:

#test {
    column-count: 3;
    column-rule:2px solid #000;
    column-gap:80px;
}

to style up a div element with id test:

<h3>How many columns?</h3>
<input type="range" min="1" max="5" onchange="changeColumnCount(this)">
<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim mattis justo, 
      sit amet volutpat turpis convallis vel. Etiam pulvinar tincidunt diam, sit amet ornare justo
    </p>
</div>

Note the type of the input element: range. I specified the min and max values so there can be only one column or a maximum of five columns. The onchange event will call the following javascript function which takes care of the behavior part and makes the magic happen:

<script type="text/javascript">
	
    function changeColumnCount(meter) {

        document.getElementById('test').style.columnCount = meter.value;
    }

</script>	

The meter value gets set to the column-count CSS property. Notice the way it is done in javascript, not via column-count but via the element’s property style.columnCount. Make sure that you have the casing right as javascript is a case sensitive language!

I used Internet Explorer 10 on Windows 8 and Opera on Windows 7 to test the feature:

IE10PreviewWin8

IE10Win8

The second IE10 is the Metro version. Note the number 4 coming over the meter. This shows up when dragging the slider from one value to another and disappears again when you release the slider.

The full code to test this out:

Have fun with this!

Grz, Kris.

CSS3 | HTML5 | range
Wednesday, 18 January 2012 12:41:22 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 17 January 2012

More and more CSS 3 technology starts to come natively to modern browsers. One of these that I like is the new column module. This post will highlight some of the nice features.

column-count

Setting the column-layout will, for the selection made, make up the content in a column layout without you having to mess around with tables and trying to get things right. For text I simply made use of lipsum and wrapped it in a div:

<div id="test">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim 
mattis justo, sit amet volutpat turpis convallis vel. Etiam pulvinar tincidunt diam, sit amet 
ornare justo aliquam sed. Aliquam augue tortor, lacinia a sodales in, fermentum vitae sapien. 
Nulla pellentesque nisl at mauris aliquet in condimentum neque ullamcorper...
        </p>
</div>

For the CSS part I made up this part which makes the selection on the div element with id test:

#test {
    column-count: 3;
}

I tested this in browsers like Internet Explorer 10 (on Windows 8) and Opera which work already fine out of the box without browser specific prefixes like (-moz, -ms, -webkit):

columncount

column-rule

Making several columns up with practically no effort is nice but sometimes you want to have a small improvement in readability and add small guidelines in between to better separate the different columns. With the column-rule you can add these. The syntax follows the same easy to remember format like we’re used to from setting a border:

#test {
    column-count: 3;
    column-rule: 1px solid black;
}

Which results in:

columnrule1

Of course you can also go for a 5px dotted red approach if you like to:

#test {
    column-count: 3;
    column-rule: 5px dotted red;
}

columnrule2

 

column-gap

In the previous samples we noticed that the text was pretty close to the borders of the columns. If this is not the desired effect you can set the column-gap to chime in that nice piece of extra space:

#test {
    column-count: 3;
    column-rule: 1px solid black;
    column-gap:80px;
}

Which results in:

columngap

As you can see, with some easy to use CSS 3 column module goodness one can style up the readability of content in an easy way. In the future more and more browsers will support this natively out of the box as well so keep it in mind for one of your next projects.

Grz, Kris

Tuesday, 17 January 2012 16:35:24 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [1]  |