Creative Notice

exploring creativity 

Tags



June 12, 2009

Vertical & Horizontal Center with CSS

Web Devs have been promised that vertical centering an element within the browser view port will be a part of CSS3. Until we see adoption by the browsers getting that perfectly centered element is still a pain.


Well, here's a little bit of code I use, I've tested it in FF, IE7 and Safari 4, on Windows. I'd appreciate your testing if you have a browser/OS combo not listed here.

So, the CSS is:

<style type="text/css">
html,body { margin:0; }
.position { width:100%; height:0; position:absolute; top:50%; overflow:visible;}
.content { width:20em; height:16em; display:block; margin: -8em auto 0 auto; text-align:left; border:4px solid #999; padding:1em; }
</style>

And the html:

<div class="position">
<div class="content">
<p>
<p>Your data, <strong>$data[name]</strong>, has been created.</p>
</div>
</div>

Notice we are only using two classes here. First with .position we make sure to absolutely position 50% from the top of the view port. We can set the height to 0 and overflow to visible.

Next, the .content, which will directly contain our centered content, is horizontally centered using margin-left and margin-right auto. We set the desired hight and width and then set margin-top to roughly 50% of the height. This pulls the vertical placement up above the .position layer, thus centering the block vertically.

Give it a try; let me know what you think.



Comments [0]

June 7, 2009

HTML 5 Humor

The WC3  is the developmental group responsible for managing internet technology specifications such as RSS, HTML, etc.


Standard HTML is now rather mundane and most professional developers have long since moved on to XHTML. Always forward thinking though, WC3 has been working on the HTML 5 specification for a while now, and you can even see some simplified usage in current sites online (check out AnEventApart.com ).

Since HTML 5 is still in the works, anyone can submit ideas to the working group for review and possible addition to the specification. With that background in place, the above should strike you are pretty clever. Thanks to Ryan Hicks for tweeting this.

Comments [0]

June 5, 2009

Tiny Chat: Video Chat with Complete Strangers

So thanks to @nikibrown's post on twitter, I ended up video chatting with some cool designers who through together a vid chat impromptu. It was great to actually see folks from around the world and test drive TinyChat.com's app in the real world.


The basic gist of the Tiny Chat app is a combination of URL shortening, Flash enabled webcam tool and a chat room. Combine all those together and you end up with a little app one could use for project meetings, advanced podcast/vidcast, or anything else you like. You can also embed the app in your own site, so let's say you want to password protect your vid chat room. You could embed the app in a password protected page on your site or blog and then email out the address and password to attendees.

The only drawback is it supports only 12 broadcasting participants, but you can have many more chatters. So it would still work for like a round table discussion with many more viewers.

Anyway, try it out, let me know what you think.

Comments [0]

June 4, 2009

jQuery: Select Input Text

It never fails, I always fail to remember how to select in input's content on focus. Here's the magic code in jQuery.


// Select textbox content
$("input[type=text]").focus(function() {
$(this).select();
});


Comments [0]

June 3, 2009

Image SRC Replacement in jQuery

So, just a little note that might save you some time in the future.

If you are using jQuery to replace an image source and you want to use an effect. Don't use hide() and show().

$('img#arrow').hide('fast');
$('img#arrow').attr('src','my_img.png');
$('img#arrow').show('fast');

Those functions change the image display type to none and block, respectively. This could throw off your layout since most images are included in a page inline.
Instead, use fadeOut() and fadeIn() as these functions only effect the image's opacity, not it's display.

$('img#arrow').fadeOut('fast');
$('img#arrow').attr('src','my_img.png');
$('img#arrow').fadeIn('fast');

Hope it helps save you some frustration.

Comments [0]

May 29, 2009

How Posterous Stats Work

I've been confused by the descrepency between my Posterous stats and my Google Analytics stats for Creative Notice. So, I emailed Posterous for an answer, and they gave me one. 

Enjoy and FYI....

I'm confused by the stats for post views. In the manage section of my account, my posts are showing several thousand views. In my Google Analytics account, I'm only seeing 100+ visitors.

Why the discrepancy? Do you calculate views differently than Google?

Thanks,
Ryan

And the next day reply...

First of all, when people read your posts through the Posterous reader that counts as a view for that post on Posterous. But that would not hit google analytics. Same for RSS feeds.

If people hit your site and have javascript disabled, that would still count as a view on Posterous, but would be ignored by Google analytics

If I go to the main page for your site:
That will count as a post view for *each* of the posts on that page. Google would count that as one view for that page, and no views for each post.

So the fundamental difference here is google analytics is counting when that particular page is loaded with javascript, while we count anytime that *post* is loaded, on any page anywhere.

thanks


Filed under  //   google analytics   posterous   stats  

Comments [0]

May 29, 2009

Just Bought 2 Domains, Need Ideas

I just bought two great to domains from Cindy Thomas, @thewahmagazine. 

Now I need to find out what to do with SocialNetworkToday.com and TweetCode.com.

Any ideas. Just going to stick some basic content and analytics code up there for now, might resell them. But I'd really like ideas for an app to build for them.

Got an idea, share it please. Of if you want to be involved, let me know and maybe we can partner up.

Comments [1]

May 28, 2009

Add A Progress Bar to Fire Fox's Address Bar

Fire Fox's Awesome Bar (address bar) is indeed very handy, but it lacks one piece of bling which I miss from Safari. The progress bar to be very precise. 

In Safari, when loading a page, the user gets some nice graphic feedback in the form of a progress bar moving behind the address bar. I love this feature as it lets me know, at a moments notice, how much longer that page is going to take to load. All the other browsers, Internet Explorer, Fire Fox and Chrome, are missing this feature. 

Lucky for us, there is an add-on for Fire Fox, the awesome plug-in Fission  by Zeniko. It allows you to add a progress bar, just like Safari's, to your Fire Fox install. The default look is a plain color. I've further improved on Fission's standard look by using an animated GIF as its background.  You can do the same, just follow these few handy pointers:
  • Install Fission from the Mozilla Add-Ons Site .
  • Download my animated GIF, or make your own.
  • Restart Fire Fox, and view Fission's options, set the path to your animated GIF and save.
  • Enjoy!

     
Click here to download:
Add_A_Progress_Bar_to_Fire_Fox.zip (54 KB)

Filed under  //   address bar   awesome bar   chrome   fire fox   fission   profress bar   safari  

Comments [1]

May 21, 2009

A New Way to Serve IE6 CSS

This morning I had the opportunity to rethink how I handle IE6 support.


I've been torn, in the last few months, over how to phase out support for IE6 at my design firm. I've always had a one version back policy with my clients when it comes to Internet Explorer. Now that IE8 has been released I should be phasing out our support for IE6. But version 6 has enjoyed a massive deployment in corporate environments that has been made painfully clear to me by my past work with AT&T, Time Warner and other large corporate IT organizations.

How can I turn a blind eye on a still significant portion of my client's viewer-ship and still help push the general Internet populace toward modernity? The answer, very probably, has been presented by Andy Clarke (@beautifulweb ) at For A Beautiful Web .

Andy has proposed the use of an Universal IE6 style sheet. Think of it as a glorified reset style sheet. The IE6 Universal Style Sheet incorporates Eric Meyers' reset as well as basic layout and typography styles. The goal is not to reproduce your rich design in IE6 through hacks, but to present your semantic content in a consistent manor focused on great typography and page cadence.

Why does this work for me? Because it allows me to save time, hence expense, when developing content rich sites. No longer do I need to spend hours trying to hack together CSS to compensate for IE6's inadequacies. I can circumvent the whole issue by presenting content only. I sell this to my clients as the cleanest, fastest, most cost effective way to serve their visitors stuck with IE6. Consider this, I can spend two hours of my time hacking for IE6 support, or just a few minutes to link to an Universal IE6 Style Sheet. That's a savings of several hundred dollars for my client.

The end user receives a nicely formated page that is light and to the point, and not broken! And if I really want to get the point across, I can use JavaScript to present a friendly message to IE6 users, such as:

"Page auto-formated for Internet Explorer 6. Upgrade your browser for a richer experience. Please Upgrade IE or you can get FireFox or Chrome."

Check out this example from Andy Clarke's website. The gallery below shows his site in FireFox and IE6. 

   
Click here to download:
A_New_Way_to_Serve_IE6_CSS.zip (333 KB)

Filed under  //   css   IE6   Internet Explorer   JavaScript  

Comments [0]

April 23, 2009

Creativity in Music: Diane Birch

So my first truly mobile posterous post, here's a shot of Diane Birch in concert at The Granada Theater in Dallas, Tx.

I'm actually listening to her now. So very happy she uses the trumpet and piano in her songs. Refreshing in a world full of faceless industry puppets to see an artist with a unique integrity.

She's got a nice mix of blues, folk and a slight touch of southern rythem.

Bravo.

-from mobile

Comments [1]