• $totalthreads - Displays the total number of threads in the forum
• $totalposts - Displays total number of posts in the forum
• $numbermembers - Display total number of members in the forum
• $totalonline - Displays the number of total users currently online
• $numberregistered - Displays the number of total registered users currently online
• $numberguest - Displays the number of total guests currently online
• $recordusers - Displays the number of most users ever online
• $recorddate - Displays the date on which most users were ever online
• $recordtime - Displays the time on which most users were ever online
• $activeusers - Displays a list of currently active/online Users (i.e. logged in)
• $activemembers - Displays the number of members who are active in the forum
• $newusername - Displays the username of the newly registered user
• $birthdays - Displays list of users whose birthday is today
• $upcomingevents - Displays list of upcoming events

$BBuserinfo Array, this can show anything thats stored in the user table

• $bbuserinfo[username] - Username
• $bbuserinfo[userid] - User ID number
• $bbuserinfo[posts] - Users postcount
• $bbuserinfo[signature] - Users signature
• $bbuserinfo[email] - User Email Address
• $bbuserinfo[homepage] - Users homepage in profile
• $bbuserinfo[msn] - Users MSN address from profile
• $bbuserinfo[yahoo] - "" Yahoo ""
• $bbuserinfo[icq] - "" ICQ ""
• $bbuserinfo[usertitle] - Users custom usertitle

$VBoptions Array, these are the options stored in the settings table, i.e things that you configured from vbulletin AdminCP>>vbulletin Options.

• $vboptions[forumactive] - Status of whether forum is turned on/off
• $vboptions[bbclosedreason] - Reason why forum turned off
• $vboptions[bbtitle] - Forum title
• $vboptions[bburl] - Forum URL
• $vboptions[hometitle] - Site homepage Title
• $vboptions[homeurl] - Site homepage URL
• $vboptions[copyrighttext] - Site copyright text
• $vboptions[privacyurl] - URL to forum privacy statement
• $vboptions[webmasteremail] - Webmaster email address
• $vboptions[contactuslink] - contact us URL
• $vboptiions[enablehooks] - Status of plugin/hook system
• $vboptions[imagetype] - Determine if using GD or Imagemagick
• $vboptions[timeoffset] - forum time offset
• $vboptions[cookiepath] - forum cookie path
• $vboptions[legacypostbit] - Determine if using legacy (side) postbit or new horizontal postbit
• $vboptions[use_smtp] - If SMTP mail is enabled
• $vboptions[smtp_host] - SMTP hostname
• $vboptions[smtp_port] - SMTP port number
• $vboptions[allowregistrations] - Determine if new users can register
• $vboptions[welcomemail] - Determine if welcome mail is sent on registration
• $vboptions[avatarenabled] - Check if avatars are enabled
• $vboptions[reputationenable] - Check if reputation system is enabled

$stylevar Array, this contains all the paths to forum images and other style variables that are editable in the Styles and templates >> Stylevars

• $stylevar[titleimage] - Path/filename for top banner
• $stylevar[outertablewidth] - The width of your forum
• $stylevar[spacersize] - Spacing betwen main body and content
• $stylevar[cellspacing] - Inner border width
• $stylevar[cellpadding] Table cell padding
• $stylevar[formwidth] - Form width in pixels
• $stylevar[imgdir_buton] - Path for forum buttons
• $stylevar[imgdir_statusicon] - Path for status icons
• $stylevar[imgdir_attach] - Path for attachment icons

$css array, this is where all the CSS attributed can be located

• $css variables[body][background] - Body background colour
• $css[body][color] - Body text colour
• $css[body][LINK_N][color] - Body normal links
• $css[body][LINK_V][color] - Body visited links
• $css[body][LINK_M][color] - Body link hover colour
• $css[.page][background] - Page background colour
• $css[.page][color] - Page text colour
• $css[.tborder][background] - Table border background colour
• $css[.tborder][color] - Table border font colour
• $css[.tcat][background] - Category strip background/colour
• $css[.tcat][color] - Category strip font colour
• $css[.thead][background] - Table header background gradient/colour
• $css[.thead][color] - Table header background colour
• $css[.tfoot][background] - Table footer background colour/gradient
• $css[.tfoot][color] - Table footer text colour

Ad Location Template variables:-

