Overview

In Dragon Age:Origins and there was this effect in the inventory where you can hold right-mouse button and bunch of actions will show up. like in this screenshot.
So I tried to throw some JS to make a menu like it and here it is!

Demo Here

Usage

Images /Menu Items:

• menu items must be a .png file
• it must be a square (width=height)
• width/hight must be between 40px and 80px

the menu background image

the menu background (ball.png) must be 160px in width and height otherwise you will get crappy results


HTML

QMenu will need a div or any element to work on, when the user holds the left mouse button on that container or div the menu will show up, so you will just need a div with an id


JavaScript


QMenu needs 4 arguments:

• The container/Div ID
• The number of menu items , must be 2 or 4
• Array of functions that will be assigned to each menu item (must be equalivant to the number of items)
• Array of Images (img src) that will be the background of each item

Sample

<script type="text/javascript" >
window.addEvent('domready',function(){
var functions =Array(
function(){window.location="http://www.codecall.net/";},
function(){alert('function 2 running')},
function(){alert('function 3 running')},
function(){alert('function 4 running')}
);
var imgs =Array(
'img/cc.png',
'img/edit.png',
'img/del.png',
'img/detail.png'
);
var x=new QMenu(
'main',
2,
functions,
imgs
);

var x=new QMenu(
'main2',
4,
functions,
imgs
);
});
</script>

Easy and simple as usual

Download

Overview

you must have seen these neat auto-complete features in new websites where you type characters and the website views the words you might be looking for, that’s what magic auto-complete does.
it can be easily applied in ONE LINE!, all you have to do is to set the server-side script(whatever your language) to generate the potential results in an XML format and magic Auto-complete will do the “magic for you”
you can view a Demo here

Usage

The server-side page

first you have to write a server side script that accepts the chars(or word) that the user will enter, and return the results in a simple XML, for example my PHP script is:

#sample PHP output page
header("content-type:xml");
if(isset($_GET['minput'])){
	mysql_connect("server","username","password");
	mysql_select_db("database");
	$q=mysql_query("select name from names where name like '%$_GET[minput]%' ");
	if(mysql_affected_rows()>0){
		print "<output>";
		while($res=mysql_fetch_array($q))
			print "<el>$res[name]</el>";
		print "</output>";
	}

}
?>

it doesn’t matter what server-side you are using for “magic auto-complete” just return the correct XML format, heres a sample of how the XML should look like:

<output>
		<el>amrosama</el>
		<el>amr_OSama2020</el>
		<el>jordan</el>
		<el>mathx</el>
		<el>marwex</el>
		<el>somename</el>
		<el>testing name</el>
</output>

-note: make sure you set the header’s “content-type” to “xml” so that the ajax response is considered xml
Client Side Web Page

once you get the correct XML format all you need to do is to use magic auto complete by doing this:

window.addEvent('domready',function(){
	var x=new mautocomplete('mainbox','db.php','get',3);
});

as you can see we passed 4 arguments:

1. The HTML input ID
2. Server side page or a static xml file
3. the used method in sending the AJAX request
4. number of characters required to send an AJAX request once the user types them

that’s all to
you can edit the CSS file to suit your preferences

Download here

please report any bugs here

Overview

a multible select control, that lets users select items from more than one category in a nice and lovely effect. it can be used in many situations like tagging a blog post or categorized email list and much more.

demo here

Usage

its very simple, all you need to do is to place an empty “DIV” for your dynalist and to fill it you will need to make an instance of the class just like this:

new DynList('main',content);

as you can see theres 2 arguments the first one is the id of the empty “DIV”, the second is an array of parents and their child nodes

before we get into creating the array , we need to understand how it should like:

|Parents|
	|parent 1, value(name)|
		|child 1, value|
		|child 2, value|
		|child 3, value|
	|parent 2, value(name)|
		|child 1, value|
		|child 2, value|
		|child 3, value|

as you can see you can have as much parents as you want and each parent have an array of child nodes (no, you cant have parent nodes under parent nodes, at least not in this release).

child node

heres a sample of a child node:

{
title:'C and C++', value:'cpp'
}

its an object with 2 attributes a “title” and a “value”. title is the text that will appear next to it’s checkbox. and value is what will be sent to the server-side

parent

parent sample:

var parent1={
title:'Web Development',
value:'web',
children:Array(
			{
			title:'PHP', value:'php'
			},
			{
			title:'ASP.NET', value:'asp.net'
			},
			{
			title:'Classic ASP', value:'asp'
			},
			{
			title:'JavaScript', value:'js'
			},
			{
			title:'CSS', value:'css'
			},
			{
			title:'HTML/XHTML', value:'css'
			}

			  )
}

it might seem complex , but its just an array that consists of 3 attributes:

