Menu

Anomalies on the Friends template

The margin and offset

There needs to be an override for the padded container or there will be a gap between the overlay menu and the container.

The HTML showing the class usage

<div class="w3-container w3-padding w3-blue" style="margin:0 -16px">
<h3 id="margin"><b>The margin and offset</b></h3>
<div class="w3-row-padding w3-padding" style="margin:0 -16px">
<p>There needs to be an override for the padded container .........

The Style="margin:0 -16px" needs to be added. The colour of the text in this div w3-blue can also be over-ridden by an additional style declaration. See the Friends development page for examples of this

Actually it is not this but could be something to do with the w3-row-padding class

It was that I put all the right content in a padded container and that needed to overwritten.

Top Menu

Responsive behaviour on iPad

There seems to be difference between the main page and the others when viewed in portrait on the iPad. The tablet/phone display displays after the refresh button is clicked.

This seems to be an interaction between the shideshow - the first test page I made also shows a similar interaction.

Top Menu

Device Dependent Event Handler

An alert is thrown when the pages are checked using the Wave Accessibilty checker.

This is due to to the way that the W3.css handles the hiding of an element. I need to look closer at the code as my Fixed Bottom Menu does not throw this alert.

My page on the Device Dependent Event Handler explains this.

Top Menu

Menu/Top Button

Looks like I can also put an overlay menu open() within in the page:

This can also be used as a "top" button. Depeding on the screen size one or other will be displayed. Both will display on a tablet in portrait and an iPhone in Landscape.

Extra W3 clases have been added to the buttons such as w3-ripple and they have been made white. The text "Menu" has been added to the menu at the top of the screen and added to the main Friends page.

The hover and ripple are not going to be seen by most users as tbey will be mobile users. The same goes for the title text.

The addition of the subnav buttons will cause another Device Dependent Event Handler alert if checked with Wave.

The subnav code needs to be added at the end of the div.

Top Menu

The margin and offset

The HTML showing the class usage

Responsive behaviour on iPad

Device Dependent Event Handler

Menu/Top Button

Links