Welcome to alswebpage.net.

This site will contain various information about web design including PHP, JavaScript, HTML and other scripting languages. There will be various reviews of gadgets and gizmos and most probably lots of other stuff that you might find interesting.

Here is some code i created for a countdown to lunch and dinner timer.

• Countdown to lunch from 23:00 – 10:59.
• Lunch time is from 11.00 – 14:59.
• Countdown to dinner from 15:00 – 17:59.
• Dinner time is from 18:00 – 22:59.

Demo

Source Files

This project was created in Flash CS5 using ActionScript 3.0, the project is called “countdown”, you can find the “.swf” and “.fla” files below.

All the ActionScript is written in the first frame of the actions layer. The “Text” layer holds the various movie clips.

• countdown.swf
• countdown.fla

The code in the first frame is below. You will need 2 dynamic text fields in the first frame called;

1. countdown
2. until

Source Code

//Author: bigal@alswebpage.net
//Website: www.alswebpage.net
//Created on: 06/04/2011
this.onEnterFrame = function()
{
    //Stores the current date
    var today:Date = new Date();
    //Stores the Current Time
    var currentTime = today.getTime();
	//Get the values for the current time
    var sec = today.getSeconds();
    var min = today.getMinutes();
    var hours = today.getHours();
	//Do some maths to find out how long untill midnight
	hours = 23-hours;
	min = 59-min;
	sec = 59-sec;
	//If there are more than 13 hrs left in day
	if (hours >= 13){
		text_out(hours-13,min,sec);
		until.text = "UNTIL LUNCH!";
	}
	//If there are less than 13 and more than 9 hrs left in day
	else if(hours >= 9){
		countdown.text = "It's";
		until.text = "LUNCH TIME!";
	}
	//If there are less than 9 and more than 6 hrs left in day
	else if(hours >= 6){
		text_out(hours-6,min,sec);
		until.text = "UNTIL DINNER!";
	}
	//If there are less than 6 and more than 1 hrs left in day
	else if(hours >= 1){
		countdown.text = "It's";
		until.text = "DINNER TIME!";
	}
	//If there are less than 1 hrs left in day
	else{
		text_out(hours+11,min,sec);
		until.text = "UNTIL LUNCH!";
	}
}
//Function to output formatted time
function text_out(hours,min,sec){
    //If 1 sec, adjust ending.
	if(sec == 1){
		sec =  sec+" sec ";
	}
	else{
		sec =  sec+" secs ";
	}
	//If 1 min, adjust ending.
	if(min == 1){
		min =  min+" min ";
	}
	else{
		min =  min+" mins ";
	}
	//If 1 hr, adjust ending.
	if(hours == 1){
		hours =  hours+" hr ";
	}
	else{
		hours =  hours+" hrs ";
	}
	//Output
	countdown.text = hours + min + sec;
}

Five movie clips are created and will be positioned in the four corners and center of the movies stage. The different movie clips are repositioned when the window is resized, note how the content is not resized to fit the window but rather moves into the available space. This effect is useful for creating engaging websites that can utilize a large portion of screen real estate.

Video Demo

This video demo shows the code in action. Click on on the black screen below to start the video.

Source Files

This project was created in Flash CS5 using ActionScript 3.0, the project is called “FullscreenNoResize”, you can find the “.swf” and “.fla” files below.

All the ActionScript is written in the first frame of the actions layer. Other layers hold the various movie clips.

• FullscreenNoResize.swf
• FullscreenNoResize.fla

The code in the first frame is below. You will need 5 movie clips in the first frame called;

1. top_left
2. top_right
3. center
4. bottom_left
5. bottom_right

Source Code

//Author: bigal@alswebpage.net
//Website: www.alswebpage.net
//Created on: 02/04/2011
//Move Top Left Holder
top_left.x = 10;
top_left.y = 10;
//Move Top Right Holder
top_right.x = stage.stageWidth - top_right.width - 10;
top_right.y = 10;
//Move Center
center.x = stage.stageWidth/2 - center.width/2;
center.y = stage.stageHeight/2 - bottom_right.height/2;
//Move Top Left Holder
bottom_left.x = 10;
bottom_left.y = stage.stageHeight - bottom_left.height - 10;
//Move Bottom Right Holder
bottom_right.x = stage.stageWidth - bottom_right.width - 10;
bottom_right.y = stage.stageHeight - bottom_right.height - 10;
//Add listener to stage triggered by resize
stage.addEventListener(Event.RESIZE, resizeListener);
//Function called by resize
function resizeListener (e:Event):void {
//Uncomment the line below to see actual values in output window
//trace("stageWidth: " + stage.stageWidth + "\r" + "stageHeight: " + stage.stageHeight);
//Move Top Left Holder
top_left.x = 10;
top_left.y = 10;
//Move Top Right Holder
top_right.x = stage.stageWidth - top_right.width - 10;
top_right.y = 10;
//Move Center
center.x = stage.stageWidth/2 - center.width/2;
center.y = stage.stageHeight/2 - bottom_right.height/2;
//Move Top Left Holder
bottom_left.x = 10;
bottom_left.y = stage.stageHeight - bottom_left.height - 10;
//Move Bottom Right Holder
bottom_right.x = stage.stageWidth - bottom_right.width - 10;
bottom_right.y = stage.stageHeight - bottom_right.height - 10;
}
//Set the stage so it does not scale
stage.scaleMode = StageScaleMode.NO_SCALE;
//Align the stage so that top left is the origin
stage.align = StageAlign.TOP_LEFT;

Click the image above to play the concept game (you may have to click on the game at first to begin):

