Paul.Bagosy.Com » CSS

New WordPress Widgets

Paul Bagosy — Sun, 25 Jul 2010 13:42:20 +0000

Having been kicking around the exciting world of installing and customizing WordPress, I felt it was high time I launched myself into the even more exciting world of developing for WordPress. And here’s what I’ve come up with:

Recent User Posts

Recent Category Posts

Both of these are widgets that do basically the same thing, so I’ll describe them together here.

In developing the new Wharton Magazine blog, we needed a widget to display the Editor’s most recent post. I poked around for a bit, and realized that there really wasn’t a plugin to handle this, so the need for one was obvious. After getting the basics down, I decided that it actually had more applications than just a single post, and started adding features.

So, the end result is two widgets. Enter a title, select the user/category you want to display, enter the number of posts to display, and select if you want to display a link to the user/category and the time and date. Not complicated to use and does just what it says it does.

Before I release it to the WordPress Plugins Codex, I’d like to see if anyone wants a shot at debugging or can offer any tips or suggestions. Files are at the links above, and thanks in advance!

jQuery Content Swapping Portfolio

Paul Bagosy — Sun, 13 Dec 2009 15:15:05 +0000

jQuery Swapping Portfolio

Here’s a demo of everything I’m about to discuss.

the musical stylings of Eerwyrm will revolt you.

Recently, a number of clients have asked for an complex dynamic image-gallery-like page for a few different applications like portfolios and staff directories. The CMS I work with allows me to build a complex page for the client to load up with content, but the front end is where all the magic happens.

The first of these sites featured an artistic design and required a portfolio for landscape projects, so I wanted to go with an elegant flowing effect. There are two primary element to this concept: the navigation and the content. The content itself can be further divided to images and text, both of which are important elements for this particular layout.

The navigation consits of two columns of thumbnails down the side (or wherever you need them – for this example they’re on the side). They live in a div that’s floated to the right. Here’s what that code looks like:

Each thumbnail is tied to a div which is given a different ID. (link_1, link_2, etc.). In the script, we bind each of those IDs to a click event:

	$('#link_1').bind('click', {id:'1'} ,clickHandler);
	$('#link_2').bind('click', {id:'2'} ,clickHandler);
	etc.

