Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

Rockin' da Sidebah

Filed in:CSS
Web Dev·XHTML·The Web

Rockin' da Sidebah

December 22nd, 2007  · stk

Merry Christmas! How about a pure CSS technique to finish out 2007? Introducing "pop-Info" boxes, an XHTML/CSS-valid method of popping up sidebar information. It's cross browser compatible, written to standards and doesn't require any javascripting. (There's even a click-only version - same deal). Have a peek!

flower background pop-Info - (A CSS Technique for Popping Information)

popInfopopInfo jack-in-the-box

AFAIK everyone likes the <acronym> tag. Hey, it provides a nifty way to expand an acronym (or abbreviation ... or other abuses) into "more information". This detail shows in a tool-tip, when you move your mouse over it. Nice.

Normal Sidebar

This is an example of a sidebar (a short, often boxed, auxiliary news story that is printed alongside a longer article). It often contains additional, contrasting or late-breaking news.

On a web page, the sidebar breaks up the flow of the main article and takes up page real-estate. Why not have it display like an acronym (hidden ... until the visitor decides they want to see it)?

I expanded on the idea, using an info class with a <span> tag, to provide more information on a concept or word. Cool.

Unfortunately, it's limited to a short amount of text.

What if you want to include more information about some detail of the main article? What if you want to include an image? What do you do then?

In journalistic jargon, we've now entered the realm of the sidebar. A sidebar is a short news story, containing supplementary information, which is shown alongside the feature story, often in a box. It's similar to a pull-quote or callout.

What if a sidebar could display like an acronym, in some type of a tool-tip-type hover? Hmmm. After playing a bit with photo-caption zoom figure numbers, I got the idea that such an idea might be achievable. It is! Have a look at a popInfo Sidebar box "PopInfo"  Sidebar BOOM! A popping sidebar! Centered for liquid layouts, it can pop anywhere for fixed-width layouts. popInfo css toy Add images and other styling. It's XHTML & CSS-valid, cross-browser compatible (IE6, IE7, Opera, Netscape, FireFox, Safari) & we think it's a cool way of displaying "more information", saving page real estate and amping page SEO. .

For more popInfo examples, a click-version, the CSS and XHTML code, as well as a discussion on the method ... sally forth ...

flower background The Generic popInfo XHTML & CSS Code

Let's cut to the chase. You like it. You want it. Here you go.

Below is the XHTML and CSS used to make a generic popInfo box. It's going to look different than the lead-in example. I made that to show, with a little CSS, your imagination is the limit for styling. The popInfo box you'll see after cutting and pasting the code below, will look more: a generic popInfo box test image Here is a paragraph. How about another paragraph? Add as many paragraphs as you would like. It's a pure XHTML/CSS technique, using valid, standards-compliant code. It took a tad bit of work to get the technique to work in Internet Explorer 6 (no surprise there), but it does and it's also been tested in IE7, Opera (9.25), FireFox (2.0.x) and Netscape (8.1). We think it's a good way of displaying "more information" about an idea or concept, providing interactivity, saving real estate and it's also SEO friendly. . In fact, with any luck, it will look exactly like that, because I just copied and pasted from the code below, just to make sure it works. ;)

Here is the valid XHTML code. Cut and past this into the body of your page, or into your CMS:

Code:

<a class="popInfo w30" href="http://randsco.com/noJS.html" onclick="return false">a generic popInfo box  
  <span class="box" style="width:30em; margin-right:-13em;">  
    <img class="left" src="http://randsco.com/_miscPgs/demos/popInfo/test.jpg" alt="test image" title="" />  
    <span>Here is a paragraph.</span>  
    <span>How about another paragraph?  Add as many paragraphs as you would like.</span>  
    <span>It's a pure XHTML/CSS technique, using valid, standards-compliant code.  It took a tad bit of work to get the technique to work in Internet Explorer 6 (no surprise there), but it does and it's also been tested in IE7, Opera (9.25), FireFox (2.0.x) and Netscape (8.1).</span>  
    <span>We think it's a good way of displaying "more information" about an idea or concept, providing interactivity, saving real estate and it's also <acronym title=" Search Engine Optimization ">SEO</acronym> friendly.</span>  
  </span><!--popInfo-->  
</a> 

 

Below is valid-CSS that's used for the popInfo box. Swipe it and then paste it into your CSS file for your website or template. The "popInfo" class name should help to ensure that there aren't any cascading conflicts, with other CSS selectors you might employ.

Code:

/* - - - - - - - - - - - - - - */  
/*  popInfo ©2007 randsco.com  */  
/* - - - - - - - - - - - - - - */  
 
/* the mechanics */  
.popInfo span { /*paras*/  
  display:block;  
  margin:0 0 5px 0;  
}  
.popInfo .box { /*hidden*/  
  position:absolute;  
  margin-left:-20000px;  
  z-index:1000;  
}  
.popInfo:hover .box { /*center*/  
  margin:-40px 0 0 0;  
  right:50%;  
}  
* html .popInfo:visited:hover { /*IE*/  
  padding:0;  
}  
 