• UP KEY: Accelerate.
• LEFT and RIGHT KEYS:  Rotate your ship
• SHIFT: Fire your LAZOR!

The following code assumes that you have necEdit.js and nicEditorIcons.gif in the same directory.

<HTML>
<HEAD>
<!– Inculde your nicEdit.js script –>
<script src="nicEdit.js" type="text/javascript"></script>
<!– Create a NicEdit and custom save button script –>
<script type="text/javascript">
<!–
//Create a NicEdit pointer
var myNicEditor;
//Edit the onDomLoaded event
bkLib.onDomLoaded(function() {
//Crea a NicEdit instance
myNicEditor = new nicEditor({buttonList : ['save','bold', 'italic', 'underline', 'subscript', 'superscript', 'strikethrough', 'forecolor', 'bgcolor', 'image', 'left', 'center', 'right', 'justify', 'outdent', 'indent', 'link', 'unlink', 'hr','removeformat'],
//The save function
onSave : function(content, id, instance) {
//Add call to the submit_post function here passing the content off the three instances.
submit_post(myNicEditor.instanceById('myInstance1').getContent(), myNicEditor.instanceById('myInstance2').getContent(), myNicEditor.instanceById('myInstance3').getContent());
}});
//Load NicEdit
myNicEditor.setPanel('myNicPanel');
myNicEditor.addInstance('myInstance1');
myNicEditor.addInstance('myInstance2');
myNicEditor.addInstance('myInstance3');
});
/*
//submit_post function:
title: the content from the Instance for this field.
content: the content from the Instance for this field.
other: the content from the Instance for this field.
To DO:
1)this could be edited to accept arrays
*/
function submit_post(title,content,other){
var params = new Array();
//Set the parameters from the function input
params['post_title'] = title;
params['post_content'] = content;
params['post_other'] = other;
//GET to self
post_to_url('index.html',params,'GET');
}
/*
//post_to_url function:
path: is the page you want to submit the data to.
params: are the parameters to send.
method: is either GET or POST like a normal form (Default POST).
*/
function post_to_url(path, params, method) {
method = method || "post"; // Set method to post by default, if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
//Create a hidden form.
var form = document.createElement("form");
//Add a method an action to the form
form.setAttribute("method", method);
form.setAttribute("action", path);
//Prepare the parameters
for(var key in params) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
//Add to hidden form
form.appendChild(hiddenField);
}
document.body.appendChild(form); // Not entirely sure if this is necessary
//Submit the hidden form.
form.submit();
}
–>
</script>
</HEAD>
<BODY>
<DIV>
<P>This example uses the three Instances and one NicPanel. You can edit all three fields then click the "Save" button on the NicPanel to submit all three field. At the moment it is setup to "GET" on the index.html by calling the url "index.html?post_title=Title&post_content=Content&post_other=Another+Field."</P>
</DIV>
<!– This is the first field: title –>
<DIV>
<DIV id="myInstance1" style="width:300px;border:1px solid #000000">Title</DIV>
</DIV>
<!– This is the second field: content –>
<DIV>
<DIV ID="myNicPanel"></DIV>
<DIV ID="myInstance2" style="height:300px;border:1px solid #000000">Content</DIV>
</DIV>
<!– This is the third field: other –>
<DIV>
<DIV id="myInstance3" style="width:300px;border:1px solid #000000">Another Field</DIV>
</DIV>
</BODY>

You can download the NicEdit Save Button Example buy clicking Here.

This example includes:

• index.html — This contains the custom javascript and a custom form with three text fields.
• nicEdit.js — The nicEdit script.
• nicEditorIcons.gif — The images used by nicEdit

To use the example, place the three files above in the same directory on your webserver.

In response to crazy’s post (March 13, 2010 at 7:01 am) i have managed to get the nicEdit bar loading in Google chrome and Firefox, however it renders incorrectly in IE. The files can be found Here (NiceEditandjQuery.zip)

Update:

• Simple Image Gallery is now included by using [GALLERY=X] where X is the gallery number.
• Simple Image Gallery now runs off the WordPress database.
• Simple Image Gallery now has an Admin Panel.
• Simple Image Gallery now has a simple inbuilt slides-show feature.

This WordPress plugin was created primarily for use on my site however you will soon be able to download and use this plugin in your WordPress site via the Simple Image Gallery homepage under WEB DESIGN.

This is how you can edit your WordPress theme to verify using the META method.

First you need to login to Google Webmaster Central then add a site and select the verification method you are using as “META”.

<meta name=”google-site-verification” content=”[[VERIFICATION CODE]]” />

Next you need to copy the meta tag you will be inserting into your WordPress theme.

1. Login To Your WordPress admin center.
2. Under The “Apperance” menu select “Editor”.
3. Select the “Theme File” containing the HEAD section of your document, this is typically called HEADER.php or something similar (The example below is using the ADSimple Template.)
4. Paste the copied META tag into the head section so you get something that looks like

<HEAD>
<TITLE>My Page </TITLE>
<meta name=”google-site-verification” content=”[[VERIFICATION CODE]]” />
</HEAD>

5. Verify the meta tag is in place by visiting your website and viewing the page source (line 5 in the image below.)
6. Head back to Google Webmaster Central and verify your WordPress Site.

Notes: If you change your site template, you will need to repeat the steps above to re-verify your website.

I would recommend taking a look at this huge archive of amusing, interesting, humorous and sometimes adult content when you have a few moments to take in the worlds of other peoples minds.

When you sign up you are given your own page to show you achievements and other stuff. Check mine out at salti.newgrounds.com