• $ad_location[ad_footer_end] - Displays content of ad_footer_end template
• $ad_location[ad_footer_start] - Displays content of ad_footer_start template
• $ad_location[ad_forumdisplay_afterthreads] - Displays content of ad_forumdisplay_afterthreads template
• $ad_location[ad_forumdisplay_afterforums] - Displays content of ad_forumdisplay_afterforums template
• $ad_location[ad_header_logo] - Displays content of ad_header_logo template
• $ad_location[ad_header_end] - Displays content of ad_header_end template
• $ad_location[ad_navbar_below] - Displays content of ad_navbar_below template
• $ad_location[ad_showthread_beforeqr] - Displays content of ad_showthread_beforeqr template
• $ad_location[ad_showthread_firstpost] - Displays content of ad_showthread_firstpost template

Miscellenous:-

• $notices - Used to display notices (for 3.7 onwards)
• $notifications_total - Used to display total number of unread notifications (for 3.7 onwards)

No related posts.

Final Result

A Transparent Website Layout is what we are about to make. You can click on the image to see a full-scale version.

Background

Step 1
Lets start off by creating a new document 2000×2000px.

Step 2
Using the marquee tool, create a box 500px wide by 1500px tall. Fill with black

Step 3
Go to Edit>Define Brush Preset. Change the name to “Square Brush” and press ok. Now we should have our brush in with the rest of the brushes.

Step 4
Close out of the 2000×2000px document, because we are done with that one. Now open a new document 1200×1200px and fill with black.

Step 5
Create a new layer (Control + Shift + N) and fill it with black also.

Go into Filter>Render>Fibers. Adjust the settings like I have to get a real good contrast.

Step 6
Now Go into Filter>Blur>Motion Blur and adjust the settings to 999px.

Using the transform tool (Control + T), hold down shift and rotate to the left one spot. Stretch out the fibers so that it covers the entire area.

Step 7
Open up the Levels (Control + L) and adjust them as I have. This is going to darken our fibers.

Step 8
Change the blend mode of the fibers layer to Color Dodge.

Now select the brush we made, then push F5 to open up our brush settings.

Change the settings as I have them.

Step 9
Create a new layer (Control + Shift + N), and move it under the fibers layer.

Pick a blue color and paint a little area with our brush. Since we changed our brush settings, the brush we made should be scattered something like what I have.

Step 10
Go to Filter>Blur>Motion Blur with the distance at 999 px.

Step 11
Repeat steps 9 and 10 with different variations of blue, creating a new layer for each color, until you get something you like.

Step 12
Create a new layer just under the fiber layer. Click on the gradient and choose the Reflected Gradient tool. Make sure the color is white to nothing.

Click and drag a gradient in the middle of the document, following the line of the fibers.

Change the Blend Mode to Overlay, and drop the opacity down to 60%. This will give us a light source in the middle of the document.

This is the finished product of our background. Now we are going to get started on putting together the actual website.

Website

Step 13
Before we get any further I am going to take all of the layers from my background and put them into a folder to keep it organized.

Click on the background layer, then click and drag a guide out to the middle of the document. The guide should snap into place at the middle. If it doesn’t go to View and make sure Snap is checked.

Using the Marquee Tool create a box 960×1200px. We are going to move it over using the transform tool (Control + T) to get the anchor points on the corners and the middle of the box. Line up the middle anchor points with the middle guide. Put a guide on each side of the box.

Step 14
Using the marquee tool create a box 375×60px and rest the right side of it on the right guide and the top on the top of the document. Hold down shift and move it down six times. Put guides on the top, bottom and left sides.

Using the Rounded Rectangle Tool, create a box inside the guides, with a radius of 10px.

We are going to add some layer styles to the box, so go into the first icon at the bottom of the layers palette, and click on Inner Glow. Change the settings as I have them with a color of #666666, then click on Stroke with a color of #000000.

Step 15
Click on the marquee tool. Now Control and click on the shape we just made. Hold down shift and move the shape up three spaces. Using a linear gradient fill the area with white. Drop the opacity down to 60%.

Step 16
Create a new layer and change the foreground color to #3399FF. Control + click on the box. Now, using the linear gradient again, create a blue gradient at the top of the box.

Step 17
Do Control + Shift + I to get the inverse selection, then select the white gradient layer and delete. This will get rid of the extra part that we don’t need.

Step 18
Using Myriad Pro Black at 16 pt type out your navigation in white.

