Web Dev Bros » user interface design http://www.webdevbros.net hot talk about web development Thu, 20 Jan 2011 19:55:06 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Rounded corners with CSS (and no images) http://www.webdevbros.net/2008/04/24/rounded-corners-with-css-and-no-images/ http://www.webdevbros.net/2008/04/24/rounded-corners-with-css-and-no-images/#comments Thu, 24 Apr 2008 14:43:33 +0000 fab http://www.webdevbros.net/?p=173 I searched a lot to find this great solution for doing rounded borders with just CSS and no images. There are loads of solutions out there which use images to make the borders or doing some funky javascripts which take too much time on page load and the rounding is only applied after onload.

so thanks to Deathshadow for this great solution with pure CSS. just check out the link. there are the examples and the source needed.

]]> http://www.webdevbros.net/2008/04/24/rounded-corners-with-css-and-no-images/feed/ 2 New great free icon set http://www.webdevbros.net/2008/04/21/new-great-free-icon-set/ http://www.webdevbros.net/2008/04/21/new-great-free-icon-set/#comments Mon, 21 Apr 2008 06:48:29 +0000 Michal http://www.webdevbros.net/2008/04/21/new-great-free-icon-set/ Many of you already know that the FamFamFam icons are probably the most famous out there. At least i know plenty of apps using it – including me. Today i have found a new great icon set from pro theme design including 117 icons:

iconsheetsmall.gif

Get Circular Icons here

]]> http://www.webdevbros.net/2008/04/21/new-great-free-icon-set/feed/ 2 create a contextmenu with javascript & prototypejs in seconds http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/ http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/#comments Tue, 08 Apr 2008 17:44:43 +0000 Michal http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/ Did you ever wanted to build a context menu like google does it? I have figured out an easy and quick way to achieve this with a small amount of CSS and 3 lines of javascript.

contextmenu.png

Click here for a demo

All you need to get started is the latest version of prototypejs. I bet you have it already ;)
We will build our menu with the following structure:

PLAIN TEXT
HTML:
  1. <div id="menu">
  2.   <a href="">item</>
  3.   ...
  4. </div>
  5. <a href="">more...</a>

First there comes the div container which is called menu in this example. It contains the menu items which are ordinary a tags. After the menu we place a link which will display our contextmenu. Now lets apply some style to the menu so it really looks like a nice contextmenu. Apply the following styles..

PLAIN TEXT
CSS:
  1. #menu {
  2.   position:absolute;
  3.   border:1px outset #aaa;
  4.   border-right:2px outset #aaa;
  5.   background:#fff;
  6.   margin:8px 0px 0px 8px;
  7. }
  8. #menu a {
  9.   display:block;
  10.   padding:4px 20px;
  11.   border-bottom:1px solid #aaa;
  12.   font-weight:bold;
  13. }

We positioned the menu absolute therfore it will appear over the "more..." link. Thats good because we want to have the menu on our mouse when we click the link. The margin moves it a bit away so we can still see the link a little. The rest is for nice appereance. Oh, i forgot: the links within the menu are displayed as block. Thats for the line breaks.

The only thing which is missing now is tons of Javascript. Hmm, not really. We are fine with 3 statements. We don't calculate any positions of the menu, because it is already positioned. Thats the nice thing and makes us write less javascript. ok, lets tune our html..

PLAIN TEXT
HTML:
  1. <div id="menu" style="display:none"
  2.   onmousemove="$(this).show()"
  3.   onmouseout="$(this).hide()">
  4.   <a href="#">item</>
  5. </div>
  6. <a href="javascript:void(0)"
  7.   onclick="$('menu').show()">
  8.   more...
  9. </a>

When the user clicks on more... we show the menu ($('menu').show()). Now we have to keep it visible till he/she moves away the mouse out of the menu. For this reason we keep showing it onmousemove. Finally if the mouse leaves the menu we hide it ($(this).hide()).

Last but not least we added display:none because the menu should not be visible by default (note: you have to assign this inline, otherwise it wont work. For more details check the prototypejs API).

Get the full source code here by viewing the source. If you are familiar with script.aculo.us you could add nice effects when showing and hiding the menu. (Effect.Appear and Effect.Fade)

Tested in IE7, FF2

I use this kind of menus in all my apps. If you need more menus in one page. e.g. context menu for a user (delete, modify, permissions) then just render an own menu for each person. It generates more HTML but makes it easy to use.

]]> http://www.webdevbros.net/2008/04/08/create-a-contextmenu-with-javascript-prototypejs-in-seconds/feed/ 2 Web 2.0 balloon tooltip with prototype and scriptaculous http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/ http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/#comments Tue, 29 May 2007 21:20:46 +0000 Michal http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/ A very nice balloon tooltip from BeauScott.com is another gift of the web 2.0 era. Look at the stylish appearance and enjoy...

