EverWeb Codebox logo

EverWeb Widgetbox 3

Tab anchor widget
Text ANchor Widget

Tab Anchors

Fixed Position Tab Links

Fixed Tabs & Anchors

The Tabs and the EZ Tabs widgets are useful for cramming a lot of content into a web page without the visitor having to spend a lot of time scrolling. This pair of widgets offers an alternative method using tabs to smooth scroll to anchors on a page with a lot of content.
The tab navigation is always in view since its position is fixed so the visitor can quickly smooth scroll to other points on the page without having to return to the top.
The tabs can also be hidden on page load and then set to appear when the page has been scrolled by a preset distance. The tabs will disappear again when the page is scrolled to the top.
Although the widget doesn't require the EverWeb user to insert any code, it does need an understanding of CSS positioning. It can be quite confusing for anyone without this knowledge to see the tabs first of all jump out of position and then disappear in the final stages of setup.
The example on this page is further complicated by the fact that the page header is fixed so that it too is always in view. In this case the tabs need to be fixed in position below the header. The header is 100px high so the tabs are positioned and fixed at 100px from the top of the page.
The tabs can also be set to appear on page load and remain in view the whole time. If the header is also fixed they must be moved down the page by a distance at least equal to the header height
The positioning of the anchors requires execising a little skill and judgement but we'll get to that a few miles down this page!

Widget Settings

Tab anchor widget

Widget Settings

The widget settings are shown to the right and the first ones are for setting up the tab styles.
The tabs are centered in the container which should be adjusted using the drag handles or the Metrics inspector as more tabs are added.
The chosen font can be Google hosted if required and there is provision for a web safe fallback font for those foolish enough to use a non web safe one.
The font size, color and tab background can be set as can both the text and background hover colors.
The tabs can be set together with square corners or separated and have rounded corners. The top and bottom corners can be adjusted separately. The ones on this page have square corners on the top and rounded on the botton to give the impression of hanging off the header.
The scroll speed is set in tenths of a second and this needs a little experimentation to find a reasonable compromise in relation to the overall page scrolling performance.
The scroll distance is the amount the visitor has to scroll down the page before the tabs appear. The tabs aren't really required until the page has been scrolled to the second anchor.
If the tabs have been set to appear on page load, the scroll distance should be set to zero.
Since the tabs must remain on top of all the other page content in the stacking order, they should be brought to the front using the Arrange menu after all the page content has been added.

Creating The Links | Positioning The Tabs

The first three tabs are obligatory and just need the text and anchor ID added.
Subsequent tabs - up to a maximum of eight - can be added as required and the box checked to display them. The ID entered for each one must be the same as that for the corrresponding anchor.
Once the tabs have been set up and styled they need to have their position fixed and then hidden if they are not required on page load.
If the tabs are required at any place other than the very top of the page, the distance down the page needs to be entered. Any value other than zero will cause the tabs to jump out of the container. Don't be alarmed as this is what they are supposed to do!
Check the box next to "Fix" and the tabs will disappear.
If the tabs are NOT required to appear at page load, check the box next to "Hide". The tabs will then not appear until the designated scroll distance has been reached.

Anchors

The anchor widget is really simple and it's just a question of entering the correct ID and positioning it properly.
As pointed out above, the ID must match that of the corresponding tab.
When dragged onto the page, the anchor widget appears as a 20px square. To make sure that these don't get in the way - or get inadvertently dragged out of place - select the anchor, open the Metrics inspector and check the box next to "Allow free dragging". The anchors can then be dragged out of the content area into the browser background and out of harms way.
The best vertical position for each anchor will require a little trial and error to get it absolutely right.
Once the first anchor has been set and placed in position, the rest can be created quickly by duplicating (command D) the original, changing the ID number and dragging it down to its required position.

Reset

Since the tabs disappear from view in the EverWeb design canvas in the final stages of setup it doesn't really matter where they are placeed. However, its probably better to leave them somewhere near the top of the page so that they are easily found and as a reminder to bring them to the front after any new content is added.
If more tabs are required at a later date, or the tab design changed, these steps will make things a lot easier...
Uncheck both the "Hide" and the "Fix" box.
Reset the value for "Top" to zero.
Now the tabs will be in view and back inside the widget container so that they can be restyled and the tab navigation overall size adjusted if necessary.

Mobile Website

When creating the smart phone version of a website, the temptation to cram in all the content from the main one should be resisted. When using the HTML5 content widgets, all the extraneous info can be contained in aside elements. These can be omitted from the smart phone version along with clip art, adverts and all these other whistles and bells that web designesrs think they need to add to a web page to confuse and distract us from the information we are seeking.
Even with all this ruthless editing, smart phone pages can be quite long and involve a lot of scrolling on the part of the visitor. Adding tab anchors to these pages can make the visitor's experience much better and a happy visitor will return.
On a mobile page, the tabs should be arranged to appear when the second section block comes into view.

Still Confused?

As mentioned above, using these two widgets doesn't require any knowledge or use of HTML like the other ones in this section. On the other hand, it does require taking the time to get the concept of CSS positioning and visibilty.
Anybody can create this project with a little care and attention to detail but it won't suit those who think everything should be easy and that they are so smart they don't have to actually read and understand the instructions.

EverWeb Widget Nerd

This widget is included in the Navigation-2 widget pack.