Tip Of the Day: Modifying and saving CSS with Google Chrome

chrome-os-2odl-800This has really changed the way I work and doing mockups and proof of concepts. Check out the new Tip of Day video to see how you can edit the CSS for a website live using Google Chrome and the developer tools.

 

Can't figure this out!

I am working with some basic CSS to provide a thumbnail view of selected attachments in Lotus Notes. The problem is the last attachment (which is a picture) shows up full size. I am sure it is something simple and I suspect it has to do with the outer parent <DIV>. Here is the kicker, it only has the problem in Internet Explorer – there’s a shocker! Works fine in Chrome, FireFox and Safari. If anyone has any ideas let please share. Here is what the problem looks like:

Click Image To Make Larger

The HTML is very simple, here is a sample (taken from the developer tools in IE)

Click Image To Make Larger

One thing I hate is IE assigns the original height and width of the images so it is very misleading.  Here is the class “thumb” CSS:

.thumb {
 float:left;
 width:140px;
 height:140px;
 margin:5px;
 overflow:hidden;
 display: block;

 border: 1px solid #A0ACC0;

 -moz-box-shadow: 3px 3px 4px #333333;
 -webkit-box-shadow: 3px 3px 4px #333333;
 box-shadow: 3px 3px 4px #333333;
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333');    
}

Lord of the JavaScript frameworks, one framework to rule them all…

(in a slow deep voice) In a time of web 2.0, css3, and JavaScript, the average programmer is challenged to learn many technologies and patterns. The tide has turned and the world is changing, the inevitable is near. Websites across Middle Earth suffer from cross browser and web 2.0 compatibility. Somewhere, in the dark shadows of the web, a JavaScript framework was born. One framework to rule them all….Dojo. It wants to be found…

Ok, now back to reality.  And yes, I watched the extended version of Lord Of the Rings tonight.

So, I thought it fitting to give a Lotusphere update on the plugin development sessions I mentioned earlier. One of the projects I will be referencing is the Attachment Viewer project on OpenNTF. This is a slightly different kind of plugin, in that the content is embedded HTML, JavaScript, and CSS. The viewer actually uses the embedded web container from Lotus Expeditor – which is included in Lotus Notes 8.0 and above.

I have just finished the “Ultimate Attachment Viewer” implementation for OpenNTF. Since the default browser on Windows in Lotus Notes uses Internet Explorer I had to rely on Dojo in many areas for the different views. I will be posting the updated viewer on OpenNTF within the next week or so, so stay tuned. The primary additions are the new Dojo toolbar and the three view modes: Film Strip, Slide Show and Thumbnails.

Click on picture to see full

When a site has social overload!

Ever since I posted the entry about IBM.com “being social” I started looking around the net for how exactly other sites are social.  I noticed most popular blogs and sites have a section in the article where you can share the article on your favorite network. To be frank, most sites offer LinkedIn, Facebook and Twitter the most with Facebook and Twitter being the clear leaders.

I then looked at my own site and I realized on my front page (the main blog index), it just looked like a bunch of buttons everywhere! I use WordPress and that share toolbar is the Sexy Bookmarks plugin which allows me to specify what social sites I want icon links for in my posts.  Well, I decided to keep the toolbar but hide it when you simply look at the page.  I used the CSS technique to hide the bar until the “Share:” section is hovered over by the mouse.  I think the site looks a lot better, I am just not sure if this is the right approach or if I should expose the “Share:” in a different way.  I did however, in a single post always show the bar – which is really where most people end up on my blog.  While I get a lot of hits to the main page, most of my hits are from feed aggregators to the specific entry.  I am interested to hear peoples thoughts on the main index approach.  I just think that page needs to be “simple”.  Thoughts?

Creating menus with CSS and the awesome z-index

One of the cool things that is working across most recent browsers is CSS menu techniques.  One reason I really like this technique is anyone who can learn CSS can create pretty nice looking menus and applications which can be transformed by changing the CSS – great for themes!

If you really want to try this out, the best thing to do is use this site to generate the code for you and then see how its created.  The site has a bunch of themes and colors you can choose from.

I created a site that uses the JQuery layout plugin and I wanted a drop-down menu in the top layer of the layout.  I really wanted to have the menu created with CSS but because I used the JQuery layout plugin some issues came up.

The problem:

The JQuery Layout plugin lets you set up configurable panels (ones that can close, pin, minimize, etc) that can be laid out and even embedded inside each other.  The primary approach is a North, South, East, West and Content pane layout.  I used a very basic layout in my application.  Since I wanted to have a CSS menu navigation in the North panel, the menu would actually display over the West, Center, and possibly East panels.  The CSS did display correctly but the content in the lower panels was showing through dropped down menu options!

The solution:

In case you are not familiar with CSS menus, I will give a quick primer.  The easiest way to construct the menu is to use an HTML list for the menu content:

<ul id="navigation">
    <li><a href="/">Home</a>
         <ul>
              <li><a href="/math">Math</a></li>
              <li><a href="/science">Science</a></li>
              <li><a href="/gym">Gym</a></li>
              <li><a href="/ss">Social Studies</a></li>
              <li><a href="/spanish">Spanish</a></li>
         </ul>
    </li>
    <li><a href="/profile">Profile</a></li>
    <li><a href="/contact">Contact</a></li>
<ul>

Notice the menu contains a top level list and one top level entry has a sub menu list.  This means when the user mouses over the top level entryt “Home” the sub menu with Math, Science, Gym, Social Studies and Spanish will be shown.

The key combination in the CSS is the display:none and the display:block.  The following CSS is for any UL element under the element with the id of “navigation”.  This tells the browser to not show the referenced element, ie.  the sub UL list.

#navigation ul {
    display: none;
    ....
}

The next would be to put a hover declaration for the LI elements and “block” the child UL elements.  This tells the browser to show the element when its parent is hovered on:

#navigation li:hover > ul {
   display: block;
   z-index:10;
   ....
}

Notice anything strange in the last bit of code?  Yep, the z-index is what solved my overlay problem.  Because of the JQuery layout and how it uses overlays, cutoffs, etc, the z-index allows me to specify that this element should be “on top” of all other elements.  The key is to make it a value that is greater than all other z-index values on the page.  This little gem comes in handy with CSS based layouts and animations.

Attachment Viewer on Steroids

Ok, maybe not steroids but Dojo and CSS!

Lots of work on the attachment viewer.  Using Dojo, CSS and JavaScript I was able to give the viewer two new view modes with some eye candy in each.  I use CSS to have shadows and a tile mode.  Check out the three screen shots below, I will most likely be posting a video to show how the new views can be used.  Just remember, this is a 100% web based component in the Notes client.  You will notice I have three actions on the attachments – Open, View, and Share – which use the BrowserFunction to provide a custom experience in the rich client – otherwise it just uses the normal web semantics for launching.

I used Dojo for the slide show view.  I use the dijit.layout.StackContainer and then each attachment is placed into a dijit.layout.ContentPane.

For the thumbnail view I use basic CSS to accomplish this.  The two classes, border and thumb, give the experience of them being “thumbnails” and as the mouse moves over the div block it “selects” it with a new background color using the hover tag.

div.border {
    border: 1px solid #A0ACC0;
    height: auto;
    float: left;
    overflow:hidden;
}
div.thumb:hover {
   background-color: #ADD8E6;
   border: 1px solid #FFACC0;
}

Here are some screen shots of the three support view modes:

Film Strip

Slide Show

Thumbnails