December 19th, 2011 Posted by Dave Mahon
As frustrating as dealing with mobile device orientation can be for event handling, it’s very easy with CSS.
For example, it is entirely feasible to rotating the screen to display alternate content within your mobile web app.
Let’s create a small sample document.
<body>
<div class="landscape">
Visible Only in Landscape
</div>
<div class="portrait">
Visible Only in Portrait
</div>
</body>
Now let’s add the CSS rules:
@media only screen and (orientation: landscape) {
.landscape {
display: block;
}
.portrait {
display: none;
}
}
@media only screen and (orientation: portrait) {
.landscape {
display: none;
}
.portrait {
display: block;
}
}
It’s incredibly simple and you’ve now offloaded this handling to the browser. These selectors are currently supported on iOS and Android, so you can trust that it will work reliably.
January 16th, 2011 Posted by Don Albrecht
2 months ago, I wrote about InsertRule: a handy way to dynamically write style rules. The problem is, building giant strings for complex CSS3 style rules is more than a little tedious to write and debug. Today I’m going to discuss a method for streamlining this process using templates.
Step 1: Create a template for the CSS rule.
I’m using an html script tag for demonstration purposes. In a production setting you’ll want to precompile this.
<script id="tab-template" type="text/x-handlebars-template">
-webkit-border-top-left-radius: {{leftRadius}}px;
-webkit-border-bottom-left-radius: {{leftRadius}}px;
-moz-border-radius-topleft: {{leftRadius}}px;
-moz-border-radius-bottomleft: {{leftRadius}}px;
border-top-left-radius: {{leftRadius}}px;
border-bottom-left-radius: {{leftRadius}}px;
-webkit-border-top-left-radius: {{rightRadius}}px;
-webkit-border-bottom-left-radius: {{rightRadius}}px;
-moz-border-radius-topleft: {{rightRadius}}px;
-moz-border-radius-bottomleft: {{rightRadius}}px;
border-top-left-radius: {{rightRadius}}px;
border-bottom-left-radius: {{rightRadius}}px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
width: 100px;
border: 1px solid black;
padding: 5px;
background-color: #cecece;
</script>Step 2: Define your custom attributes.
Handlebars takes an object as input to replace the dynamic variables in the template. Here we’re specifying a large left radius and a right radius of 0.
var source = $(“#tab-template”).html();
var tab_template = Handlebars.compile(source);
var rule = tab_template( {leftRadius: 20, rightRadius: 10});
Step 3: Writing the Style
Use Style.Insert to attach the new rule, We’re using an ID here, but it could just as easily be any other selector.
$.style.insertRule( ['#displaynode'], rule );
You can learn more about InsertRule here:
November 26th, 2010 Posted by Don Albrecht
I just stumbled across a great post on StackOverflow. A contributed answered a question with a sweet plugin for dynamically creating CSS rules that apply page wide on the fly with javascript.
Here’s a simple example:
$.style.insertRule(['p','h1'], 'color:red;');
$.style.insertRule(['p'], 'text-decoration:line-through;');
$.style.insertRule(['div p'], 'text-decoration:none;color:blue');
Pretty sweet when you need to change styling on the fly, no?
You can view the original StackOverflow post here:
http://stackoverflow.com/questions/4232557/jquery-css-write-into-the-style-tag
The code is also cross posted to jsfiddle here:
http://jsfiddle.net/doktormolle/ubDDd/
July 12th, 2009 Posted by Don Albrecht
Matt Bango has published a pretty awesome pure css timeline visualization. Best part about it is that he’s documented it QUITE well.
A few key concepts:
- The width of the nodes is pre-populated in the CSS
- The display is based on a pair of UL’s one for the timeline elements and one for the intervals at the bottom.
- Width is allowed to be specified in a style attribute on the individual nodes
There’s some pretty clear opportunities to automate the creation of this widget in javascript that I hope to circle back to some day. In the mean time, you can check out the article and demo here:
http://mattbango.com/notebook/web-development/pure-css-timeline/
January 28th, 2008 Posted by Don Albrecht
Eric Meyer recently posted an interesting take on marking up and styling a timeline from static html. In his case, a table was used to present a timeline featuring multiple points in a single swim lane.
Cool Trick
Working my way through his description of the code, I was most impressed by his creative use of title attributes in the CSS. Basically, by writing CSS rules of the form:
#timeline p[title~="August"] {left: 62%;}
He uses the [title~="MonthName"] to determine where in terms of 1/12 of the year, the dot representing the event should be placed within the block representing the year. This only requires the creation of 12 css rules for accurate placement. Since the title is standardized to be the date of the event, this allows him to take his queue for visual layout straight from the content being provided to the user. Definitely a useful trick.
You can check out Eric Meyer’s Structured Timeline here:
http://meyerweb.com/eric/thoughts/2008/01/21/structured-timeline/
January 7th, 2008 Posted by Don Albrecht
I’m pleased to announce a preview release of Blueprint Layout Tool 0.4. This version marks the migration of BLT to its own site at http://www.blueprintlayouttool.com and a focus on dramatic improvements to the source view. Unfortunately, the current development version only supports Firefox, IE, Opera & Safari support will be coming soon.
Key Features:
- Improvements to style and polish of the interface
- Dramatic improvements to source view (Powered by CodePress & PHPTidy)
- Generated Source is well formatted and polished
- Generated Source is Syntax Highlighted
- Generated Source is cleaned of most extraneous markup
Known Issues:
- Source View does not work in Safari and Opera
- Formatting is off in IE
- Generated source contains several Mozilla specific tags that still need to be cleaned.
I would also like to take a few moments and draw your attention to Christian Montoya’s Blueprint Constructor application. He takes a different approach to the interface and design of the Layout Tool and has created something quite useful and fun to use. We will be working together to try and achieve similar conventions between our apps.
Check out Constructor at http://lab.christianmontoya.com/construct/
You can read about his design process on his blog at http://www.christianmontoya.com/2007/12/08/construct-01-alpha/
December 17th, 2007 Posted by Don Albrecht
Today I’m pleased to announce the release of SilkSprite 2.0. Everything about SilkSprite stays the same but the decompressed file size drops by an astounding 46%.
Key Improvements
- 11% decrease in size for sprite.css
- 50% decrease in size for sprites.png
My special thanks go out to Andrew France for achieving such amazing compression of the png file.
You can find the new version here:
http://www.ajaxbestiary.com/Labs/SilkSprite/
November 26th, 2007 Posted by Don Albrecht
Stu Nicolls released this excellent CSS menu. It’s javascript free and provides incredibly rich interaction for something solely CSS based.
Check it out here: http://www.cssplay.co.uk/menus/pro_drop6#nogo53
November 15th, 2007 Posted by Don Albrecht
I’ve posted a bug fix release to the Layout Tool.
Changes:
- Dramatic improvements to selecting
- Fixed script error for IE 7.
Known Issues:
There are still major issues with IE 7 and it doesn’t work well in IE 6 yet. If anyone has a clue why the color of the div gets progressively darker in IE 7, I’d appreciate it.
You can testdrive the new version at:
http://www.ajaxbestiary.com/Labs/BLT2/index.htm
November 8th, 2007 Posted by Don Albrecht
Today, I’m proud to announce the release of SilkSprite a CSS Sprite plugin for Blueprint based on the widely used Silk Icons.
Benefits
- 1000 icons compressed into 1 file
- Entire Plugin is only 3 files
- Easy to use
Usage
Credit
Check it out online here:
http://www.ajaxbestiary.com/Labs/SilkSprite/
Latest Posts