When anything in that div is clicked, it fires the click event, aptly named clickHandler:

	var clickHandler = function(link){
		$('.main').fadeOut().pause(250);
		$('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
		$('#main_' + link.data.id).pause(250).fadeIn("slow");
	}

Important safety tip: That pause() function is there to slow things down so fadeouts don’t cross:

	$.fn.pause = function(duration) {
	    $(this).animate({ dummy: 1 }, duration);
	    return this;
	};

Now, on the content side, it’s just a matter of stacking up DIVs with your content in them and giving each div a unique (and patterned with the same id structure as your thumbnail IDs) ID (main_1, main_2, etc.). Granted, if you’ve got a lot of data, you’re probably better off with a system to import it via AJAX, but for this instance, we’re going to cover a smaller data set.

So, we’ve got our sidebar:

And we have our content:

 
  Content div 1
  Content div 2

Now we just need a little styling on the content divs to hide them:

 .content_div { display:none; }

Then it’s just a matter of displaying your first div when the page loads:

	$(window).load(function(){
		$('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
		$('#main_1').pause(250).fadeIn("slow");
	});

The $(window).load call is important. You don’t want this to fire right on (document).ready if there are any images in your first div, because they will likely not be completely loaded and the code won’t know how big that div is going to be.

so, here’s the simple code:



 
  
  
  
  
  
 
 
  
   
   
  
  
   Content div 1
   Content div 2

Vertically centering images in a DIV

Paul Bagosy — Sun, 13 Dec 2009 15:05:51 +0000

Have you ever needed to vertically center and image in a div only to realize that it’s nowhere near as easy as it is in a table with vertical-align:middle? Horizontal centering is easy, but that damnable vertical is always just out of reach. Sure, there are ways to make it look centered, but that flies out the window when you’re talking about dynamic sizes.

The work-around I use for this problem is to head a different route. I know I can’t center horizontally with a DIV, so I stop trying and learn to love the space. I just use a blank .gif the same height as my div and then use the style tag right on the IMG to set the background to my image with a position of center center. Viola, instant centered image!

Streamlined graphical navigation

Paul Bagosy — Thu, 10 Dec 2009 15:15:05 +0000

After covering the long and short of using CSS for mouseover graphical navigation, I was clued into a similar but vastly more efficient way of doing the same thing with less overhead. Why cut up all those images when we can just use one?

Here’s what I’m talking about:

Look familiar?

Notice the second line of navigation there mirroring the first? That’s all the mouseovers. The trick is simply to position this image as we need it.

So, here’s the HTML:

   
    
     Home
     Home
     Resumé
     Portfolio
     Contact
     Subscribe to Feed

Pretty much the same concept as before.

Now, we get into the CSS:

#header                  { width:946px; height:172px; background:url(images/header.jpg) top center no-repeat; position:relative; }
  #header ul             { width:946px; height:172px; margin:0px; padding:0px; list-style:none; }
  #header ul li          { margin:0px; padding:0px; list-style:none; position:absolute; }
  #header ul li a        { text-indent:-9009px; display:block; width:100%; height:100%; }
  #header ul li a:hover  { background-image:url(images/header.jpg); background-repeat:no-repeat; }

What’s important here is that we’re defining the background-image and background-repeat separately in the a:hover declaration, and they’re going to be the same for every link. Granted, you probably don’t need the background-repeat, but it’s good to be thorough.

Now that we’ve defined the overarching styles, let’s do the individual links:

  #nav_01          { width:103px; height:57px; left:45px; top:100px; }
  #nav_01 a:hover  { background-position:-45px -172px; }
  #nav_02          { width:113px; height:57px; left:148px; top:100px; }
  #nav_02 a:hover  { background-position:-148px -172px; }
  #nav_03          { width:122px; height:57px; left:261px; top:100px; }
  #nav_03 a:hover  { background-position:-261px -172px; }
  #nav_04          { width:154px; height:57px; left:383px; top:100px; }
  #nav_04 a:hover  { background-position:-383px -172px; }
  #nav_05          { width:136px; height:57px; left:537px; top:100px; }
  #nav_05 a:hover  { background-position:-537px -172px; }
  #nav_06          { width:227px; height:57px; left:673px; top:100px; }
  #nav_06 a:hover  { background-position:-673px -172px; }

With each of the list items, we’re just telling them how big to be (width, height) and where to be (left, top). We’ve already told the anchor tags to fill their space above, so we just need to worry about the hover. Since we’ve already told them what image to use (the same as the header background), all we need to do is tell them where to put it. We set the background-position to show the mouseover portion of the image by defining it in negative terms (x first, y second).

For this example, we’ve got an image that’s 229 pixels tall, 172 pixels of which will be visible as our header. So, the y part starts at 172 pixels, which means we need to drag it -172 pixels up for each of our mouseovers. Then, it’s as simple as grabbing our left positions for the list item and moving it that far to the left.

Bingo, instant mouseovers with one image. Instead of seven server calls and the need to preload (header BG and six mouseover images), we’re doing one server call and as soon as the header shows, your mouseovers are already preloaded!

Go-Live: Indian Valley Dental

Paul Bagosy — Wed, 25 Nov 2009 16:56:19 +0000

I’ve decided to start cataloging the sites that I’ve done recently, big or small. So, here we go:

Indian Valley Dental

Indian Valley Dental

What the client wanted:
This was a redesign of an existing CMS site that had a lot of Flash-based elements, including the navigation.

What I delivered:
The design kept the header flash from the old site, and I brought over the little Flash page title flourish.

I reworked the existing CMS to provide data is much more search-engine friendly and a lot more streamlined. The header navigation uses a CSS hover effect with a jQuery dropdown. The bottom navigation uses a quick server-side element to generate a style that underlines the page that you’re currently on, and the Contact Us page uses jQuery form validation and an AJAX spam-catcher.

The site is identical in IE 6, 7 and 8, Firefox 3, Chrome 3, Safari 4PB and Opera 10 (aside from a few form elements that resist styling).

Simple from the ground up, but that’s the way I like them.

IE6 – is there nothing it can’t make complicated?

Paul Bagosy — Wed, 11 Nov 2009 15:43:22 +0000

Here’s some info on PNGs in IE6 that will hopefully save you from throwing yourself out a window sometime between now and 2014:

We all know that PNGs are not natively supported in the browser that time (but not all of humanity) forgot, but PNGs are so wonderfully useful as to make them indispensable. What to do?

Well, some brave soul made a fix for this very problem that works very well once you have it set up correctly. There are two very very important things to note (I’m sure there are more, but these are the two I’ve encountered):

1) background-position:bottom absolutely positively does not work with this. If you’re trying to do a neat drop shadow effect over a textured background using an alpha-layered PNG, throw yourself out that window now (or just deal with the fact that IE6 isn’t going to support it). Don’t waste hours agonizing over why it appears to load and then disappears, just know that you’re not going to fix it and move on to different ways to make your effect work. I suggest getting as close a match possible with a GIF or scrapping it altogether in IE6. Don’t agonize over making it perfect in IE6 if this is what you’re trying to accomplish, because people should be punished for using IE6 anyway.

2) Google Maps uses its own PNG fixing that is completely derailed by iepngfix.htc. You’ll notice that your Google Map appears for a second and then disappears once the page has finished loading. So once you’ve got your style set up like so:

