Technology Story

Look at this example. When you hover over the box, the border, background color, and foreground colors change. This is caused by JavaScript dynamically changing the box’s CSS properties much like it does the “visibility:” property in pop up menus. This opens a whole new world of dynamic styling opportunities as most CSS properties can be accessed.

The generic form of the JavaScript reference to change a CSS property is:

document.getElementById("div_id").style.CSS_property_to_change = "new_CSS_value_in_quotes";

JavaScript does not always use the same term to refer to a property as CSS does. This is the biggest thing to keep in mind as you refer to CSS properties in JavaScript. Now lets start coding the example.

Making & Styling The Box

Begin by making a simple <div> box and styling it with CSS. My box’s HTML code is:

<div id="box1"> <h3>This is a dynamically styled box. Hover over this box to watch it change. (Doesn't work in early Netscapes)</h3> </div>

The above is just a simple box with the ID of “box1″ and some text in an <h3> tag.

Initially style the box with the following CSS inside <style> tags on the page:

<style type="text/css"> #box1{ position: absolute; top: 20px; left: 50px; width: 200px; border: solid #ff0000 3px; background-color: #ffff00; color: #000000; padding: 10px; } </style>

Now we have our basic box made. Lets change the styling with JavaScript.

Adding JavaScript Dynamics

The first stage in dynamically changing the box’s CSS styling is to determine what event I want to trigger the change. I used “onMouseOver” to trigger the change and “onMouseOut” to change the box back to its original styling. I used “change()” and “change_back()” as the names for my functions. Here’s the amended <div> tag for the box:

<div id="box1" onMouseOver="change()" onMouseOut="change_back()"> <h3>This is a dynamically styled box. Hover over this box to watch it change. (IE only version)</h3> </div>

Now for the fun part. The JavaScript code to make the dynamic changes. Remember that JavaScript doesn’t always use the same term as CSS to refer to a CSS property. Changing the box’s background color shows this. To change the background color in my “change()” function, I used:

<script language="JavaScript"> function change(){ document.getElementById("box1").style.backgroundColor = "#000000"; }

First notice the term that JavaScript uses to refer to the CSS “background-color:” property. JavaScript uses “backgroundColor”. Make special note of the capital “C” in “Color”. There is no hyphen as is common in CSS. Proper capitalization is crucial.

This is just like using the “visibility:” property in pop up menus. The key is in knowing what JavaScript calls various CSS properties. The next tutorial will provide a complete list. Moving on with our example, we’ll add the code that will change the border color and foreground color:

function change(){ document.getElementById("box1").style.borderColor = "#0000ff"; document.getElementById("box1").style.backgroundColor = "#000000"; document.getElementById("box1").style.color = "#ffffff"; }

JavaScript uses “borderColor” for CSS’s “border-color:” property, and “color” for CSS’s “color:” property. In general, single words, like “color” or “top” are the same in CSS and JavaScript. As a rule, hyphenated words in CSS are converted to JavaScript by removing the hyphens and capitalizing the first letter of the second an subsequent words. There are no spaces in the JavaScript references.

It’s best to use a reference table when starting out. Just remember that JavaScript never uses a hyphenated term as is common in CSS. Capitalization is often substituted for a hyphen.

Also note that all values used are in quotes. This follows standard JavaScript protocols. Only pure numbers can be used as values without quotes. If in doubt, use quotes.

The “change_back()” function, triggered by “onMouseOut”, is just like the “change()” function. The only difference is that the values assigned to the properties is different:

function change_back(){ document.getElementById("box1").style.borderColor = "#ff0000"; document.getElementById("box1").style.backgroundColor = "#ffff00"; document.getElementById("box1").style.color = "#000000"; }

The final Result.

PC Troubleshooting: Beep Error

Posted 1 April, 2008
Filed under: Hardware, Technology, Troubleshooting |

Comments (1)

Beeps	Error Message	Description
1	Normal boot	System is booting normally
2	Video adapter error	The video adapter is either faulty or not seated properly. Check the adapter
3	Keyboard controller error	The keyboard controller IC is faulty. Replace the IC if possible
4	Keyboard error	The keyboard controller IC is faulty or the keyboard is faulty. Replace the keyboard, if problem still persists, replace the keyboard controller IC
5	PIC 0 error	The programmable interrupt controller is faulty. Replace the IC if possible
6	PIC 1 error	The programmable interrupt controller is faulty. replace the IC if possible
7	DMA page register error	The DMA controller IC is faulty. Replace the IC if possible
8	RAM refresh error
9	RAM data error
10	RAM parity error
11	DMA controller 0 error	The DMA controller IC for channel 0 has failed
12	CMOS RAM error	The CMOS RAM has failed
13	DMA controller 1 error	The DMA controller IC for channel 1 has failed
14	CMOS RAM battery error	The CMOS RAM battery has failed. If possible, replace the CMOS or battery
15	CMOS RAM checksum error	The CMOS RAM has failed. If possible, replace the CMOS
16	BIOS ROM checksum error	The BIOS ROM has failed. If possible replace the BIOS or upgrade it

More Descriptive:

Beeps	Error Message	Description
1 long	Normal boot	System is booting normally
2 long	Video adapter failure	Either the video adapter is faulty, not seated properly or is missing
1 long, 1 short, 1 long	Keyboard controller error	Either the keyboard controller IC is faulty or the system board circuitry is faulty
1 long, 2 short, 1 long	Keyboard error	Either the keyboard controller is faulty or the system board circuitry is faulty
1 long, 3 short, 1 long	PIC 0 error	The programmable interrupt controller IC is faulty
1 long 4 short, 1 long	PIC 1 error	The programmable interrupt controller IC is faulty
1 long, 5 short, 1 long	DMA page register error	The DMA controller IC 1 or 2 is faulty or the system board circuitry is faulty
1 long, 6 short, 1 long	RAM refresh error
1 long, 7 short, 1 long	RAM data error
1 long, 8 short, 1 long	RAM parity error
1 long, 9 short, 1 long	DMA controller 1 error	The DMA controller for channel 0 is faulty or the system board circuitry is faulty
1 long, 10 short, 1 long	CMOS RAM error	Either the CMOS RAM is faulty. Replace the CMOS
1 long, 11 short, 1 long	DMA controller 2 error	The DMA controller for channel 1 is faulty or the system board circuitry is faulty
1 long, 12 short, 1 long	CMOS RAM battery error	The CMOS RAM battery is faulty or the CMOS RAM is bad. Replace the battery if possible
1 long, 13 short, 1 long	CMOS checksum error	The CMOS RAM is faulty
1 long 14 short, 1 long	BIOS ROM checksum failure	The BIOS ROM checksum is faulty. Replace the BIOS or upgrade

15 Coolest Firefox Tricks Ever

Posted 19 January, 2008
Filed under: Firefox, Technology | Tags: Firefox

Comments (1)

1) More screen space. Make your icons small. Go to View – Toolbars – Customize and check the “Use small icons” box.

