Jomatu Wiki: Documentation

Jomatu Wiki: Hidden Elements


Most of what we want to edit is visible to us within the Edit Window; text, images, links etc. can all then be directly modified and the changes instantly apparent. However, web page content is often placed within elements that are not visible to us, and not easy to select within the Edit Window. A common use for these 'hidden' elements is to control the layout on the web page.

One such element is the 'DIV' element (short for 'division'). It's purpose is to act as a container for other elements, such that we can apply some formatting to the DIV element. Note: HTML Tables, whilst often not directly visible in the Edit Window, nevertheless can be directly edited: see 'How to use the Edit Window'; section: 'Third row of buttons'.

An issue can arise if we try to manipulate the content contained within a DIV, when actually, we should be manipulating the DIV element itself. The following example should make this clearer.

Example: Image Gallery web page

In this example, we've introduced an image gallery page into our website, currently consisting of just four images. However, we've decided to remove the first image. Sounds simple, but let's see how hidden elements may affect what we're trying to achieve.

Our starting place is the Edit Window, so we've used the Browse Facility to locate our new Gallery Page and we've clicked the 'Edit' button to arrive at the Edit Window. For details of how to get the Edit Window, see: 'How to edit your website text'.

Step 1: Review our new Image Gallery web page

Let's start by looking at our new Image Gallery page.

Hidden Elements - Step One

Each of our four images has some accompanying text (to describe the image). We want to remove the first image and its text. So we click on the image to highlight it, then press the delete key on our keyboard to remove it; so far so good. Next we highlight the text and again press the delete key to remove it, but now our page looks like this:

Step 2: The effects of just deleting the image and text

Hidden Elements - Step Two

We expected to see the other images 'move around' to fill in the gap (i.e. the second image should now fill the gap where the first image was, etc.). What went wrong?

Our web designer has used a DIV element to contain each image and its accompanying text (the possible reasons for this are outside the scope of this guide). What we've done is simply delete the image and text within the DIV, but left the DIV element itself standing. What we now have is a DIV with empty content, but the DIV itself still occupies the space (due to its formatting). What we actually need to do is delete the DIV element itself and, in doing so, we'll automatically delete its associated content: the image and the text.

Step 3: Identifying a containing DIV

So how do we know that there is a containing DIV around the image and text if we can't see it?

The Edit Window allows us to explore the entire hierarchy of elements on a web page by clicking the small links located in the far bottom-left corner of the Edit Window. To see how this works with regards to our gallery images, click the first image to select it, then look at the links in the bottom-left corner of the Edit Window.

Hidden Elements - Step Three

We see: 'Path » div » div » div » div » img'. The 'img' on the right shows the element currently selected (i.e. the image we've just clicked on). To the immediate left we see its container element: a DIV, then to the left of that, the DIV's containing element: another DIV etc. We can actually click all these links to select that particular element.

Step 4: Click the 'div' link to select the DIV element

Now, click on the 'div' immediately to the left of the 'img' link. In the Edit Window, you should see all the (visible) elements that are contained within that DIV, as follows.

Hidden Elements - Step Four

By looking at what has been selected within the Edit Window, we can see what elements were contained within that particular DIV element. We can see that only our image and its accompanying text are selected, so we know that this DIV only contains those elements. Note: you can do the same with any of the Image Gallery images/text to confirm that there is a DIV for each of them.

Now it looks like we've only selected the image and text, but the crucial difference here, is that by clicking the 'div' link in the bottom-left corner of the Edit Window, we've actually selected the DIV element itself. Deleting this element is now trivial.

Step 5: Delete the containing DIV (and its contents)

Having selected the DIV element itself, we can simply press the 'delete' key on our keyboard to delete the DIV. Naturally, when we delete the DIV, all it's content (the image and text in this case) is automatically deleted as well.

Hidden Elements - Step Five

The DIV and its contents have been removed; the other elements therefore can fill its place, occupying the space where the DIV used to be.

Adding a new image to our Image Gallery

Let's now consider another problem which is related to the above: what if we want to add a new image into our Image Gallery? Our first attempt might be to simply insert an image and a paragraph of text - would that work? Maybe, but as we've already discovered that our design involves encapsulating the image and its accompanying text in a DIV, our best bet would be to do the same. How? There are many ways, but the easiest would be to just copy and paste an existing DIV!

Step 6: Select and copy the last DIV

Click on the last image in the gallery to select it, then, in the element list located in the bottom-right of the Edit Window, click the 'div' link immediately to the right of the 'img' link; this should select the entire DIV and its content (the image and text), as follows.

Hidden Elements - Step Six

With the DIV selected, copy it (click the 'copy' button in the Edit Window, or, if that doesn't work [some browsers restrict this], use a keyboard short cut: Ctrl-C [windows] or Command-C [Mac]).

Step 7: Paste the copied DIV

Next, press the right-arrow key on your keyboard ONCE only. This positions the cursor immediately to the right of the existing (selected) DIV, which is exactly where we want to insert our new DIV.

Now paste the DIV we've just copied (click the 'paste' button in the Edit Window, or, if that doesn't work [some browsers restrict this], use a keyboard short cut: Ctrl-V [windows] or Command-V [Mac]). We should now have two copies of the last image and text.

Hidden Elements - Step Seven

Now it's a simple matter to edit the copied image (select and click the 'Insert/Edit Image' button to replace with a new link or previously uploaded image) and edit the copied text (just replace with your new text).

This completes the 'Hidden Elements' documentation.