Archive for the 'CSS/HTML' Category

Curly Braces - The solution to the war

March 3rd, 2007 by SubZane

I'm the type of guy that prefers his curly braces to be at the same line as the method but I know there's alot of people that wants the curly braces on new lines. I'm aware of the coding conventions that supports that way of coding. However, I cannot bare to read code like that, but I also know that "the others" cannot bare to read my style of curly braces. However I think my argument that I save document rows is a pretty strong one.

Same-line-style

Show as plain text
C#:
  1. public string Message {
  2.         get {
  3.             return txtMessage.Text;
  4.         }
  5.         set {
  6.             txtMessage.Text = value;
  7.         }
  8.     }

New-line-style

Show as plain text
C#:
  1. public string Message
  2.     {
  3.         get
  4.         {
  5.             return txtMessage.Text;
  6.         }
  7.         set
  8.         {
  9.             txtMessage.Text = value;
  10.         }
  11.     }

The Solution

So discussing this with a friend who is an advocate of the new-line-principle I decided to create a macro that switches between the two rules. Tada! Now all you have to do when looking at another developers source code is to run the macro to make the code readable to you, do the needed changes and then run the macro again to switch back to his curly-brace-style.

How it works

I simply change the new line formatting rules for your VS and reformats all your code

Compability

  • Only functions with Visual Studio 8 (VS 2005) and above. If you feel that you have to much time on your hands you are welcome to rewrite it for older versions of Visual Studio.
  • Rules only apply to J# and C# code.

Download

Curly Braces Toggler

Posted in CSS/HTML, General | No Comments

Sprite Menu

January 19th, 2007 by SubZane

When the simple list menus with text links aren't enough and you wish to have all your tabs/buttons as beautiful (or in this case ugly) images it can be tricky to enslave the standard UL list to solve your problem. It's all very possible though, and with only using one image for the full menu, no more need to save 1 or even 2 images for each button, because now we are working with sprites!

In this demo I'm using a very simple and ugly menu (to lazy to make it beautiful but it still is very valid) and as you can see it's two rows. The top row is the normal view and the bottom row is the hover, or onmouseover view.

Compability

I've not been able to test in every single browser so if you are a mac user, feedback would be most helpful :)

Windows

  • IE7 - Works 100%
  • IE6 - Works 100%
  • IE 5.5 - Untested
  • Firefox 2.0 - Works 100%
  • Opera 9 - Works 100%
  • Safari 3 - Works 100%

Mac

  • IE 5.5 - Untested
  • Safari 3 - Works 100%
  • Firefox 2.0 - Works 100%

Plain and simple

Without any styling what so ever the menu is very straight forward and easy to use. Click here to view the menu without any style. And as you can see below the source isn't that tricky to understand either.

Show as plain text
HTML:
  1. <div id="spritemenu">
  2.   <ul>
  3.     <li class="buttonA"><a href="#"><span>Home</span></a></li>
  4.     <li class="buttonB"><a href="#"><span>About</span></a></li>
  5.     <li class="buttonC"><a href="#"><span>Contact</span></a></li>
  6.     <li class="buttonD"><a href="#"><span>Forum</span></a></li>
  7.     <li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
  8.   </ul>
  9. </div>

Applying style

With the CSS added it transforms the simple UL list to a graphic menu. View here. As you can see most of it is fairly basic.

Show as plain text
CSS:
  1. div#spritemenu {
  2.   height: 50px;
  3.   width: 400px;
  4.   font-size: 9px;
  5.   background-image: url(menu.gif);
  6.   overflow: hidden;
  7. }
  8.    
  9. div#spritemenu ul li {
  10.   display: inline;
  11.   margin: 0px;
  12.   padding: 0px;
  13. }
  14.    
  15. div#spritemenu ul li a {
  16.   display: block;
  17.   position:relative;
  18.   height: 50px;
  19. }
  20.    
  21. div#spritemenu ul li a:hover {
  22.   background-image: url(menu.gif);
  23. }
  24.    
  25. div#spritemenu ul {
  26.   margin: 0px;
  27.   padding: 0px;
  28.   list-style-type:none;
  29.   height: 50px;
  30. }
  31.    
  32. div#spritemenu span {
  33.   display: none;
  34. }
  35.    
  36. div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
  37. div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
  38. div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
  39. div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
  40. div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
  41.    
  42. div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
  43. div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
  44. div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
  45. div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
  46. div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}

The interesting and tricky part is the last part, this is where I set the coordinates for each button. I need to set the width, top, left of the A element and the background position of the image so that each A element displayes the correct background.

Show as plain text
CSS:
  1. div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
  2. div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
  3. div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
  4. div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
  5. div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}

In the hover part it's fairly the same, I need to set the position of the background image to display the correct background when I point at the A element. In both of the cases, hover and non-hover you are free to set what coordinates you wish. So you could have the same hover image for all A elements if you wish, you could also design the menu image in what ever way you want.

Show as plain text
CSS:
  1. div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
  2. div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
  3. div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
  4. div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
  5. div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}

Summary

As it's every designers dream to use whatever font/image in the menu that he/she wants this is a very good solution that gives all the benefits of a designed menu and at the same time doesn't affect usability or semantics in bad way.

View Demo

Posted in CSS/HTML | No Comments

Learn japanese using PHP!

November 15th, 2006 by SubZane

I've developed a small PHP script that can act as your own personal hiragana and katakana tutor. What it does is simply displaying a number of random romaji like "n go ho yu do wo pe hi chi ko" and then you simply write the answers on a paper. If you do not know the correct kana just press "Answers" and you'll get them!

Try the Kana Tutor!
Get the source!

Posted in CSS/HTML, General | Comments (1)

Convert postvars to querystring

September 25th, 2006 by SubZane

A handy function that converts all variables in the $_POST array into a querystring. Useable if you wish to return to the form from which you posted and have access to all the submited values.

Show as plain text
PHP:
  1. function postvarsToQueryString($postvars) {
  2.   $querystring='';
  3.   $keys = array_keys($postvars);
  4.   $values = array_values($postvars);
  5.   for ($i=0;$i<count($values); $i++) {
  6.     $querystring .= '&'.$keys[$i].'='.$values[$i];
  7.   }
  8.   return $querystring;
  9. }
  10.  
  11. $querystring = postvarsToQueryString($_POST);
  12. header("Location: myform.php?$querystring");

Posted in CSS/HTML | No Comments

List contents of a directory

August 21st, 2005 by SubZane

A quick and dirty way to list the contents of a directory. You might want to add more properties to it for displaying only certain file types and so on. I might post that later on.

Show as plain text
PHP:
  1. function dirList($directory) {
  2.   $results = array();
  3.   $handler = opendir($directory);
  4.   while ($file = readdir($handler)) {
  5.     if ($file != '.' && $file != '..')
  6.       $results[] = $file;
  7.   }
  8.   closedir($handler);
  9.   return $results;
  10. }

And how to use it:

Show as plain text
PHP:
  1. $arr = dirList("./");
  2. for ($i=0; $i<count ($arr); $i++) {
  3.   echo '<a href="'.$arr[$i].'">'.$arr[$i].'</a><br />';
  4. }

Posted in CSS/HTML | Comments (3)
« Previous Entries
Next Entries »