2) Smart keywords. If there’s a search you use a lot (let’s say IMDB.com’s people search), this is an awesome tool that not many people use. Right-click on the search box, select “Add a Keyword for this search”, give the keyword a name and an easy-to-type and easy-to-remember shortcut name (let’s say “actor”) and save it. Now, when you want to do an actor search, go to Firefox’s address bar, type “actor” and the name of the actor and press return. Instant search! You can do this with any search box.

3) Keyboard shortcuts. This is where you become a real Jedi. It just takes a little while to learn these, but once you do, your browsing will be super fast. Here are some of the most common (and my personal favs):
• Spacebar (page down)
• Shift-Spacebar (page up)
• Ctrl+F (find)
• Alt-N (find next)
• Ctrl+D (bookmark page)
• Ctrl+T (new tab)
• Ctrl+K (go to search box)
• Ctrl+L (go to address bar)
• Ctrl+= (increase text size)
• Ctrl+- (decrease text size)
• Ctrl-W (close tab)
• F5 (reload)
• Alt-Home (go to home page)

4) Auto-complete. This is another keyboard shortcut, but it’s not commonly known and very useful. Go to the address bar (Control-L) and type the name of the site without the “www” or the “.com”. Let’s say “google”. Then press Control-Enter, and it will automatically fill in the “www” and the “.com” and take you there – like magic! For .net addresses, press Shift-Enter, and for .org addresses, press Control-Shift-Enter.

