CSS HTML JS

I believe the majority of time on a project is spent with the UI. Web is no exception. I have compiled a set of articles covering HTML, CSS and JS with the intention of taking the sting out of this work.

Error submit is not a function

This is a simple enough error to explain. submit is a reserved word in JavaScript as it is a function call. This usually occurs when you call submit on a button and not a form.

Access HTML Elements

It is often necessary to access the elements of a HTML or XHTML file. For the most part this is straightforward, when elements have clear IDs associated with them. But what do we do when we are trying to access the child node of a element or maybe an element with a class but no ID or elements which have no id or class. This tutorial aims to outline some of these processes. There are a number of situations where you may find accessing elements useful, so I have outlined the useful functions below.

AJAX Step2 - Sending the Request Object
and Handling the Response

This tutorial is designed to outline the steps required to generate an AJAX XMLHttpRequest object, submit the request and handle the results of this transaction. To begin with we must consider the type of AJAX object to consider as Internet Explorer does not recognise XMLHttpRequest and instead has and ActiveX object. I have outlined a simple method for creating the AJAX object. I explain each step after the code.

AJAX Step1 - Creating the Request Object

This tutorial is designed to outline the steps required to generate an AJAX XMLHttpRequest object, submit the request and handle the results of this transaction. To begin with we must consider the type of AJAX object to consider as Internet Explorer does not recognise XMLHttpRequest and instead has and ActiveX object. I have outlined a simple method for creating the AJAX object. I explain each step after the code.

Array Declaration Creation or Adding Elements

There are a number of ways of creating or declaring arrays in JavaScript. The first way uses the new key word. You can then add elements to this using the assignment operator "=".

Comments

This article outlines how to comment in JavaScript.  There are two types of comments in JavaScript single line and multi-line.

Converting Strings to Int for Addition not Concatenation

The parseInt() Method : In the example below the user is prompted to enter two numbers which are then multiplied.

Identify if a variable is an Array

This is one of the easier problems I have come across which is most likely why I never wrote down the solution. How to tell if a var (variable) is an Array? I have come across this question a number of times over the years and each time I search for the solution I found many others with the same question but often took more work to find the answer.... So here it is.

Identify if a variable is an Integer(Number) or not

There are hundreds or scripts writen to identify if an input variable is a number or correctly and integer. Most of these involve complex if statements or even regex. All of these ways while accurate are mostly unnecessarily complex. JavaScript provides a very simple function that can answer this with a boolean [true|false].

If Else using Conditional Operators (?:)

It is often useful to consolidate your IF statement into a single line, like when you are assigning a value based on an operation. I have covered the standard use of JavaScript IF ELSE functionality in a separate tutorial If, Else and Else If. Here I am going to cover the Conditional operators ?: these are simple and a favourite time saver when writing JavaScript. I am going to cover the same problem as the "Do Something 4" example in the previous tutorial.

If, Else and Else If

Logic is an essential element of any language. In this article I cover the IF operator. This is a logical operator that can operate when a particular condition is met. That is to say, IF an attribute or function returns TRUE then do this.

Is a String Var Empty or Null

This is a common question, and proves useful when you want to validate a form to ensure all fields are filled. The first example compares the variables length to 0 and its value to null, this is because a null string (a string with no content e.g. var myVar = "";) is not equal to a string with value set to null.

Moving option elements between HTML select lists

Moving option elements between HTML select lists when used with Reorder option elements of an HTML select has been the one of the most useful JavaScript function sets I have created. I have reused this again and again. You have two select lists the first holds all the possible values and the second will hold the users choice.

Random Number Generator

There is always a need to generate a random number when developing.  Maybe you want to select a quote at random or your creating a chance element in a game, in either or any case this can be easily achieve.  In the example below I use Math.random().  The results may be unpredictable, but the technique to getting them certainly is not. To generate a random number in JavaScript, simply use the following code:

Reorder option elements of an HTML select

This functionality has proven useful on a number of occasions, especially when used with JavaScript Moving option elements between HTML select lists. You want to reorder the elements of an HTML select statement. This can easily be achieve using the follow JavaScript. I have provide a file download for you to quickly add this to your application.

String Concatenation

When you need to append one string on the end of another this is known as concatenation. In JavaScript this is achieved using + operator, or string operator. This concatenation can be achieved in a number of ways each has its own advantages. The simplest means of string concatenation in JavaScript is

String Replace Function

Note:

