EverWeb Codebox logo

EverWeb Widgetbox 3

Mobile Anchors

Mobile Anchor Tab Navigation Widget
Mobi Slide in Sub Navigation Widget
Mobile Anchor Widget
Mobile Anchor Widget

The Widgets

Thes widgets create a slide in tab navigation for long pages or one page websites.
The Tabs widget is similar to the navigation widgets on the previous page which slide in on button click. The Anchor Button widget creates the slide in/out action.
The anchor widget creates the anchors and the Go Top widget creates a sticky go top button with a smooth scroll action to return the visitor to the tabs button from any point on the page.

Mobile Anchor Tabs Widget
Mobile Anchor Button Widget
Mobile Anchor Tabs Widget Settings

Tabs

Set the styles for font family, size, color and the tab background color and opacity.
The tab height can be adjusted using the Vertical Padding control. This height should be a minimum of 30px for use on mobile sites.
Use the value for Left Padding to adjust the text position horizontally.
Adjust the separator height and set its color.
The width of the navigation menu can be adjusted by dragging or using the Metrics inspector.
Enter the text for the first three tabs and also a unique anchor ID. This MUST be the same as the one in the widget settings for the corresponsing anchor widget.
To add more tabs, enter the text and ID and then check the boxes to display them.
Select the slide in direction which obviously must be the same as that selected in the button widget.
Enter the navigation's vertical distance from the top of the browser window.
Set the navigation animation speed which is expressed in tenths of a second.
Uncheck the box next to "Show Navigation". The navigation will disappear and can now be dragged anywhere out of the way. To drag it to the left - out of the page content area - select it and check the box next to "Allow Free Dragging" in the Metrics inspector.
From the Arrange menu, select "Always On Top".

Button

Set the button icon color, background color and opacity and the corner radius and drag it to a suitable location.
The button is large enough a target for a finger tip but can be made to appear less intrusive by making its background color the same as that of the page content.

Anchor

The anchor widget appears as a 10px square and only requires the ID to be inserted.
Make sure this ID is exactly the same as the one for the corresponding anchor buton.
It can be command dragged into the header or footer or positioned outside of the content area by checking the box next to "Allow free dragging" in the Metrics inspector.

Mobile Anchor Widget

Smooth Scroll Go Top

The back to the top arrow uses smooth scrolling and fade in/out animation.
The arrow only appears once the visitor starts to scroll a certain distance which can be adjust to suit the circumstances.
The arrow sticks to the bottom of the page and can be positioned left or right. The horizontal distance from the left or right edge and the distance up from the bottom is also adjustable.
The time that the content takes to smooth scroll to the top is adjustable so that it can be varied for different page content heights.

Settings
Set the arrow color.
Choose the required background color and set the background opacity.
Choose the position of the button in the browser window - left or right.
Set the horizontal distance of the button from the browser edge.
Set the vertical distance from the browser bottom.
Set the scroll amount. This is the distance the vistor will scroll before the button appears.
Set the button fade animation time.
Set the button scroll time. This time will vary depending on the page content height.

Mobile Smooth Scroll Go Top Widget

Important Notes

The anchor tab navigation can be used in combination with either the main or sub nav widgets on the previous page but NOT both.
If used with the main nav, the anchors tabs must be set to slide in from the right.
Conversely, if used with the sub nav, the anchor tabs must be set to slide in from the left.
The button for the anchor tabs and the navigation are the same so they should be differentiated by color - and perhaps a label - if used together.

This widget is included in the Mobi widget pack.