5) Tab navigation. Instead of using the mouse to select different tabs that you have open, use the keyboard. Here are the shortcuts:
• Ctrl+Tab (rotate forward among tabs)
• Ctrl+Shft+Tab (rotate to the previous tab)
• Ctrl+1-9 (choose a number to jump to a specific tab)

6) Mouse shortcuts. Sometimes you’re already using your mouse and it’s easier to use a mouse shortcut than to go back to the keyboard. Master these cool ones:
• Middle click on link (opens in new tab)
• Shift-scroll down (previous page)
• Shift-scroll up (next page)
• Ctrl-scroll up (decrease text size)
• Ctrl-scroll down (increase text size)
• Middle click on a tab (closes tab)

7) Delete items from address bar history. Firefox’s ability to automatically show previous URLs you’ve visited, as you type, in the address bar’s drop-down history menu is very cool. But sometimes you just don’t want those URLs to show up (I won’t ask why). Go to the address bar (Ctrl-L), start typing an address, and the drop-down menu will appear with the URLs of pages you’ve visited with those letters in them. Use the down-arrow to go down to an address you want to delete, and press the Delete key to make it disappear.
User chrome. If you really want to trick out your Firefox, you’ll want to create a UserChrome.css file and customize your browser. It’s a bit complicated to get into here, but check out this tutorial.

9) Create a user.js file. Another way to customize Firefox, creating a user.js file can really speed up your browsing. You’ll need to create a text file named user.js in your profile folder (see this to find out where the profile folder is) and see this example user.js file that you can modify. Created by techlifeweb.com, this example explains some of the things you can do in its comments.

10) about:config. The true power user’s tool, about.config isn’t something to mess with if you don’t know what a setting does. You can get to the main configuration screen by putting about:config in the browser’s address bar. See Mozillazine’s about:config tips and screenshots.

11) Add a keyword for a bookmark. Go to your bookmarks much faster by giving them keywords. Right-click the bookmark and then select Properties. Put a short keyword in the keyword field, save it, and now you can type that keyword in the address bar and it will go to that bookmark.

12) Speed up Firefox. If you have a broadband connection (and most of us do), you can use pipelining to speed up your page loads. This allows Firefox to load multiple things on a page at once, instead of one at a time (by default, it’s optimized for dialup connections). Here’s how:

• Type “about:config” into the address bar and hit return. Type “network.http” in the filter field, and change the following settings (double-click on them to change them):
• Set “network.http.pipelining” to “true”
• Set “network.http.proxy.pipelining” to “true”
• Set “network.http.pipelining.maxrequests” to a number like 30. This will allow it to make 30 requests at once.
• Also, right-click anywhere and select New-> Integer. Name it “nglayout.initialpaint.delay” and set its value to “0″. This value is the amount of time the browser waits before it acts on information it receives.

13) Limit RAM usage. If Firefox takes up too much memory on your computer, you can limit the amount of RAM it is allowed to us. Again, go to about:config, filter “browser.cache” and select “browser.cache.disk.capacity”. It’s set to 50000, but you can lower it, depending on how much memory you have. Try 15000 if you have between 512MB and 1GB ram.

14) Reduce RAM usage further for when Firefox is minimized. This setting will move Firefox to your hard drive when you minimize it, taking up much less memory. And there is no noticeable difference in speed when you restore Firefox, so it’s definitely worth a go. Again, go to about:config, right-click anywhere and select New-> Boolean. Name it “config.trim_on_minimize” and set it to TRUE. You have to restart Firefox for these settings to take effect.

15) Move or remove the close tab button. Do you accidentally click on the close button of Firefox’s tabs? You can move them or remove them, again through about:config. Edit the preference for “browser.tabs.closeButtons”. Here are the meanings of each value:
• 0: Display a close button on the active tab only
• 1:(Default) Display close buttons on all tabs
• 2:Don’t display any close buttons
• 3:Display a single close button at the end of the tab bar (Firefox 1.x behavior)

Ref: http://www.lifehack.org

« Previous Page — Next Page »