/* link styling */  
.popInfo {  
  background:none;  
  color:#333;  
  padding:0;  
  margin:0;  
  border-bottom:1px dashed #f00;  
  cursor:help;  
}  
.popInfo:hover {  
  background:none;  
  color:#333;  
  padding:0;  
  margin:0;  
  border:dashed #c60;  
  border-width:0 0 1px 0;  
}  
 
/* pop-up styling */  
.popInfo .box {  
  color:#666;  
  background:#f8f8f8;  
  border:2px solid #999;  
  padding:5px 10px;  
  font:80% verdana,sans-serif;  
}  
.popInfo img {  
  border:none;  
}  
/* (add to XHTML, if you can) */  
/* .popInfo.w30:hover .box {  
  width:30em;  
  margin-right:-13em;  
} */  
 
/* end popInfo CSS */ 

 

That's it. You should now have the generic popInfo box on your website, post or web page.

 
 

flower background Deployment, Click-version & Considerations

Problems?

There's nothing more frustrating than following directions for some 'cool new feature' and after you've invested the time, the bloody thing doesn't work. I hear you and feel your pain, because I've been there myself.

If you don't get a nifty looking popInfo box on the first try, don't despair. Have you tried to deploy and style it, at the same time? Get the generic one working first, then style it. Though I've built a lot of overriding CSS into the code, to avoid cascade conflicts, it's impossible to plan for every conceivable CSS incarnation. Perhaps there's a CSS or XHTML conflict. Deploy it on its own XHTML page. Once you SEE it working, then you've got a 'starting point'.

If you've followed the above advice and you're still stuck - send me a note. Make sure you let me know it's about popInfo, include a link the problem page and describe the problem. I work with this stuff every day, so it's likely I'll spot something you might have missed. (Sometimes a fresh set of eyes will help).

Limitations

While I think popInfo is a cool way of displaying information, there's some things it won't do. The big one is that you can't include a link. In order to keep deployment simple, avoid JavaScript and still have it work in IE6 IE6 (A Pain) The only thing you can :hover in IE6 is a link and you can't put a link, inside of a link. However, it's possible to use a HTML Component file (HTC), in a way that allows IE6 to :hover other elements. I've not played with this much, but it's a possibility. I may investigate this more, later. Especially because I'm catering less and less to IE6 and it would just be plain NICE to have it :hover something , I decided that this was a reasonable compromise.