Balloon tooltip

This beauty from BeauScott uses the prototype javascript library including some little extensions and scriptaculous. Supported features are for example getting the tooltips content direclty from an XML or HTML file. Furthermore its interface for the usage is simple as well. Example:

PLAIN TEXT
JAVASCRIPT:
  1. var h = new HelpBalloon({
  2.    title: 'Webdevbros.com',
  3.    content: 'webdevbros is providing you some freaky content.'
  4. });

Here is the original post from Beau Scott:
http://www.beauscott.com/2006/08/19/ajax-enabled-help-balloons/

]]> http://www.webdevbros.net/2007/05/29/web-20-balloon-tooltip-with-prototype-and-scriptaculous/feed/ 1 FormWalker – walking through form fields with the enter key http://www.webdevbros.net/2007/04/16/formwalker-walking-through-form-fields-with-the-enter-key/ http://www.webdevbros.net/2007/04/16/formwalker-walking-through-form-fields-with-the-enter-key/#comments Mon, 16 Apr 2007 14:07:24 +0000 Michal http://fabiankoehler.de/wdb/?p=31 In conventional business applications users are used to navigate through form fields just by using the "enter" key rather than using the "tab" key. Especially on forms where they bung in a lot of numeric data (e.g. sales) it's more common to use the numeric block (numlock) and therefore the "enter" key is more convenient to use ... cause there is no tab key. I've just written a short javascript snippet which solves this problem. I call it FormWalking.

It's a straight forward task so I dont really want to write a lot about (the code is at the bottom for all who cannot wait). What's important is that it uses the prototypeJS library. Be sure to integrate it when using the FormWalker.

Usage: Just mark all your input fields with the CSS class "next" and the user will be able to "walk" through them (If the last field is reached the first field will be activated. so its kinda loop...). All other fields won't be touched by the script:

PLAIN TEXT
HTML:
  1. <input class="next" />

btw for all who dont know: it is possible to use more than one classname, just in case you need your own css class additionally. That would look like this somehow:

PLAIN TEXT
HTML:
  1. <input class="myFreakyClass next" />

At the end of your form you load the FormWalker which will do all the stuff for you (attach the necessary events, etc)

PLAIN TEXT
JAVASCRIPT:
  1. /****
  2. FormWalker - walk form fields using the enter key by just adding the css class "next"
  3. to each field which should be "walkable".
  4. Michal Gabrukiewicz (FFTUIL - feel free to use it License)
  5. ****/
  6. function FormWalker() {}
  7. FormWalker.jumpNext = function(e) {
  8.     if (!this.nextElement) return false;
  9.     if (((window.event) ? window.event.keyCode : e.keyCode) == Event.KEY_RETURN) {
  10.         this.nextElement.activate();
  11.         return false;
  12.     }
  13.     return true;
  14. }
  15. FormWalker.load = function() {
  16.     nexts = document.getElementsByClassName('next');
  17.     var prev = null;
  18.     for (i = 0; i <nexts.length; i++) {
  19.         it = nexts[i];
  20.         if (prev) prev.nextElement = it;
  21.         if (i == nexts.length - 1) it.nextElement = nexts[0];
  22.         it.onkeydown = FormWalker.jumpNext;
  23.         prev = it;
  24.     }
  25. }
  26. FormWalker.load();

I have tested it in IE 6 and Firefox 2. Works fine for me...

]]> http://www.webdevbros.net/2007/04/16/formwalker-walking-through-form-fields-with-the-enter-key/feed/ 4 Great free icon set for your web applications http://www.webdevbros.net/2006/11/28/great-free-icon-set-for-your-web-applications/ http://www.webdevbros.net/2006/11/28/great-free-icon-set-for-your-web-applications/#comments Tue, 28 Nov 2006 21:17:33 +0000 Michal http://fabiankoehler.de/wdb/?p=15 Today I was again using some icons of the probably best icon set out there so I thought to recommend it here as well. The famfamfam.com silk icons consist of 1000!! icons for all your needs (files, flags, RSS, hardware, community, multimedia,…) within application development and make your apps look really professional. The nice thing is that they're released under a Creative Commons Attribution 2.5 License and therefore are completely free. Normally you pay a fortune for nice sets like this!

I use them within all my apps and they fit perfect cause every icon is from the same set. The worst thing you can do is to collect icons from different sets. It will always look mixed somehow. Quite clear we are just developers and not designers *g*. Here is another screenshot cause I love them…

Check out the ipod icons at the end arent they cute? Last but not least a quote from the site which should free our bad conscience about using such a good thing for free.

Go download the Silk Icon set. They're free, so you have no excuse not to.

]]> http://www.webdevbros.net/2006/11/28/great-free-icon-set-for-your-web-applications/feed/ 0