In both cases if your pattern contains a / you will need to delimit this with a \ so in the case where your pattern may be http://www.tomred.net/index.php/ you should enter this as /http:\/\/www.tomred.net\/index.php\//, this is so the / is not interpreted as the closing /.

Replace

This…

Extensions and MIME types

This is by no means an exhaustive list of MIME types and extensions but it it good enough to start. If I have missed any or there are mistakes leave a comment below and I will update it.

Character Encoding

Ordered, Unordered and Definition List

Ordered lists are simple lists which have a number, roman numeral or letter to order the list items.  These can be used as either upper or lower case.  Here are the example of the list items.  Number is the default value for a list item.

Relative and Absolute size explained

As this article title suggests there are two sizes in CSS; Relative and Absolute. Each provide benefits and draw back (and with one or two unexpected results). We will start with relative size.

Clip property

I have found from time to time that it is sometimes useful to clip and image used on a page using css.  This allows for example a single image to be created and you only show the piece that is relevant, it is also useful if a user wished to upload an image as a avatar or profile picture but want only a particular part of the image displayed.

Cursor Styles

The following cursor styles are presented in alphabetical order. Hover over the blue boxes to see the cursor style. Below the box is the correct way to declare the cursor style.

Disable or Enable Horizontal or Vertical Scrollbar

The scrollbar in html is automatically displayed with the contents of an element overflow the size of the screen. This is not the case when content overflows its element on the right or left. In this case you may want to force the text to stay in the box and provide a scrollbar to allow the user to read.

Display vs Visibility property

What is the difference between display: none and visibility: hidden? At first glance you would probably think the results are the same for either CSS property. This is not exactly true; while both do hide the relevant content including html <div> element or <span> element, they differ on the details.

CSS Hacks and IE Conditional Comments

Some (most) Hacks are older and mostly unsafe. If you wish to deliver specific style sheets to IE it is best advised to use the CSS IE Conditional Comments.

Image Opacity and Transparency

This is a great tool for setting a background or simply adding colour to a website with it being intrusive. In the first picture above there is no values set.

Multiple Classes

It is often the case where you would like to apply mulitple classes to an element.  This is quiet a simple process but some browsers (namely IE6) have trouble dealing with this.  Beyond the IE6 over sight I have outlined some examples below to show a number of styles applied to a <span> and then used to show how you can use multiple classes.  Notice that when you add multiple as in the case of .small.underline{} you can have them in any order the style is still applied.  In the first case we have class="small underline" in the second we have class="underline small" in the third we add smallCaps to the class and we still get the red of .small.underline{}.

Position Float Clear

CSS position, float and clear; relative, left, right and both.

Position Property

static
Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).

Rounded Borders

On my more recent projects I have been regularly asked to give Web 2.0 effects.  I still cringe when I hear this since it is nearly always from a client with little technical experience.  They are not sure what it is and don't want to be left behind when it comes to technology.

Subscript and Superscript

When it comes to rendering SUBSCRIPT or SUPERSCRIPT there is often discourse.  What is the correct manner?  There is a couple of ways to skin this cat, the first is to use the <sub> for subscript and <sup> for superscript.  Alternatively it can be done using CSS.  Which is right for you?  I believe it comes down to the information being portrayed, it is often the case that the value to be sub/sup-ed is attempting to convey some information itself and is not simply for visual purposes.  If your need is primarily aesthetic then the css outlined below will be sufficient but still would be overkill;

Articles

Java

This what I have spent most of my time working in over the years and these are the little bits of logic or snippets I have come across. Some of these are things I have needed to search for or I have found I needed to feedback on code reviews.

Oracle WebCenter (FatWire)

During my time working in consulting I was tasked many times with delivering FatWire sites. I took notes due to the lack of useful documentation at the time. These are the results of those notes made and shared.

CSS HTML JS

I believe the majority of time on a project is spent with the UI. Web is no exception. I have compiled a set of articles covering HTML, CSS and JS with the intention of taking the sting out of this work.

DevOps

A space dedicated to all those things you need to know beyond writing code. This covers Linux, Windows, Git and SVN among other hopefully useful nuggets.

Security

I picked up some pointers over the years consulting for government and banking sectors before entering a PCI DSS development environment. This section covers aspects like coding, testing, code review and best practice.

Apps

Apps is a section which offers access to bits and pieces I have put together over the last few years. This includes Random Password Generator and Base64 Encoder.