-title: text in the display
-value: “dynalist” sends each childnode value in an array that array will be named as the parent value (you can see the demo and submit)
-children: in this element we just put an array of child nodes

Parents Array

“dynalist will only take an array of parents, so even if you have one parent it has to be in an array. it should look like this:

var content=Array(family1,family2);

simple, eh?!

Download

Overview

ever wanted to add a nice picture gallarie to your website?

need something fast , simple and easy to navigate through?

ITS MOOSTASH, the simple image slideshow. it loads thumbnails of your pictures and lets the user navigate through them. using fancy effects and tooltips. ill stop rambling and get right into the subject.

Demo here

how can you use it??

its pretty easy to use all you have to do is to follow the standard layout and you will get your slideshow in no-time.

The HTML:

<div id="moostash" >
<table border='0' align="center" style="width: 800px">
	<tr>
		<td style="width: 100px">
		<img id="left" src="images/arrowl.jpg" class="imag" />
		</td>
		<td align="center" style="width: 550px">
		<div id='imgholder' >
		<img src=""  id='mainimg'>
		<img src="images/loadingblack.gif"  id='loading'>
		</div>
		</td>
		<td style="width: 100px"><img id="right" src="images/arrowr.jpg" class="imag"  />
		</td>
	</tr>
</table>
<div id='menu'>
<div  class='thumbs'>
	<img
	src="show/thumb1246139146.jpg" class="thumb" id='img6'
	title="Image 10"
	original="http://farm1.static.flickr.com/97/223052548_9f5ff24797.jpg" rel="some random picture from google, diffrent from the thumb, this is also a long description">

	</div>
</div>

you can edit the setting in the CSS sheet to suite your preferences , but please dont change the id or class names of of the HTML elements inside the “moostash” div because the moostash class uses it.

Stash your pictures

each image should have a thumbnail and an original image, a standard image may look like this:

<img
	src="show/thumb1246139146.jpg" class="thumb" id='img6'
	title="Image 10"
	original="http://farm1.static.flickr.com/97/223052548_9f5ff24797.jpg" rel="some random picture from google, diffrent from the thumb, this is also a long description">

theres 3 important Attributes:

• src: the thumbnail link, if you dont have thumbnails you can put the original link here
• original:(optional) the original picture link which will be used to load the main big image in the slideshow
• title: used for tooltips, the title of the tooltip box that will pop-up on mouse-over
• rel: used for tool-tips: description of the image

did you notice that original attribute is optional, MooStash looks for the original image if the original attribute isnt specified or empty. for example if the thumbnail link is “images/thumbSomePicture.jpg”, it removes the “thumb” from the link and use it as link “images/SomePicture.jpg”

Starting Moostash

all you need to do is to initialize a moostash object like this:

<script
type="text/javascript">
window.addEvent("domready",function(){
var x0=new MooStash("moostash");
});
</script>

here we only passed the id of the moostash div, this will let you run more than one slideshow at the same page.

you can try the slideshow feature (still under-construction) by doing this:

<script
type="text/ javascript">
window.addEvent('domready',function(){
var x0=new MooStash('moostash',true,10000);
});
</ script>

thats all for starting your slideshow!

Download

apparently this project is about making a sudoku game, i fist wrote the game in c#.net and rewrote it in c++ and its much faster on c++, so ill use the source code of the c++ to explain the project but you will be able to download the c# code.
Overview about sudoku
sudoku consists of a grid of 81 cells each row and column consists of numbers 1-9 (not in order) and each square in the grid (9 cells) have all the numbers 1-9. the goal of the game is to fill out the blanks in the empty cells to complete the 81 cells and respecting the rules of a valid sudoku grid, you can judge a valid sudoku grid if:

• -no repeated number in every row
• -no repeated number in every column

• -no repeated number in every square

The Project:
We can get solved sudoku grids and hide some numbers and make the user solve them, but that would be just stupid and hard. our project will be able to generate the 89 numbers by itself, then an algorithm will select numbers to hide from each square depending on the difficulty level and thats the tricky part. then we will need to validate the input the the user do to see if he solved the sudoku or not.
im tired of talking, lets jump into the coding in the next page
btw you can download the source code or the compiled version from below

Downloads:

C++ Compiled EXE Source-Code C#.net Compiled EXE Source-Code

screenshot

Hi all!

the old site was a disaster, i had to do something fast. so i used wordpress a CMS system, i didnt write a single line of code (im not happy with it) but hopefully using WordPress will make me post more projects much faster, i have like 5 projects to post right-now.

i think ill be posting more about JavaScript MooTools, im currently enjoying myself coding in it,  soon you will be able to download MooTools snippets and classes  that can be easily used in your own site.

laterz, better go post the first project MooStash!