Trent Richardson » CSS

Use CSS3 to Spice Up Impromptu Buttons

trent — Fri, 16 Apr 2010 11:42:58 +0000

I thought I would share with you quickly how you can use CSS3 selectors to spice up your Impromptu buttons. Lets say you have a prompt with a Delete button. Delete normally indicates caution/danger/warning which is usually represented by a red color. We can let our CSS do the dirty work and have it find any buttons inside Impromptu which has an id ending with “Delete”. Here is how you would do such:


.jqi button[id $='Delete']{ background-color: #aa0000; }

And now you have a pretty red button like so:

Thats all there is to it. Be sure to check back first of the week for a super post! Enjoy!

UberUploadCropper 0.2 With Example

trent — Mon, 12 Apr 2010 11:33:33 +0000

Finally, I’ve put together an example of UberUploadCropper, as well as getting it up to date with Uploadify 2.1. If you don’t remember what UberUploadCropper is, it is a small jquery plugin that brings together Uploadify, Impromptu, and Jcrop, to seamlessly upload and crop images. Here’s a visual:

For a brief snippet of code of how to implement it, check out my previous post on UberUploadCropper. But, I have one more special treat. I have finally put together an example. Be warned, this example is NOT for production use. It is only to demonstrate how to link everything together. When uploading files there are security concerns among other things that need to be addressed.

Download UberUploadCropper Example. (Be sure to read the README file. You have to set your upload path!)

Now before you start fussing about how the quality of the cropped images are, or about if you upload a big image Impromptu goes outside the screen, I have commented in the files where you should be doing your resizing and cropping, so when an image is uploaded you should make some changes (resize it to a reasonable size for the screen). I will leave resizing and everything up to you. I have restricted the uploads to only jpg for simplicity of the example, although my production version does jpg, gif, and png. And I’m sure most of you are using a nice image manipulation class (or should be) to handle different image types.

As always I’m open for suggestion or if anyone makes nice changes they are always welcome too. Enjoy! (also don’t forget if you are looking for more ideas to help out your site visit FetchIdeas.com)

Execute Excel-like Formulas on your Tables and Grids

trent — Wed, 24 Mar 2010 11:06:35 +0000

If you do much reporting I’m sure you’ve encountered needing to sum up a row, or divide, or average some data in a grid, much like you would do in Excel. Its actually not that difficult to whip up a simple, dynamic solution with javascript. I’m using jQuery, but it would be equally as simple with Mootools or Prototype. To do this I’ll build upon an earlier post on coloring tables and grids with CSS3 and rgba, so if you’re using IE, tough luck on it looking pretty for now, but the functionality is there. Lets get started.

First lets take our grid from before and add a couple columns, one for Sum and one for Average. Also lets add some classes to each td: qtr-1, qtr-2, qtr-3, qtr-4, sum, avg. Now the columns on each row are identifiable. Your html should resemble the following (I’ve cut down the number of rows for this example, more rows are shown in the example):

Year	Qtr 1	Qtr 2	Qtr 3	Qtr 4	Total	Average
1990	987	456	159	159
1991	1234	2345	346	457

Now lets get to the good stuff, how we calculate simple formulas. Remember the class names we assigned to each td? This will be used in a simple string search and replace, then execute the resulting string. Here’s the function to do this:


function calculateFormula($row, formula){

	formula = formula.replace(/(\{[a-z0-9_\-]+\})/gi, function(m){
		return $('.' + m.replace(/\{|\}/g, ''), $row).text();
	});

	var answer = eval(formula);
	return (isNaN(answer))? 0 : answer;
}

The first parameter is a jQuery object of each row, since we’re doing per-row calculations, but this could really be any context you need. The second parameter would be the formula. The syntax we’re expecting is “{className} + 123″. We’ll do a regular expression to search for anything wrapped in {} and replace it with the contents of the html object with that class.

Now we’re ready to call this puppy. On page load we’re going to get all table rows inside of tbody, which I’ve conveniently given class names stripeRow. Then we’ll assign the text() of our sum and avg columns with the formula to calculate each. Incase it doesn’t jump out at you do realize sum must be calculated before average, since average uses sum.


$(function(){

	$('.stripeTable .stripeRow').each(function(i){

		$t = $(this);

		$('.sum', $t).text(calculateFormula($t, '{qtr-1}+{qtr-2}+{qtr-3}+{qtr-4}'));

		$('.avg', $t).text(calculateFormula($t, '{sum}/4').toFixed(2));

	});

});

And that is all there is to it! Here is the Demo. Enjoy!

Coloring Columns and Rows on Tables with CSS3 and RGBA

trent — Mon, 22 Mar 2010 12:41:57 +0000

Tables still have their place in the web development world. The best use for them is to display data in a grid, like for reports. I’d like to show a quick example of how to color the columns and rows using CSS3 with rgba. I won’t show the full source code on the blog, but you can easily view the source of the example page.

Lets start with our html. For this table example we may be using a few tags you aren’t very familiar with: thead, tbody, col. Here is a snippet of our html to create the table (I’ve cut out a bunch of the table rows just to shorten it up.

Year	Qtr 1	Qtr 2	Qtr 3	Qtr 4
1990	987	456	159	159
1991	1234	2345	346	457

You see there is a corresponding column with each column in the row. These span vertically the height of the table, underneath each table row and cell. We can assign styles to these but the only problem is we can’t see the styles because the coloring of tr and td overlays them. The solution? Use rgba for background colors of your tr. Here would be our css for our table rows:


.stripeTable tbody tr.bg0{  background-color: rgba(244,244,244, .7); }
.stripeTable tbody tr.bg1{ background-color: rgba(255,255,255, .7); }

That should give us some alternating row colors. If you’re not familiar with rgba, it resembles rgb, except one more parameter for opacity. Now lets style our columns:


.stripeTable .col0{ background-color: #cfcfcf; }
.stripeTable .col1{ background-color: #ffffff; }

We use a solid color for columns to be sure they are strong and show through. Now, this should pretty well work for the most part, but don’t we all like to highlight rows of a table as we hover over them? Lets do that with the help of some pseudo class selectors:


.stripeTable tbody tr.bg0:hover{ background-color: rgba(255, 191, 85, .7); }
.stripeTable tbody tr.bg1:hover{ background-color: rgba(255, 191, 85, .7); }

And now the final part, just for fun, lets highlight our first column, because it could have some important data in it. We’ll do this with the first-child pseudo selector:


.stripeTable col:first-child{ background-color: #FfBf55; }

This all works pretty well with our browsers that support CSS3 fairly well, Chrome, Firefox, but IE as always has a hard time with it.

View the Demo

Fetch Ideas – Another Web Dev’s Resource

trent — Tue, 09 Mar 2010 13:00:21 +0000

As if there aren’t enough web galleries out there I’m adding one more, FetchIdeas.com. This is a site which I have created over the past couple months, with a different approach than other galleries. My aim is to create better organization, publish only useful resources, and most of all provide a great place to Fetch Ideas!

I’ve categorized everything in design, graphics and fonts, clientside (css, javascript, etc..), and serverside (php, python, mysql, etc..). The categorization alone seems a bit different than most sites. The site is now stable but I have many plans for it in the coming months, so don’t be shy if you notice something wrong, want to suggest something, or anything else. Do you have any resources to suggest?

Also don’t for get, you can follow FetchIdeas.com on Twitter!

A Few Changes Under the Hood

trent — Sun, 28 Feb 2010 03:04:07 +0000

I’ve made a few changes to the blog lately, under the hood and visually over the past month. If all works out I should have much to talk about in the coming weeks about my findings. I have noticed positive increases thus far, so that is good news. Keep tuned, find out if these changes could help you!

A Go at Design – Waccamaw Floor Covering

trent — Fri, 26 Feb 2010 17:21:46 +0000

I had an opportunity recently to get back to a little design work with a local flooring company, Waccamaw Floor Covering. I had fun with it but I also tried to integrate a few new things I’ve not done in the past, everything from seo, flowplayer, to google maps (street view). In the end I think it turned out pretty well, even though we’re still working on the copy. The directions page included maps, street view, and address, since it is a little difficult to spot the store in person. As always feedback is welcome here!

New jQuery Impromptu Theme

trent — Tue, 01 Dec 2009 12:48:43 +0000

It has been a while since I’ve served up a fresh Impromptu theme, so here goes. I don’t think I’ll make this the default, however it is based on the default theme with a few minor changes. I’ll be adding this to the documentation as well, but here is the css:


.jqifade{ position: absolute; background-color: #333333; }
div.jqi{ width: 350px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; position: absolute; background-color: #ffffff; font-size: 11px; text-align: left; border: solid 3px #e2e8e6; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 7px; }
div.jqi .jqicontainer{ font-weight: bold; }
div.jqi .jqiclose{ position: absolute; top: 0; right: 0; width: 18px; cursor: default; text-align: center; padding: 2px 0 4px 0; color: #727876; font-weight: bold; background-color: #e2e8e6; -moz-border-radius-bottomLeft: 5px; -webkit-border-bottom-left-radius: 5px; border-left: solid 1px #e2e8e6; border-bottom: solid 1px #e2e8e6;  }
div.jqi .jqimessage{ padding: 10px; line-height: 20px; color: #444444; }
div.jqi .jqibuttons{ text-align: right; padding: 5px 0 5px 0; border: solid 1px #e2e8e6; background-color: #f2f8f6; }
div.jqi button{ padding: 3px 10px; margin: 0 10px; background-color: #2F6073; border: solid 1px #f4f4f4; color: #ffffff; font-weight: bold; font-size: 12px; }
div.jqi button:hover{ background-color: #728A8C; }
div.jqi button.jqidefaultbutton{ background-color: #BF5E26; }
.jqiwarning .jqi .jqibuttons{ background-color: #BF5E26; }

Also feel free to share your themes for Impromptu. There is always room for improvement!

I have added this theme to the docs as “Smooth” theme.

7 Lucky Tips for Mobile Development

trent — Thu, 18 Jun 2009 10:40:05 +0000

1) Use Opera Desktop browser with the small screen view (View->Small Screen).

2) Use Firefox Developer Toolbar do use the Handheld Stylesheet (CSS->Display CSS By Media Type->Handheld).

3) Avoid Caching things that shouldn’t be cached. If you’re using a lot of GET requests or sometimes posting forms, be careful of caching. An easy way to avoid this is tag on a url variable with a current timestamp: mypage.php?t=123456

4) Remove Whitespace from your html output and css. Some serverside languages and frameworks have the ability to do this for you. If not you can always save your output to a variable and run a simple regular expression to remove spaces outside of tags like line returns, tabs, and new lines. With ColdFusion you might try:


rereplace(htmlstr,"(\n|\r|\t)","","all")

5) Use a proper Doctype. Of course there’s more than one that would probably work, but this is a start:

6) Don’t Rely on Javascript. Sure iPhone, Blackberry, Opera Mini are all getting pretty good, but the whole point of mobile development is for those who can’t use the full version (js enabled). The only exception is if you’re writing a browser specific site for a browser with good javascript support.

7) Use a CSS Reset. There are dozens of different resets available around. I suggest starting with a full reset, then once you’ve finished development scale it back to the elements you need.


*{ margin:0; padding:0; border:0; }

These are starter tips when developing for mobile browsers, but the support on mobile devices varies greatly, so the biggest unmentioned tip is to TEST, TEST, TEST!

Add the YoYo effect to your WordPress Sidebar

trent — Sat, 21 Feb 2009 16:21:24 +0000

Since I’ve been reworking my blog I thought I’d include a quick tutorial on adding the YoYo effect(or so I call it) to your wordpress (or any site for that matter) sidebar. First you need to grab the jQuery Yoyo plugin I whipped together. Place this in your javascript file. Also make sure you have jQuery as well, duh..

Now we need to inspect the html format of our sidebar. Just view the source of your html where your sidebar is. Make a mental note of the structure of each module or widget with a list of links. Mine looks like the following:



	
		Categories

So to access each link I would go from “sidebar Links ul li a”. So to tie it all together I will select these with my jQuery selector and apply the Yoyo function to it:


$(function(){ // wait until the page loads to apply effect
	$('.sidebar .Links ul li a').yoyo('paddingLeft',{ range: 6,speed:'fast' });
});

To achieve our effect we want to use the paddingLeft attribute and make it yoyo 6 pixels. You can play with this number and the speed attributes to suite your needs, I thought this looked best for my blog. Enjoy!