First you have to make a list with UL and LI tags.

 
<ul class="menu">
<li><a href="http://swape.net">My homepage</a></li>
<li><a href="http://linux.org">Linux.org</a></li>
<li><a href="http://google.com">Link to google</a></li>
</ul>
 

• My homepage
• Linux.org
• Link to google

Ok here is a list. Now we must make the list items to be horizontal and not vertical. So we must use CSS to set the float to be left and make the list-style: none;

.menu li{ float: left; list-style: none; }

Then we must make them look like a buttons. So we add some borders and padding and margins. Then the whole CSS code look like this:

.menu li{
float: left;
list-style: none;
font: 10px Verdana, Arial, Helvetica, sans-serif;
}
.menu li a {
display:block;
padding:3px;
margin:1px;
border:1px solid #ccc;
text-decoration:none;
color:#332;
background-color: #EEE;
}
.menu li a:hover{
color:#EEE;
background-color: #331;
}

You can download the example file here: Horizontal CSS menu

Works on PPCs and Intel Macs.

Download: VolumeSize v1.0 (67.15 KB)

This free windows program is very useful to make a startup menu from an autorun CD/DVD under windows env. Or just a menu to run a command or program.

You can list 6 different programs to start from.

All the text, heading image and titles are configurable from an ini file.

Download: Swape starter v1.0 (333.09 KB)

Sometimes it is hard to remember many passwords.

PassKeeper is password manager program to stores all your password.

You can export passwords to xml file.

PassKeeper dose also generate random passwords so you can have a strong and random made passwords that is hard to crack.

Download: PassKeeper v1.0 (1.85 MB)

Very useful for administrators who makes hundreds of passwords at a time.
And you can save the password-list on a file.

Download: KeyCodeMaker v1.0 (408.49 KB)

FileDate Mover is a program that moves files from one directory to directory tree based on file date.
If you have a file that have a date 2006.12.24 then it makes directory called 2006/12/filename.ext.
This program runs through a directory and moves all the files to date-based-directory-tree.
You can edit the i18n.ini file to change the settings.

rprog = datemove.exe -d

If you remove -d, then it moves the files from this month too. But if you use -d, it will ignore files that where made this month.

In the zip file you find these files:

• i18n.ini settings file.
• datemove.exe CMD based version of this program. Run datemove in cmd for usage options.
• datemoveX.exe Gui-based version of this program.
• src\ Directory containing the sourcefile in php.

Download: FileDate Mover v1.0 (812.01 KB)

Here is a small GUI for those old DOS command. With this program you can run programs with given file or directory input and output.

Here is how the ini file looks like:

 
[gui]
lprog=Title of the window goes here
lin= INPUT:
lout= OUTPUT:
lrun= RUN
lexit= CLOSE
lcof= Choose a output file / directory
lcif= Choose a input file / directory
lrunbox= "Done!"
lfot= Out File
lfit= Inn file
[run]
rprog = notepad.exe
rodir = 0
ridir = 0
 

rprog ::: you can choose the program to run.
rodir ::: 0=File 1=Directory
ridir ::: 0=File 1=Directory (If given file or directory dose not exist, it will be created.)

So now you can make your own windows based GUI from those good old DOS commands.

Download: Directory/File-chooser v1.0 (195.48 KB)

Configuration:
Just edit the lines in feed.php file to match your server address and other important stuff.

< ?php
//------ Config
$fileDirectory = "./files/"; // path to files
$webURL = "http://somewhere.com/feeds/files/"; // path to files from the web
$title = "Alireza Balouch private videoCasting"; // Title of the feed
$website = "http://www.swape.net";	// your homepage
$description = "My podcast";		// Description of the file
$authorEmail = "me@myplace.com";	// Your email adress
$copyright = "These works are licensed under a Creative Commons License (Some Rights Reserved)"; // Copyright stuff
$ttl = 1441;	// Time to live
//------
?>

Download: SwapeCaster v0.9 (4.03 KB)

 
<form action="?" method="post">
<input name="myCheckbox" type="hidden" value="0" />
<input name="myCheckbox" type="checkbox" />
</form>
 

You put an hidden input before checkbox input with the same name.
Since the last checkbox overwrite the value when it is checked, the hidden input do not return "0" but when the checkbox is not checked, the hidden input with the same name returns a "0".

So when the checkbox is checked it returns "on" and when it is not checked it returns "0"

And to make it easier to click on the ckeckbox use "label" tag around the name.

Before:

After:

This way you can click on the checkbox label and make it checked.
The correct way to write an checkbox checked from the start is like this:

<label>
<input checked="checked" name="myCheckbox" type="checkbox" />
My Checkbox
</label>

You must have imagemagick installed on your server to convert the ico file to png.

 
<!--- html code ---->
<form action="?" method="post">
<input id="site" name="site" type="text"
value="<?php echo $_POST['site']; ?/>" />
<input type="submit" />
</form>
 
< ?php
//--- favicon2png by Alireza Balouch @ swape.net 2008
 
