DOM: the document.getElement[s]By

Tweet

I can feel that the summer is almost over and it's time to get to serious things again.
In the following post, we are going to see how to manipulate the DOM elements with document.getElement[s]By.
As you may know we have different way of manipulating DOM elements and here we will see all of them:
1) document.getElementById;
2) document.getElementsByClassName;
3) document.getElementsByName;
4) document.getElementsByTagName;

As you can see there are 4 possible way of using the document.getElement[s]By[something].
Are you ready?

JavaScript: set image height according to viewport

Tweet

I've recently had to deal with a strange situation in a web project. I basically had an image in the home page which filled roughly the 60 percent of the viewport. The image was responsive and it was adapting to the browser window size. The problem was: the image was resizing following its width and it was not shrinking after a certain point. The result was that when viewed with a 16:9 monitor, the image was somehow too tall to fit the screen and the annoying vertical scrollbar made its appearance (which was meant, for the rest of the pages needed it).
Solution? Well, I decide to use JavaScript and specifically window.innerHeight in order to control the image height according to the viewport.
Before getting into the actual code, I need to explain some things, so bear with me and be patient.

JavaScript: useful small snippets

Tweet

There are small and simple JavaScript snippets that can be used to achieve very easy actions. Whenever you need to perform such actions, if you google for help, you will definitely find the answer.
However I want to gather some of those code snippets in one article, just as a future reference for me, and valuable code deposit for you.
So let's see what we got here!

How to insert a value into a text box, selecting an option from a listbox

The title says it all. Let's imagine you have an input box:

<input name="tobechanged" type="text" id="tobechanged" size="50" />

JavaScript: innerHTML

Tweet

In the following short post, we are going to take advantage of JavaScript and its innerHTML method.

Every DOM element can be manipulated using JavaScript. With the use of jQuery we can do great things, but if we need to do something more basic, it is probably better to use JavaScript directly, without the help of the aforementioned great library.

We can manipulate any DOM element using its id as selector together with document.getElementById. The advantage is that we can manipulate the inner html part of the element.
Let's see some example.

JavaScript: adjust the height of an iframe according to its content

Tweet

I know that we shouldn't use iframes, but sometimes they are useful or maybe we used them in old pages that we don't really want to completely update for iframes removal. In those cases we might need to make the iframes expand and reduce according to the content. Yet, we don't want to write much code to achieve that. That is the case when JavaScript can lend us an helping hand.

offsetHeight and scrollHeight

In order to reach our goal, we need to use different code: one for Firefox and one for all other browsers. Firefox needs to use offsetHeight which is "a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height." (quoted from MDN). For other browsers we will use scrollHeight which is "a measurement of the height of an element's content including content not visible on the screen due to overflow." (quoted from MDN).

JavaScript: the good old window.open (with a trick)

Tweet

The window.open JavaScript method is one of most used in web sites. To be honest, it has been a little bit overused in the past and today lightbox effects are preferred. However I still use it, especially when displaying a large image.
In this article I will show you how to open a new window and resize it appropriately.

The opening

First of all, we have to decide which element will open a new window. Imagine we want to open a new window when the user clicks on an image. The window will contain a larger image. Our small picture will be something like:

<a href="javascript:void(popupImg('images/gallery/big/01.jpg'))"><img src="images/gallery/small/01.jpg" alt=""></a>

When the user clicks on the image, the popupImg function will be called.
If you prefer, we can use the onClick event:

<img src="images/gallery/small/01.jpg" alt="" onClick="popupImg('images/gallery/big/01.jpg')">

JavaScript: delete default text when selecting a textarea (onblur and onfocus)

Tweet

Today we are going to create a textarea with a simple effect. We want to obtain the following:

Add your comment here...

The text inside the textarea will disappear when the area is selected, and reappear when the area is not selected and there's no text inside it. To do so, we are going to use JavaScript.

Ready for the code? Ok, let's go.

JavaScript: create a basic text editor for textareas

Tweet

In this post I will explain how to create a very basic editor to be used for textareas. And we are going to create it using JavaScript.
I won't write down all the code, for every single possible function, however the example will be the basic structure which you can then use for whatever you might need.
First of all, some assumptions:
1) in your page there's a form and a textbox (wow that was easy!);
2) the text in the textarea is submitted to your database with html tags that are then rendered when the text is displayed in other pages.

CSS: how to change an element style with JavaScript

Tweet

It is possible to manipulate a CSS rule applied to a DOM element using JavaScript. The solution can be quite effective, because we can change styles according to specific events in our page.

For example, when a button is pressed, or an option is chosen, we can trigger an event that will change a CSS property's value.

In the following post, we will change the background colour for a text, by pressing the text itself. Then we will create another trigger that will change the text colour back to default, again.

JavaScript: live character count

Tweet

In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.

HTML5: geolocation

Tweet

With HTML5 is now possible to use the target browser in order to determine the location from which the user is accessing the web. It is not, as you may understand, a GPS location (unless the user is surfing from a GPS capable device), but it can be quite interesting in some cases where special services are supplied on a web page.

How can we develop a geolocation service on our web page?

Well, first of all try and see the final effect: go here and enjoy. After that, please get back on the web thought...

First of all let me say that all location services on the target browser must be granted by the user. As you may have noticed by visiting the above live example, the browser has asked you permission for the use of location services (unless you've granted permanent access to your location).

JavaScript: create an analogue clock with canvas

Tweet

There's an interesting example buried in the MDM HTML5 pages, where we can create an analogue clock with JavaScript and <canvas>.

There's not much to say about it. What is interesting for us, is the way the clock is actually drawn.

HTML5: the progress element

Tweet

Progress bars have always been a needed element in web applications. Every time a user sends requests to the server, it is quite usual that some sort of immediate response is needed, just to make the user aware that something's really happening and that the whole application is not just frozen. In the past, we used JavaScript and CSS to show some sort of progress bar. We usually used animated gifs like

and many sites still use those kind of solutions.
With HTML5, a new element has been introduced. It is progress and it will give us a new way to show the user that something's really going on after that button has been pressed.
"The HTML progress (<progress>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar." (quote from Mozilla Developer Network).

JavaScript: browser detection

Tweet

JavaScript is a great programming language and it is widely used by web developers. Personally I use JavaScript sparingly because I prefer to use VBScript whenever I can, but I must admit some times JavaScript can really simplify things a lot.
However, there is a well known issue about JavaScript. Despite the wide use and spread of JavaScript snippets, the scripts could pose compatibilities issues. For instance, some old browsers could be not completely compatible. In those cases, it is quite useful to use the navigator object in order to detect the user browser.

ASP: export data to Ms Access

Tweet

Just about a year ago, I published an article describing how to export data to Excel with asp. In this article we are going to do the same, but using Ms Access as a target.
There are some things we need to prepare before starting creating the page that will actually export the data. That is because our Ms Access database (I will refer to it as mdb from now on) must be created before doing anything. At the same time, we need to create a connection to the target mdb.

Preparing the target

First of all, we have to create a target mdb that we can call template.mdb. The Ms Access file will have a table which will be our target table. The columns of the target table should be where we are going to put the data. Just to be more clear, we should look into our source table and reproduce it in our target mdb. As a start, I suggest to re-create all the fields as text data type. That is because data types might differ from the source table (e.g. a SQL Server table). If the data types are not compatible, we will end up with an error. If you start to understand the basic usage explained here, then you will be able to adjust your target mdb with the correct data types.