Jomatu Wiki: Hidden Elements

Introduction

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.

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

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.

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.

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.

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.

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.

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).