Website Design Blog - BlueBolt.net

Toggle Element Visibility with JavaScript

Showing and hiding elements on a web page is a popular technique, and is used on thousands of websites, in one form or another. While this could be avoided simply by the addition of new website pages, the advantage of the show/hide javascript technique is that it helps to minimise web browsing interruptions by eliminating the need to leave and load a new page.

Common uses of the show/hide technique on websites include tree hierarchy systems, which group large numbers of related items such as link structures and directory contents together to help keep them manageable. The technique is also frequently used to show extra content or provide additional information on demand to preserve valuable screen real-estate.

For example, most ‘drop down’ website menus do this, and also pretty much any time you are given the option to click to reveal detailed or extended information about something on the page.

Read More …

Posted in: CSS, JavaScript, Web Development
Tags: css, display, javascript, toggle, visibility

Disable (X)HTML Form Input Autocomplete

The autocomplete feature common to all of today’s major browsers is often a useful time-saving device. However, it does come with some security risks.

There is actually a significant flaw with autocomplete that can allow scripts to steal your private data, without you even being aware of it or interacting with the malicious page. I will try and go in to more detail on this in a future post.

Nevertheless, autocomplete is a popular feature which looks appears to be here to stay, and so is still important to lessen the risks you can have any control over, as much as possible.

For instance; should you need to collect credit card information for a payment form, it is an important user consideration to ensure that this kind of data is not stored by the browser and provided as input suggestions on other forms. This is especially important for users accessing your site with a public computer.

Read More …

Posted in: (X)HTML, JavaScript, Web Development, Web Standards
Tags: autocomplete, html, javascript, security, standards, tips, validation, xhtml

Essential JavaScript Functions and Tips

There have been countless occasions I have expected a JavaScript function to exist based on its prevalence in other languages, only to find it doesn’t.

Some of the ‘missing’ functions I consider to be fundamental which are part of almost every other scripting or programming language out there, are missing from JavaScript (which seems odd for a language based on C).

This article aims to provide a collection of functions, some of which were created to fill these gaps, and is likely to be updated periodically as new ones are found or recommended. Other arguably invaluable tips and methods will also be included here – and anything else I deem to be helpful.

We’ll start with a simple tip which should increase productivity with pretty much any JavaScript development:

Read More …

Posted in: JavaScript, Web Development
Tags: explode, functions, javascript, tips

IMG Tag: ALT and TITLE Attributes

Anyone familiar with HTML will have encountered the <img tag many times, which is of course used for inserting images in to pages.

This article will talk about two attributes supported by the <img tag: ALT and TITLE.

There is a subtle, but significant difference between these two attributes, which are commonly misunderstood and so misused. This is, in no small, part due to one irresponsible browser developer interpreting standards in their own way (yes, it’s Microsoft’s Internet Explorer).

You could be forgiven for thinking the ALT and TITLE attributes were functionally identical, if you have only ever developed and tested websites in Internet Explorer.

Let’s start with the ALT attribute…

Read More …

Posted in: (X)HTML, SEO, Web Development, Web Standards
Tags: alt, html, img, seo, standards, title

Which DOCTYPE should I use?

The <DOCTYPE tag is often (and easily) misunderstood and used incorrectly.

It’s not really a surprise. Doctypes can be confusing, and there are plenty of opinions on the subject; some of which will be discussed in this article.

Let’s start by getting to grips with what a doctype actually is – here’s a quote from W3C (World Wide Web Consortium), the only official organisation responsible for trying to tame and standardize the erratic world of website development:

There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. All these types of HTML are defined in their respective W3C specifications, but they are also defined in a machine-readable language specifying the legal structure, elements and attributes of a type of HTML.

Such a definition is called a “Document Type Definition”, or, for short, DTD.

http://www.w3.org/QA/Tips/Doctype

Read More …

Posted in: (X)HTML, Web Development, Web Standards
Tags: doctype, html, standards, validation, xhtml