EverWeb Codebox logo

EverWeb Widgetbox 3

Toggle Text

Toggle Text widget

Open/Close Text

The widget creates an HTML5 section with heading and text which can be toggled between the open/closed state using a button created with the Toggle Button widget.
The section can be styled with padding, styled border or a box shadow.
The toggle action has a choice of animations which target width, height or opacity to create different effects.
The text can be either open or closed on page load.

These widgets are included in the More-2 widget pack.

toggle text widget opacity animation

Widget Settings

Enter the heading text.
Enter the text and create returns using the HTML5 line break <br>
Hit the "HTML Info" button to find out more about this
Set the value for overall padding.
For a border, set the width, color and corner radius.
To add a box shadow, set its radius and color.
Choose the font family, color and the section background color.
Set the heading font size and text align.
Set the paragraph font size, text align and line height.
Choose the animation type. "Opacity" has a fade effect and "height" and "width" have an elastic effect.
Enter the section ID. This should be an alphanumeric string with no spaces or special characters.
It can be as simple as t-1, t-2 etc.
NOTE that this same ID must be entered into the widget settings of the corresponding button widget.
The "Display" checkbox is checked by default. Leave it checked if the image is to appear on page load or uncheck it so that the image does not appear on page load and requires the button to be toggled to reveal it.
Drag the widget into the required position on the design canvas and use the "Arrange" menu to bring it to the front of any items it covers or overlaps.

Toggle Text
toggle image widget height animation

Touch Screen Website Design

In early 2014, the percentage of potential visitors using touch devices exceed those using personal computers.
Most website owners tend to create a full version of a website and then consider adding one or more for tablet and smart phone users as an afterthought. The internet usage stats suggest that we should be designing for smart phones first and then adding a version of the site for tablet users which is suitable for computer users too.

Is the full version of the website dead? In most cases the answer will be "yes".
It makes more sense for a small business with limited means to create a version of the site for tablet user which will be perfectly usable on computers rather than have a version for computers which is not user friendly for those using tablet devices.

What are the essential features for tablet touch devices?
[1] A maximum page content width of 800px - any more will shrink text and create readability issues.
[2] All user inputs should have a minimum width of 42px wide by at least 32px high. Those intended for the thumb need a minimum width of 72px.
[3] All text hyperlinks - including those in the navigation - need to be replaced by buttons using the above sizes.
[4] All hover items need to be replace by click to open/click to close.
[5] No auto sliders. All slideshows should be simple swipe or tap.
[6] No shape images. All shapes should be created using HTML and CSS.
[7] No page background images.
[8] All images must be optimised for mobile devices and be imported at the size they will appear on the device.
[9] Use retina images sparingly and only where really necessary.
[10] Avoid using Google hosted fonts.