In my first exploration of the JSON data interchange format, I used it in its most basic way possible. I attached a script (from delicious) to a page and simply used the built-in object created by their implementation to generate an unordered list of my recent del.icio.us posts. While it showed how easy it is to use the O, a handy, structured, Javascript Object, provided by JSON, it didn’t really illustrate how to manipulate the page with new data after page load. That is, after all, a very now thing to do, so it’s kind of important. This article will examine how to dynamically load a JSON feed and how to get data out of Twitter and into a usable form using a callback.
Continue reading “JSON Feeds For Fun and Profit Part 2 – Callbacks with Twitter”
JSON Feeds For Fun and Profit, Part One- Del.icio.us makes it easy
Confession time: I’ve never actually worked with a JSON feed.
No, really.
I know what you’re thinking… Yes, you’re right. I’ve built a bunch of Ajax-y components and one full blown application over the past two years.
No, in light of that it doesn’t make any sense that I haven’t used JSON before.
Continue reading “JSON Feeds For Fun and Profit, Part One- Del.icio.us makes it easy”
Display: inline-block is the bee’s knees. CSS 2.1
I was looking at the CSS 2.1 Candidate Recommendation today and notices that there’s a New ‘display’ value- ‘inline-block’. That caught my eye as I’m long actually familiar with the inline-block display value. I’ve used it a couple of times for IE-specific browser hacks and I’ve always thought it would be cool if it were picked up by Firefox. Hopefully now that it’s made its way into a candidate recommendation and, presumably a real specification, they’ll add support and then I’ll be happy- in a really nerdy way.
Oh… you want to know why?
Continue reading “Display: inline-block is the bee’s knees. CSS 2.1”
CSS Attribute Selectors. I’d like to be able to use them.
I’m looking something like two or three years into the future to a point where I can implement a small, almost negligible upgrade to the way I serve back, next and home buttons for my galleries. Add one part coding neuroses, one part browser incompatibility and one part CSS and this article will be a small glimpse at the way I think.
This will be fun.
Continue reading “CSS Attribute Selectors. I’d like to be able to use them.”
Cross Browser Opacity using CSS and Internet Explorer filters
I’ve used this technique several times and I’m actually using it prominently in a UI component that I’m working on right now. I’ll have a lot more on that at a later date (plenty to write about with that piece:)) and I’ll actually have more on the potential pitfalls of this technique as well. This post is just the basics.
Anyway, this technique works in everything that browsercam offers other than the following unsupported browsers:
- Konqueror 3.4.0-5
- Explorer 5.2
- Mozilla 1.6
- Opera 8.5.0
- Netscape 4.78
- Internet Explorer 4.0
All things considered, that’s really pretty good coverage. So, if you’ve been dying to get some variable opacity into your life and you want to apply it to an arbitrary element, then this is your post.
Okay… enough with the intro. Here’s a sample:
And here’s the code for the sample page (all of it.) The important bits are in bold and the comments should explain all there is to know about the technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>opacity sample</title>
<style type="text/css">
.seventy-percent {
color:white;
background-color:#336699;
position:absolute;
width:225px;
height:225px;
/*here's the CSS3 standard method. this works in everything* but IE. */
/*It's in fractions of 1. So 1 is 100% opacity (AKA the default) and .5 is 50% opacity.*/
opacity:.7;
top:20px;
left:20px;
padding:10px;
}
body {
background:url(https://www.drunkenfist.com/web/samples/transparency/bg.jpg)
}
h1 {
margin-top:75px;
}
</style>
<!-- and now I use conditional comments to slide in the IE specific code.
Since every other browser thinks this is just a comment it keeps all the evil IE-ness
away from other browsers.
-->
<!--[if gte IE 5]>
<style type="text/css">
.seventy-percent {
/*It's a 100 scale. So 100 is 100% opacity (AKA the default) and 50 is 50% opacity.
The worst part of this is not the CSS issues, since this sort of forking is common.
It's coding opacity in Javascript. You always
have to make some second calculation to
make things match across browsers
*/
filter:alpha(opacity=70);
}
</style><![endif]-->
</head>
<body>
<div class="seventy-percent"> This is a div with seventy percent opacity </div>
<h1>This is some text in the background</h1>
</body>
</html>
*everything but the previously named browsers, that is…