Using the square marquee tool click and drag a box 1px wide and the height of the box. Fill it with #333333. Move the marquee over one spot and fill it with #000000.

Step 19
Repeat step 18 so there is a break in between each button. Put all the navigation layers into a folder.

Step 20
We are going to create the body of our website. Using the marquee tool create a box 960×970px and rest the top of the box on the bottom of our navigation bar. Hold down shift, and move it down three spaces. Put a guide on the top and bottom of the marquee.

Using the Rounded Rectangle tools, Create a box within those guides as well as the far left and right ones.

Click and drag the layer styles from the navigation box onto the website box.

Step 21
Grab a logo and bring it into your document. Line up the left side of the logo with the left guide.

Step 22
Using the marquee tool create a box 600×240px and put guides around it like we did with the navigation and the website box. Using the rectangle tool make a box on the guides we just created. Give it the same layer styles as the navigation, fill it with white and change the opacity to 20%.

Put the white box into a new folder called “Post 1”.

To add the reflection, use the Ellipse tool to create an oval on the bottom half of the box. Control and click on the circle and then do Control + Shift + I to get the inverse selection. Select the linear gradient with white to nothing selected for the color. Click and drag a gradient.

Once you get a gradient you like do Control + Shift + I and delete the extra area.

Step 23
We are going to go and grab this laptop image (http://www.sxc.hu/photo/1185958)from stock.xchng.

Open it up in Photoshop and click on your Crop Tool. Adjust the settings so it is 200×200px at 72 pixels/inch.

Bring it into our document.

Step 24
Put the photo at the top left of the post box, then holding down Shift, move the photo down twice and to the right twice.

We are also going to add some layer styles. So click on the layer styles icon and click on stroke. Change the settings like what I have, with a color of white. Now add a drop shadow.

Step 25
Now lets put in some dummy copy:

Etiam ultricies nisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. ac, enim. Continue…

The “Etiam ultricies nisi” will be our title. Arial/Helvetica Bold at 32 pt. The rest of the copy will be Verdana at 11pt. The color of the “continue” will be #3399FF.

Step 26
Right-click on the “Post 1” folder, Duplicate Layer Set and call it “Post 2”. Put the top of the second post on the bottom of the first post and then hold down shift and move “Post 2” down two spaces.

Step 27
Repeat step 26 for the third and fourth posts. For the fourth post click on the “Post 4” folder, then click on the layer mask (second icon from the left on the layers palette). Use the marquee tool to create a box around the area of the fourth post that is on the website box. Hold down shift and move the marquee box up two spaces. Then do Control + Shift + I to get the inverse selection and fill with black.

Step 28
Now let’s make the sidebar. Using the square marquee tool make a box 300px wide and put it on the far right guide. Hold down shift and move it in two spaces. Put a guide on the left and right sides of the square marquee.

Step 29
Using the rectangle tool make a box within the guides we just made. Make sure the box lines up with the first post box at the top and it goes below the bottom of the website box at the bottom.

The sidebar box is going to be white and have the same layer styles as the post boxes.

Step 30
Click on the mask icon on the layers palette. With the square marquee tool, create a box that covers the sidebar from the very bottom of the document to the bottom of the website box. Hold down Shift and move the square marquee up two spaces. Fill the area with black. This should get rid of that extra area.

Step 31
We want to add a reflection like we have on the posts. To do this we have to duplicate the layer with Control + J and move it over above the sidebar box. Control and click on the sidebar box, then Control + Shift + I to get the inverse, and delete the extra area.

For the search bar make a white box with the square marquee tool. The size of the box is going to be 260×30px and it is going to be placed at the top left of the sidebar. Hold down shift and move it over two spaces to the left and two spaces down.

The search box is going to have the same layer styles as the sidebar box.

Using the text tool create some text that says “Search” with 16pt Verdana and a color of #CCCCCC.

Step 32
Now we are going to put in some ads. These ads are 125×125 and are going to go two spaces down, holding Shift and two spaces from the edges.

The bottom two are going to be Shift and down one space from the bottom of the top ads.

While you are at it put a guide on the left and right sides of the ads.

Step 33
Click on the Rectangle Tool and in the options, click on the down arrow to the right of all the different shapes. Click on fixed size, and change it to 260×30px. Put the rectangle so the top is touching the bottom of the ads, and holding down shift move down two spaces.

Change the color to white, at 20% opacity

Step 34
Now to get the reflection, Control and click on the rectangle we just made. Push Control + Shift + N to get a new layer. Now click on the square marquee tool and move our selected area up so the bottom is at the middle of the rectangle.

Fill with a white to nothing linear gradient.

Step 35
Type in “Related Links” with the font, Myriad Pro Black, and a size of 16 pt.

We are going to give it a slight background shadow to make it stand out a little better.

Step 36
For the links we are just going to use the generic Wordpress links:

Development Blog Documentation Plugins Suggest Ideas Support Forum Themes Web Hosting WordPress Planet Wordpress Themes
The text is going to be white 12pt Verdana. We are going to hold Shift and move it in two and down one from the “Related Links” head.

Step 37
To get the arrow bullets, select the custom shape tool (same button in the toolbar as the rectangle tool) and choose the same arrow I did.

Change the color to #3399FF and add a Bevel and Emboss from the layer styles icon.

Step 38
Repeat steps 37 and 38 except our header is going to be “Categories” and for our mock up we will just put:

Category Number One Category Number Two Category Number Three Category Number Four

Step 39
Repeat steps 37 and 38 except our header is going to be “Archives” and for our mock up we will just put:
March 2009 April 2009 May 2009 June 2009 July 2009

Step 40
We want to add a blue glow on the website box like we have on the navigation bar. To do this Control and click on the website box and create a new layer with Control + Shift + N.

Using the linear gradient click and drag a #3399FF gradient from the top down.

Step 41
Finally we will put in our footer information. Hold down shift and move the footer text down two spaces.

Final

Here is the final version. The great part about working with a transparent website is that you can change the background image to completely change the look of your website.

Source: Webapper

Related posts:

1. Photoshop Tutorial: Make a Realistic LCD HDTV from Scratc
2. 10 Design Practices to follow in your Website / Blog
3. Photoshop Tutorial: How to Make Text Paths

jQuery Popup Modal Dialog Windows

Modal dialog windows are a great way to show quick information to your users, but to also alert them of errors, warnings, prompts for information and more.  When you bring jQuery into the mix, you know you’re going to end up with a slick dialog that really makes the application or website come alive.  The following is a list of 15+ jQuery Popup Modal Dialog Plugins and Tutorials.

There are a couple towards the bottom that you’ll want to pay attention to.  On one the original is in Italian, but I’ve included a link to an English translation.  The other is more on a backend, but I’ve included a link to the zip file for downloading the files.

Let the fun begin!  If you know of any that are missing but should be included, drop a comment!

jqModal
qModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, akin to a “Swiss Army Knife”, and makes a great base as a general purpose windowing framework.

NyroModal
Modal popup windows provide a quick way to show data without reloading the entire page. One of the big problems with jQuery Popup Modal Dialog window plugins is the customization. This plugin tries to solve those problems. The default CSS contains only optional rules. Without it, the plugin will works perfectly —but will also looks very sad. Regarding the animations, you can simply redefine them from A to Z.

Simple jQuery Modal Window Tutorial
In this tutorial, I’m going to share how to create a simple modal window with jQuery. It selects all the anchor tags with name attribute set to “modal” and grab the DIV #id defined in the href and displays it as a modal window. jQuery has made everything so simple, be sure to check out the demonstrations, examples I made.

jQuery UI Dialog
The jQuery UI framework offers up a functional Dialog widget that allows resizing and also the ability to display forms. The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the ‘x’ icon by default.

SimpleModal
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

Boxy
Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created. And for simple usage scenarios, boxy also provides a jQuery plugin for automatically hooking up links and forms, as well as an ask() helper for presenting multiple choices to the user.

ThickBox
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

jQuery BlockUI Plugin
The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

jQuery Impromptu
jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.

jQuery Alert Dialogs (Alert, Confirm & Prompt Replacements)
This jQuery plugin aims to replace the basic functionality provided by the standard JavaScript alert(), confirm(), and prompt() functions. What’s the benefit of using custom methods? These are completely customizable via CSS. You can set a custom title for each dialog. IE7 users get an ugly warning and usually have to reload the page if you use a regular prompt(). These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars.

How to Create a Stunning and Smooth Popup Using jQuery
Nowadays, websites are more and more rich and interactive and users are becoming more and more critical with all things in websites. Using windows popup to show important information are in the air and We are going to learn how to create a stunning and great window popup from the scratch using jQuery in a simple and clean tutorial.

jQuery Ajax Validation Contact Form with Modal + Slide-in Transition
Due to popular demand, here is a tutorial on how I created one of the more complicated pieces of machinery on my new site: the contact form. All you need is jQuery. No plugins are necessary for this to work, and it is only 2kb of extra code in addition to the jQuery library. This also works on all browsers, IE6 and up.

Creating an Exit Modal Box using jQuery
Do you need to show a specific message to the visitors that leave your website? You can do that by initiating a modal box before they close the browser window. To do this we need to include 2 JQuery files (the actual library and a plugin written by Eric Martin), the modal box’s CSS and the file that triggers the modal box based on the user’s action.

Upload in Modal Window and Pass Values with jQuery
Do you publish your blogs with Wordpress? If yes, you know the inline popup window which opens if you like to upload / insert an image into your article. This tutorial shows you how-to use the jQuery Plugin ThickBox and some jQuery code to upload a file and pass a value to the parent page. You can use this kind of feature in your custom CMS or maybe you like use it as a basic for your own file upload plugin or gadget?

jQuery Modal Choose Component
This original article is written in Italian, but here is the translated English version. I wanted to be sure and include this in the rundown because it gives another option on how to allow users to choose values for a form field. It’s designed as an alternative to the combo box, or select dropdown menu. It’s not perfect, but it’s an interesting take on a common UI component and I believe deserves to be on the list.

jQuery Modal Dialog Plugin
This plugin link goes to the working example and documenation page that shows off some real nice jQuery modal dialogs for errors, warnings, prompts and more. Getting to the download is a little tricky unless you follow this link to download.

ColorBox
ColorBox is a lightweight, customizable lightbox plugin that simulates some things that you would like to accomplish with a jQuery popup modal dialog window. It can allow you to show popup ajax, inline and iframed content as well as photos and other media. It’s writting in jQuery plugin format and can be chained with other jQuery commands.

Related posts:

1. jQuery Lightbox
2. Turn Off Windows Security Center Alert Taskbar Popup

What do you think about Windows 7 Sidebar?

Don’t miss!  If you love it.  Thoosje Windows 7 Sidebar is a Windows 7 Style sidebar for Microsoft Windows XP and Vista that has gadgets like media players, Sticky´s, Calculators, Google search, Yahoo search, and a large number of more search engines. It has also Vista sidebar gadgets like weather and system uptime and lots more useful gadgets.

Why Thoosje Windows 7 Sidebar

The sidebar uses 50% less RAM and is faster than the original Microsoft Sidebar with more extras and works on Microsoft Windows Vista and XP.

More about Gadgets

Gadgets are mini applications with a variety of possible uses. They can connect to web services to deliver business data, weather information, news updates, traffic maps, even slide shows of photo albums. Gadgets can also integrate with other programs to provide streamlined interaction. For example, a gadget can give you a view of all your online instant messaging contacts, the day view from your calendar, or an easy way to control your media player. Gadgets can also have any number of dedicated purposes. They can be Search Gadgets, Clocks, sticky notes, and more.

:: Download Thoosje Windows 7 Sidebar
:: Support Windows XP / Vista
:: Thoosje
:: File Size : 5.02 MB

Related posts:

1. Install Windows 7/Vista From USB Drive
2. Unlock The Super-Administrator Account In Vista
3. Make a bootable USB installer for Windows XP, Vista, 7 with WinToFlash

Related posts:

1. Turn Off Windows Security Center Alert Taskbar Popup
2. Building Autorun Configurations

Method one, simpler:
1. Start - Run
2. type sfc /scannow and OK
3. Follow the system prompts in the process
4. Reboot the computer when System File Checker complete the work.

Method two, complicated:
1. Start - Search
2. Select More Advanced Options and choose Search Hidden Files and Folders option.
3. Also check Search System Folders and Search Subfolders.
4. In the All or Part of the File Name box, type ie.inf
5. In the Look In drop-down menu, select C: and Search
6. When ie.inf file is located right click and choose Install on the context menu
7. Follow the procedure and reboot the computer when file copy process is complete

After those steps your Internet Explorer will be repaired and you will be able to use it again.

However, since IE 6 has so many vulnerabilities it is recommended to think about using more stable and secure Internet browsers available online, such as Firefox or Opera.

Related posts:

1. Install Windows 7/Vista From USB Drive

The mx.controls.Alert class has a static method that shows the Alert control with the title, message, and requested buttons. The following code block will demonstrate how to declare a listener for your Alert control, as well as what to do when you catch the event.

In short, the code shows how to create an Alert control which has 2 buttons, Yes and No. Keep an eye out for for line 12 – this is where we delegate the button click listener to the handleAlert method.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import mx.controls.Alert;
import mx.utils.Delegate;
 
// show the Alert control
public function showAlert() : Void
{
    // the show method follows the method signature from the Flex Actionscript API
    Alert.show( "Are you sure?",
                         "Confirm Delete",
                         Alert.YES| Alert.NO,
                         null,
                         Delegate.create(this, this.handleAlert),
                         null,
                         Alert.YES);
}
 
// handle the Alert control button click
public function handleAlert( event:Object ) : Void
{
    if( event.detail == Alert.YES)
    {
        // YES button was clicked
    }
    else if( event.detail == Alert.NO)
    {
        // NO button was clicked
    }
}

Quite similarly we can also create an inline function, which will allow us to pass extra variables to the handler method. Take a look at the following and how it declares a function which takes an event object and then makes a call to our own handleAlert method:

3
4
5
6
7
8
9
10

//line 12 replacement
Delegate.create( this, function(event){this.handleAlert(event, "hello");} )
 
//modified alertHandler method signature
public function handleAlert( event:Object, test:String ) : Void
{
    //handle the event.detail property etc
}

You can see that the above example passes the string hello through to our handleAlert method. Don’t forget to change the method signature for the handleAlert method to compensate for the extra variable(s).

Now you can not only create, but successfully listen to and handle the button clicks from within an Alert control. Keep an eye out for another post soon where I’ll demonstrate how to further customise the Alert control, but also outline the setbacks with its current implementation

Related posts:

1. Object Oriented Programming with JavaScript : Timer Class

The Attributes and Terms

Compression

Compression is the act of reducing the file sizes of images. When images are stored in their raw format, without compression, their file sizes can be very large. This causes the images to take up a lot of storage space and, furthermore, take a long time to transfer over the Internet.. Compression techniques alleviate these problems by reducing the file sizes to a much more manageable size that can easily be stored and transmitted over various mediums. Almost all image formats use different forms of compression, so as an example, we will only discuss the compression technique GIF files use so that you can see how an image is compressed into a smaller file size.

GIF compression works by finding repetitive patterns in particular colors and instead of listing each pixel and its color, lists instead the amount of repetitions there are for a particular color. For example if a GIF image has 60 pixels of the same color in consecutive order, instead of adding that pixel color 60 times in the image file, it will instead enter the amount of times the color is repeated. The below figure represeents an image file that has a height of 1 pixel, and a width of 14 pixels. The first 8 pixels are the color Red and the last 6 are the color blue. When the file is uncompressed the image file will represent each pixel as it is seen in the actual image. When it is compressed it instead puts an index of the amount of times a pixel color is repeated consecutively. In the figure below you see the uncompressed image shows 8 Red Pixed and 6 Blues pixels and each pixel is represented. In the compressed format you see the index 8 preceeding the R, for red, and the number 6 before the B, for blue. That tells the image that there are 8 consecutive red pixels and then 6 consecutive blue pixels.. As you can see the amount of storage space saved by this method can be significant..

Uncompressed	Compressed

Figure 2: Compression Lossy

When an image is saved in a lossy format, that means that the file format compression technique discards some of the information from the image that it deems "unimportant". This technique allows for the resulting compressed image file to be smaller, but can result in a final image that is of lesser quality than the original. In most cases you would not notice the difference. When it is saved in a lossless format, that means no information will be discarded.

Animated

Certain image formats have the ability to be animated. This is done by inserting multiple image, or frames, into one image file, which then cycles through the individual frames in consecutive order. By quickly showing these individual frames it takes on the appearance of being animated. Below is an example of an animated gif.

Animated GIF

Figure 2: Animation Maximum Colors

The different image formats have limits on the amount of colors that can be used in the image. Image formats that have a low maximum color count tend to be best suited for images that have large blocks of the same colors. Those image formats that have high maxmimum colors are best suited for images that require the complex blend of hues and colors that are found in photographic images.

Transparency

This feature specifies that one color in your image should be considered transparent. This allows the background colors of the web page or document to show through the image and for your pictures to blend into the background of the page instead of standing out as an actual image. Figure 3, below, shows examples of a non transparent image and a transparent one. As you can see the transparent picture blends into the background of the page while with the non-transparent image you see the entire picture.

Non-Transparent	Transparent

Figure 3: Transparency

Another feature similar to transparency are alpha-channels. Alpha-channels allow you to set the opacity of pixels in your image to a range from 0 to 255. What this does is make the particular pixes that change the opacity for, transparent to the background. You can make certain areas transparent to let the background show through, and the rest of the image would be solid. Unfortunately, Mircosoft Internet Explorer does not support this feature as of yet, so it is not in use that often.

Interlaced

When you save a graphic image as interlaced it allows the image to load progessively from top to bottom, eventually filling in the entire image. This was a popular way of showing images in the past when people were on dialups and the images took a while to download to your computer. With the image being interlaced, it allows those people who are on a slow Internet connection, to start seeing parts of the image immediately even when the entire image has not been downloaded.

The File Formats

The GIF is a lossless image format that is the most common format found on the web. Due to having a 256 maximum color range this format is ideal for making small icons, buttons, or other graphics that have large blocks of the same color, but not for images that are required to be photographic quality. Therefore, if you are working with images from a digital camera, do not use GIF as the file format. This file format supports transparency, interlace, and can be animated which makes it a excellent format for putting images on a website.

JPG - Joint Photographic Experts Group

The JPEG is a lossy file format that was designed with photographic images in mind. A JPEG is capable of storing millions of colors making it a great format for saving your digital camera photographs and capturing the proper hues and color that we see in real life. JPEG does support compression, but the more you compress this type of image, the more loss of detail will occur. The predominant uses for JPEGs are for photographic images on websites and for storing pictures from digital cameras. Though the TIFF format is a higher quality format, the size of the resulting TIFF image, makes the JPEG the more practical choice. This format does not support does not support animation or transparency, but can be interlaced.

PNG - Portable Network Graphics

This lossless format was designed specifically for the web in response to a licensing issue with Unisys who owned the patent for the GIF file format. This file format supports animation, in the form of MNG files, transparency, and can be interlaced. PNG files come in two formats, PNG-8 and PNG-24. PNG-8 is similar to GIF files, and has a 256 maximum color range. PNG-24 is has similar color ranges to JPEG, but they tend to have larger file sizes. PNG's also support alpha -channels. PNG images are becoming much more common as a replacement for GIF files on websites..

BMP - Bit-Map

The lossless BMP format is the Microsoft Windows standard for image files. This format is rarely compressed, therefore causing the image to be quite large. Though they do have the ability to go to 16.7 million colors, there really is no reason why the average user should need to use this format for image manipulation. You are better off using one of the previous formats. This format does not support animation, transparency, and can not be interlaced.

TIFF - Tagged Image File Format

The TIFF format is a lossless image format that is the considered the best choice for photographic image quality. Most digital cameras give you the option of using TIFF as the format it saves files in. The main problem with this file format is that most applications do not compress the TIFF files, so they can be quite large. This is not much of a problem for storing the pictures on your computer, but with limited flash memory sizes for cameras it could limit the amount of pictures you can store on one card. If you have the storage, then the TIFF format is highly recommended, but if you do not have the space, then go with a JPEG as you most likely will not notice a difference in image quality. This format does not support animation, transparency, and can not be interlaced.

Conclusion

I hope this was informative and if you have questions or suggestions, please do not hesitate to ask them in the forums. Below is a reference list of the various image formats and their attributes.

Figure 4: Graphic Formats and their Attributes

--

Related posts:

1. Convert Image to Base64 String and Base64 String to Image

Almost all desktop computers have a hard drive inside them, but do you really know what they are? Many people when they hear the word hard drive, think that it refers to the computer as a whole. In reality, though, the hard drive is just one of many different pieces that comprise a computer. The hard drive is one of the most important parts of your computer because it is used as a long-term storage space for your data. What that means, is regardless of whether or not the computer is on, or you lose power, the data will still stay stored on this drive keeping it safe. On the other hand, it tells you how important backing up your data is, because if the hard drive malfunctions there is a good chance you will lose it all.

• Magnetic platters - Platters are the round plates in the image above. Each platter holds a certain amount of information, so a drive with a lot of storage will have more platters than one with less storage. When information is stored and retrieved from the platters it is done so in concentric circles, called tracks, which are further broken down into segments called sectors.
• Arm - The arm is the piece sticking out over the platters. The arms will contain read and write heads which are used to read and store the magnetic information onto the platters. Each platter will have its own arm which is used to read and write data off of it.
• Motor - The motor is used to spin the platters from 4,500 to 15,000 rotations per minute (RPM). The faster the RPM of a drive, the better performance you will achieve from it.

When a the computer wants to retrieve data off of the hard drive, the motor will spin up the platters and the arm will move itself to the appropriate position above the platter where the data is stored. The heads on the arm will detect the magnetic bits on the platters and convert them into the appropriate data that can be used by the computer. Conversely, when data is sent to the drive, the heads will this time, send magnetic pulses at the platters changing the magnetic properties of the platter, and thus storing your information.

It is important to note, that since the data stored on your hard drive is magnetic, it is not a good idea to play with a magnet near your hard drive
Hard Drive Interfaces

A hard drive connects to your computer through a specific type of interface. The interface on your hard drive must match the corresponding interface on your motherboard. If you purchase a new hard drive that has a interface that your motherboard does not support, it will not work in your computer. Currently there are three interfaces that have become the standard for connecting your hard to your computer. Some information about each of these interfaces are below.

• IDE or ATA - This is currently the most common interface used but is quickly becoming overcome by the newer SATA interface. Hard drives using this type of interface have speeds up to 100 Mbps.
• SATA - A newer interface that uses less bulky cables and has speeds starting at 150 Mbps for SATA and 300 Mbps for SATA II. Almost all computer manufacturers have started using SATA drives.
• SCSI - This type of interface is typically used in a business environment for servers. Hard Drives designed for a SCSI interface tend to have a faster RPM which therefore provides better performance.

When buying a hard drive

When purchasing a hard drive there are some characteristics you want to keep in mind that will help you determine the right drive for your needs. These characteristics are:

• Seek Time - The amount of time required to move a drive's read/write head to a particular location on the disk. The lower the number, the better.
• Access time - The actual amount of time from when a data is requested from a drive and delivered. The lower the number, the better.
• RPMS - How fast the platters spin. The higher the number, the faster the drive will be.
• Capacity - The amount of storage space available on the drive. Typically most drives purchased today will be 80 Gigabytes or greater. An 80 GB hard drive will on average cost around 60 USD.
• Interface - How the hard drive connects to your computer. Make sure that the hard drive's interface is supported on your computer before you purchase it.

Soure: BleepingComputer

No related posts.

Let's started object oriented programming in JavaScript by taking example of a Timer class, similar to the Timer control in windows application.
Create Class

Create the class Timer. Below code shows how to declare the class

// Declaring class "Timer"
var Timer = function()
{
    // ....
    // Class body
    // ....
}

Add Public Properties

To add public properties to the class we use this keyword as shown below

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
}

You can see that we have created 2 properties (Interval and Enable) of Timer class and assigned default values to them.
Add Events (If any)

Now we might want to add events to the class in case we need. For Timer class we need "Tick" event which will be fired every after "Interval". Event are added the same way as the public properties.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
}

Add Private Member Variables
We need 2 private variable in the class to hold the timer Id and the class instance. The private variable are added using 'var' keyword.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
}

Add Functions
Public functions are also added the same way as public properties using this keyword. We need 2 function in the timer, first "Start" to start the timer and second "Stop" to stop the timer.

// Declaring class "Timer"
var Timer = function()
{
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick();
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};

You can see I have incorporated the timer functionality using the setInterval function of the JavaScript. Our class is ready for use now.

Using the Class
To use the class first create the instance of Timer.

var obj = new Timer();

Now assign the value to its properties as needed.

obj.Interval = 300;

Attach handler to the events

obj.Tick = timer_tick;
 
function timer_tick()
{
    // Do something..
}

Now call the "Start" function to start the timer

obj.Start();

To stop the timer anytime in between just call the "Stop" function.

obj.Stop();

Source: Dailycoding

Related posts:

1. Flex Alert! Listen to the buttons
2. Checking Username Availability with Mootools and Request.JSON