img, div, a, input  { behavior:url(/iepngfix.htc); }

it’s going to completely hose your Google Map. How does one fix this, you ask?

#map img, #map div, #map a, #map input  { behavior:none !important; }

Of course! But could it be that simple?

We’re talking IE6 here, so I think that answers itself. You see, if you’re using the neat browser checking information I wrote about a while ago to put all that into a CSS file behind an IE include tag, you’re in for a nasty shock. Apparently, this doesn’t work (at least it didn’t for me). So, we need to revert to server-side checking:

Of course, you could always use an iframe, but you’re better off just throwing yourself out a window at that point. I must also point out that if you’re using jQuery, you’re going to want to include this css file after your jQuery include. Why? IE6 – did you need a better answer?

It’s also worth noting that IE6 has a strange relationship with the !important tag. It will normally accept it, say if you’ve got a structure like so:

.tag  { width:500px; height:500px; color:#FFF; }
#tag2 .tag { color:#000 !important; }

That’s useful for a ton of applications. However, if you happen to put two declarations on one line:

.tag  { width:500px; height:500px;  color:#000 !important; color:#FFF; }

IE6 will ignore the !important tag in favor of the last declaration it finds. So, in this case, it will revert to color:#FFF; whereas every other browser will assume you meant color:#000; (because, you know, you said !important).

This is a useful bug, though, and it can be used to your advantage. Say you’re trying to add a min-height to a div. We all know that min-height is new and IE6 screams at it and its friend max-height to get off its lawn, because height was good enough in IE6′s day and it doesn’t need newfangled tags. So, we just use the !important tag to confuse it:

.tag { min-height: 250px; height: auto !important; height: 250px; }

This tells most browsers that your div needs to be at least 250 pixels tall, or however tall it needs to be beyond that. It also tells IE6 to make the div 250 pixels tall – but IE6 is kind of sloppy, so if the content in that div takes up more than 250 pixels, IE6 will expand to compensate – but won’t go below 250 pixels. This is coding Aikido – use your enemy against itself!

And I don’t think it’s unfair to call a nine-year-old browser that still enjoys a ridiculous market share despite its overwhelming flaws the enemy.

-pb

Browser Checking: Blood on the Information Superhighway

Paul Bagosy — Mon, 28 Sep 2009 13:04:06 +0000

Yes, I know I don’t update here as often as I should, but hey, I do this, I just don’t frequently write about it.

So, let’s say you’ve coded a beautiful site, and you’re really proud of it, and you check it in IE6 and it looks like someone wrapped the entire thing in marquee and blink tags and then had their dog recode it for you. The natural inclination is to scream and toss your monitor out the window, and then hire Tom Clancy to write you into a Rainbow Six novel where you take out Microsoft Headquarters. While that would be an exciting read, what’s really going to solve your problem is to simply write a new CSS file to compensate for IE6 not being a real browser and a large (but slowly shrinking) segment of the browsing population not understanding that.

So, here’s how you handle adding a new CSS file in the most painless way possible:

You’ll already have your css declaration, which should look like this:

So, all you do is create your new CSS file, name it something like ie6.css, and throw that in there too.

But you don’t want Firefox (or Opera, or Safari, or even IE7) to see this web-based atrocity, so we’ve got to tell them to just move along, nothing to see here, folks:

That’s right, that’s all there is to it! Now, only IE6 will see it that CSS file.

BUT WAIT THERE’S MORE! This little trick is actually a bit more powerful.

You can wrap whole sections of code in this block:

And, it’s not just for IE6. You can check for any IE version or even a range of versions with this syntax:

if IE 5.5 Single version specific
if gt IE 5.5 all versions greater than the specified version
if gte IE 6 all version greater than or equal to the specified version
if lt IE 7 all versions lower than
if lte IE 6 all versions lower than or equal to the specified version

So, if your problem exists in IE6 and IE7, but not IE 8, you’d just add

to capture anything equal to or lower than IE7.

Now, a quick note on crafting your CSS files. In my IE .css files, I just take the line that’s not working in IE, copy it to my IE6 css, and beat it until it complies. The problem with this method is that you’ve now got two lines crashing into each other, fighting a bloody struggle for dominance (and submission!). How, you ask, do you get the desired line to be the one that works? Give it an inflated sense of importance.

Say you’ve got this line:

 .page_content { background:#0CF; padding:10px 15px 10px 297px; }

but IE6 doesn’t understand pixels (or turquose), so you need to change it to:

 .page_content { background:#FC0; padding:11px 16px 12px 15px; }

the way to make sure that the line from your IE css is to add !important to the end of every statement, before the semicolon:

 .page_content { background:#FC0 !important; padding:11px 16px 12px 15px !important; }

That will guarantee that those declarations are the ones that are recognized when there’s the possibility for confusion.

It’s not enough! I need more! IE checking doesn’t seem to satisfy.

Do you need more advanced browser checking? Are you encountering a 1-pixel variance in Chrome? Do you want to have your website make fun of backwards Safari users? Well, simply checking for IE6 isn’t going to help you. You need more power (ah! ah! ah!):

The output of this will get you down to the very version number, so if you’ve got some philosophical disagreement with anyone running Firefox 3.0.12, you can pick that version out specifically (but why? WHY?!).

It’s a good idea to leave this whole code chunk intact an in order, because Opera can masquerade as IE if you’re just checking for IE, and Chrome will pretend it’s Safari if you’re just checking for Safari.

-pb

Rollover Navigation for fun and profit.

Paul Bagosy — Tue, 21 Apr 2009 14:54:37 +0000

Gone are the days when a nicely-styled text link was sufficient for main navigation. Heck, designs are even sporting graphical sub navigation these days. While this is a pain in the proverbial backside for easy updating, it’s what life has given us. And when life gives us graphics and demands SEO compatibility and semantically correct HTML, we make lemonade. And then we charge $125/cup.

So, how do we tackle this without all of that pesky JavaScript which is likely to break on any given browser (I’m glaring at you, IE6. And IE7. And IE8. And Firefox. And particularly Safari.) More to the point, how do we do this in a way that’s not just images and can actually be picked up by search engines? We say Screw the JavaScript! (I say that a lot.) The W3C has given us all the tools we need with HTML and CSS! We just need to find new and interesting ways to abuse them.

The root of the issue here is that we have an image that we want to change when we mouse over it, AND we want text to show up for spiders. The Spider isn’t going to understand nav_contact.gif as well as it will understand Contact Doylestown Web Design, so we need to scrap the image tag altogether. We also need to put that text in there and not have it display. These two things are not quite intuitive, but hey, we’re left brain geniuses, are we not?

So, here’s our HTML construct:

  
   
    Top Item 1
    Top Item 2
    Top Item 3
    Top Item 4
    Top Item 5

What we have here is a container

, an unordered list, and list tags with links inside. Now, that’s not going to look very good if we leave it like that, so off to the CSS we go.

First, we need to set the stage with the width, height, and background:

#navigation {
	width:740px;
	height:30px;
	background:url(/images/navigation.jpg) top left no-repeat;
}

For that background image, you want to have your entire navigation as it looks normally. No need to cut up individual images for your default state!

Next, we need to whip that list into shape:

#navigation ul {
	width:740px;
	height:30px;
	margin:0px;
	padding:0px;
	list-style:none;
}

We make sure that the

Now, we need to trim the

tags:
```
#navigation ul li {
	height:30px;
	margin:0px;
	padding:0px;
	list-style:none;
	float:left;
	display:block;
}
```
Define the height (because this is horizontal, and they’ll all be the same, right?), strip the margins, padding and bullets again, and finally, make it sit horizontally instead of vertically like it wants to. That’s what the float:left and display:block achieve.

Moving right along! We need to get that pesky text out of there, don’t we?
```
#navigation ul li a {
	text-indent:-9009px;
	display:block;
	height:30px;
}
```
So, we take it and shoot it 9009 pixels to the left. Unless someone’s on a 10,280 x 7,680 screen, that’s text is not showing up. But they’ll have other problems, too. Anyway, an important thing to note is that you cannot use
tags inside those links or everything after it will still show up. text-indent only affects the first line.

Now, we are almost done. We just need to tackle the individual cells (hence the unique IDs on the
tags). Every
tag is going to have two lines in the CSS: one for the tag, and one for the link inside it.
```
#nav_01 {
	width:148px;
}
#nav_01 a:hover {
	width:148px;
	background:url(/images/nav_01.jpg) no-repeat 0px 0px;
}
```
In the first line, we declare the width of the
tag. We’ve already defined the heights before. This ensures that we’re filling the space of the

Firefox 2.0 Madness with floats

Paul Bagosy — Tue, 28 Oct 2008 15:51:13 +0000

After bashing my head against a wall for a while trying to figure out why one page in a site was dropping my floated sidebar div to the bottom of the page, I came across this:

http://www.davidbisset.com/2007/12/20/drop-down-list-breaks-float-layout-in-firefox/

Say you have two divs – both have floats so that they can end up being two columns on your site. But sometimes when you add a dropdown menu (