Placement of the popInfo box is problematic for liquid layouts. This is because it's impossible to predict the location of the linked text. It could be on the right, left or center of the page. You can't just have the box pop up to the upper right, because if the link is on the far right, the box will pop up outside of the viewing area. The compromise is to have it consistently come up in the "middle" of the viewing area. (Placement isn't a problem for fixed-width layouts).

Deployment Suggestions and Considerations

I had a couple of goals, with the popInfo technique: (a) provide definitions & (b) expand on an idea, yielding further insight or information.

Let's face it, it's impossible to know your web audience. Some may know the definition for a technical word, or may not care for 'more information' about a topic. That's fine ... they can just skip the popInfo box. But for others, it provides valuable insight. That's the beauty - it's there IF you want it, but not 'in the way'!

Consistently styling the popInfo link is important. It needs to allow the reader, at a glance, to know what it is. I've styled it with a 1-pixel, dashed red underline. This is markedly different from a normal acronym or "info" <span> (1-pixel, dotted text-colored line). I think this is sufficient to alert the reader that this is (a) different than a link & (b) different than an acronym.

The width of the popInfo box is currently set in the XHTML. Some CMS tools (like b2evolution) don't like the style attribute in an article. It's too bad, but if this applies to you, not to worry. You can omit it and use class names to set the width (uncomment the CSS for the commented out "w30" bit and add as many w## selectors that you want). Set the width with class="popInfo w##", where w## equals the CSS selector you've made.

Personally, I like that the popInfo box comes up when a visitor mouses over the text link for it, while reading an article. The behavior is intuitive, similar to an acronym and the link is even styled similar to an acronym, so one might argue that it's an "expected behavior". However, there are some people that don't like things popping up all over the place. If this is you, I've also made a click version The Click Version A popInfo box only when you click! Behavior is similar for both Internet Explorer and Firefox, which covers the majority people. However, each browser seems to have a slightly different interpretation of the :active pseudo-class. Opera, for example, won't hold the popInfo box open, on-click. I'm not as keen on this version because: (a) knowing to 'click' isn't intuitive and (b) every browser seems to handle the :active pseudo-class differently. . (Note to self - Post the click version code differences).

The popInfo technique does not require any javascript. Having said that, understand that (currently) javascript is used to "kill the link". In the event that a visitor has JavaScript turned off, they are directed to a special "no-javascript" page, which informs them how they arrived there, rather than failing. However, the technique does not require javascript. One can remove the link kill and replace it with a link to a page with "more information" about whatever is contained in the popInfo box. Simple.

 
 

flower backgroundCopyright, Usage & the Future

Copyright & Usage

All scripts and CSS techniques at Randsco are free for your personal use. Commercial usage requires a donation. Contact Scott if you wish to use the popInfo on a commercial website.

Further information regarding our liberal copyright policy may be found on our Copyright page.

If you find popInfo a useful addition to your website, blog or project, please consider a donation. Making this stuff, documenting it and supporting it takes time. Donations are a way of saying "thanks" and are greatly appreciated.

The Future

Because popInfo is brand new, there's likely to be a "settling period" with the CSS and XHTML code, this page, examples and usage on this site. My plan is to come up with a standardized usage of this beneficial feature. I may look into adding links into the popInfo box, at some point, but frankly, because the popInfo link itself, can be a link, this isn't high on my priority list.

One of the beauties of CSS is that there are an infinite number of ways to style some very basic elements and features. If you use popInfo for your site and come up with creative or unique styling, please let me know. I hope to have a growing list of styling examples, linked on this post, to provide others some real-world examples.

(Permalink)
Views: 16877 views
9 Comments · GuestBook
default pin-it button
Updated: 3-Feb-2008
Web View Count: 16877 viewsLast Web Update: 3-Feb-2008

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.


Subscribe to Comments

Auto convert line breaks to <br />

1.flag Gary Comment
12/24/07
Nice post Scott, I like your new popInfo technique, the CSS engineers at Randsco.com must of pulled the stops out to release this just before Christmas. What with all the things that have to be done at the busy time of the year.

I look foward to using it in the future on my blog.

I bet Alex is getting excited now, I hope Santa brings her all she asks for. Its a lovely time of year for the Children, isn't it ?

Wishing You, Rachel and Alex a very Merry Christmas and Happy Holidays.

All the best
Gary

2.flag Sieg Comment
02/03/08
Hey Scott Happy Holidays as I missed telling any one this big time.

I like the pop up box.

I have a question about it, is there a ver. that has to be used with this code?

I cut and pasted the code into my CSS file then if I read it right just cut and paste the first bit of code into my post and I should see a box? What I get in the preview is just the code that I cut and pasted.
3.flag stk Comment
02/03/08
Sieg - Cutting and pasting worked for me in IE, FireFox, Opera & Netscape (all on XP). Maybe it's a Linux thing? Whatever the reason, your XHTML has <code> tags in it, which is rendering the code literally (not sure what else is added/changed).

Just make the XHTML & CSS look EXACTLY like the code in the boxes and with a bit of Irish luck, you'll be popping information boxes in no time! :D

Cheers - stk

PS - Tried to comment on your blog recently, but was stymied by the CAPTCHA thing (kept saying I had it wrong, but I swear I didn't). Gave up after 3 or 4 tries. :(
4.flag Ryan Comment
03/10/08
Hello stk,

First, I would like to say thank you for posting the code for a very cool/useful feature out to the masses. Kudos!

My goal for which this code may just be the answer --> I would like to be able to roll/hover/mouse over a text/link and have the full picture "pop" out. I do not need text with it as of yet.

My dilemma - I copied your CSS code exactly and put it into this testbed http://www.w3schools.com/html/tryit.asp?filename=tryhtml_links to see what the outcome would be. It is just as Sieg described - "What I get in the preview is just the code that I cut and pasted."

Can you verify?
5.flag stk Comment
03/10/08
Ryan - I can verify that it worked fine for me using IE7.

I cut the XHTML and put it in the <body>, then cut the CSS and pasted in inside of some <style> tags in the <head> section.

When I hit the button, I was rewarded with a slightly munged popInfo box (the W3C schools demo area overflow is clipped and the popInfo text was underlined, as a result of generic a:link styling).

But I did get a popInfo box, not echo'ed code. :D (What browser are you using?)
6.flag Ryan Comment
03/10/08
stk,

I figured that out just after sending the email - my apologies. I had been doing testing on a few other options as well. Thanks for the reply - i had missed a ">" in your code and botched it all up. Just like Unix - mess up just one period and you are dead in the water.

Thank you again for your quick reply. I appreciate the assistance!

Ryan
Omaha, NE
7.flag Pyogazel Comment
11/29/08
This is absolutely brilliant!
I've been searching down and low for something like that!

And your comment form? awesome!
I'm totally doing that too!

And your search field? perfect!
Absolutely perfect!

Thank you so much!

I have no idea how you did the "Read the journal entry that contains this picture" trick, I would love to do that!
8.flag Andrew Comment
08/08/09
Thank you for this. Very easy to use and set up.
9.flag stk Comment
08/13/09
Andrew - You're welcome. Glad you like it & thanks for the positive feedback.