# 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]  | 
# Friday, 09 September 2011

Be sure to check it out on http://bodil.github.com/coffeescript/.

So CoffeeScript looks great but now what? Well, recently Scott Hanselman wrote about some cool support for Coffeescript inside Visual Studio: CoffeeScript, Sass and LESS support for Visual Studio and ASP.NET with the Mindscape Web Workbench. Cool stuff happening.

Grz, Kris.

Friday, 09 September 2011 21:58:55 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [1]  | 
# Wednesday, 03 August 2011

A couple of weeks ago you could already find yourself getting knowledge about Windows Phone 7 Mango and Visual Studio 2010 ALM.

Because there’s always more to learn Microsoft put a new summer course online: Dive into HTML 5 this summer. Cool and refreshing, so what are you waiting for to get your feet wet. Happy diving!

html5

ff718229_header

Grz, Kris.

Belgium | Course | HTML5 | Microsoft | MSDN | Tutorial
Wednesday, 03 August 2011 13:53:29 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Tuesday, 02 August 2011

Today Adobe released it’s latest tool in preview mode: Edge.

From the announcing site:

Adobe® Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Edge will be updated regularly to add new functionality, stay ahead of evolving web standards, and incorporate user feedback to provide the best functionality and experience possible. This is an early look at Edge with more capabilities to come.

For samples take a look here: http://labs.adobe.com/technologies/edge/resources/.

For a nice video showing off some of the capabilities take a look at this article and youtube movie.

It’s cool to see that there are coming tools on the market from big vendors targeting HTML 5. I hope others do too.

Microsoft's Expression Web 4 SP1 adds HTML 5 + CSS 3 support already.

html5

Grz, Kris.

Adobe | HTML5
Tuesday, 02 August 2011 19:38:00 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  |