if($_POST['site'] != ''){
 
//finding the hostname
$host = parse_url($_POST['site']);
$host = $host['host'];
$host = explode('.' , $host);
$host = $host[count($host) -2];
$filename = 'img/' . $host . '.png';
 
if (!is_file($filename)){
// getting the favicon
$handle = fopen( $_POST['site'] . '/favicon.ico', "rb");
$contents = stream_get_contents($handle);
fclose($handle);
 
file_put_contents('fav.ico' , $contents );
// converting to png
$StrExec = '/usr/local/bin/convert fav.ico -resize 24x24\> ' . $filename ;
$ret = exec($StrExec);
}
echo '<img src="' . $filename . '" />' . $_POST['site'];
}
?>

I made this class to make dynamic forms. With this class you don't have to write html code for form and a table.

Here is how to use this class:

 
< ?php
include('swapeForm.php');
 
$form = new swapeForm();
$form->add('Name');  // adding input
$form->setAttrib('id' , 'formName');  // adding atributes to input
$form->setAttrib('type' , 'text');
$form->setAttrib('name' , 'formName');
$form->setAttrib('size' , '40');
 
$form->add('Password');
$form->setAttrib('id' , 'formPass');
$form->setAttrib('type' , 'password');
$form->setAttrib('name' , 'formPass');
 
$form->addTextArea('Message','some value'); // adding textArea
$form->setAttrib('cols' , '20');  // adding textarea attributes
$form->setAttrib('rows' , '5');
$form->setAttrib('id' , 'formMessage');
 
$form->formInfo('POST','?'); // adding form method and action values
$form->addSubmit('Send values');
$form->show();
?>
 

Demo
swapeForm_v02.zip

This is not as powerful as Dojo or jQuery or other projects.
It is written very easy for those who also want to learn how to code javascript.

More info: http://code.google.com/p/swapewebtools/

Download: http://code.google.com/p/swapewebtools/downloads/list

Demo:

Effects
Ajax demo 1

Ajax demo 2 with php

 
 
.out{
  display:block;
  background:#CCC;
  position:relative;
  width:9em;
  }
.in {
  background:#fff;
  border:1px solid #999;
  position:relative;
  text-align:center;
  padding:5px;
  left:-5px;
  top:-5px;
  }
 

And here is the HTML code:

 
<div class="out">
<div class="in">
CSS Shadow
Here is a little text to show how it works.
  </div>
</div>
 

Demo: CSS Shadow

Download: css-shadow.zip (409 bytes)

 
div#testlinks {
  position: absolute;
  top: 20px; left: 12px; width: 166px;
  font: 12px Verdana, sans-serif;
}
div#testlinks a {
  display: block; font: bold 1em sans-serif;
  padding: 5px 10px; margin: 0 0 1px;
  border-width: 0;
  text-decoration: none; color: #FFC;
  background: #444;
  border-right: 5px solid #505050;
}
div#testlinks a:hover {
 color: #411; background: #AAA;
 border-right: 5px double white;
}
div#testlinks a span {display: none;}
div#testlinks a:hover span {
 display: block;
 position: absolute; top: 180px; left: 0; width: 125px;
 padding: 5px; margin: 10px; z-index: 100;
 color: #AAA; background: black;
 font: 10px Verdana, sans-serif; text-align: center;
}
 

I just set the span layer inside the my div layer to be hidden and using "a:hover span" to show it.

And here is how the HTML part looks like:

 
<a href="#">Home
   <span>
This is the part that is showing in the box below
</span></a>
 

Demo: CSS pop-ups

All you have to do is putt your pictures in ./pictures/ directory.

You can organize your pictures by category, by putting it under sub-directories.

The thumbs/ directory must be writable (CHMOD 755) to generate thumbnails automatically first time you visit the site. It will help loading your images faster.

HOW TO INSTALL

All you have to do is unzip the file.
Open the sgl3.php and configure the paths.

Putt your pictures under ./pictures/ directory.
And don't forget to chmod 755 thumbs directory.

SYSTEM REQUIRED.

Server with PHP5, php exif module and GD2.
Download:
SGL3.zip (3.6 MB)

Demo site
Demo SG3

And here is the CSS code:

.mydiv{
background-repeat: repeat;
position: relative;
display: block;
width:250px;
height:200px;
text-align: center;
/* Mozilla Firefox and other non IE based browsers ignores the filter style*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled=true, sizingMethod=scale src="back_g.png");
}   
 
/* IE ignores this part IE can not read styles with [attribute]*/
.mydiv[class]{
background-image: url(back_g.png);
}
body{
background-image: url(BG.png);
background-repeat: repeat;
}

Since IE can not show semi-transparent png images, we have to use the filter style that only works in ie. But if we use this code we have to make sure that other browsers can show the png file as well. So we use the styles with attributes. And since IE can not read this part, we can put everything that IE dose not need to read there.

Here is the example file with semi-transparent png file.
Demo: semi-transparent demo

Download: png.zip (30.11 KB)