Panel Menu

All Quick 'n Easy Web Builder support issues that are not covered in the forums below.
Post Reply
kgnoble
Posts: 78
Joined: Sun Jan 14, 2018 4:05 pm

Panel Menu

Post by kgnoble »

Hi

I have a problem with the panel menu - I cannot see the "hamburger" icon except when hovering over, otherwise it is a black blob. However, this has not been completely consistent and has worked on a few occasions.

QnEWB 7.3.3 Linux Mint 20 Ulyana

www,horsleyfarmersmarket.org.uk/HFM_mobile (only visible in mobile browser)
qwb file at www.cageyenne.co.uk/transfer/for_pablo.qwb

Where am I going wrong?

Best wishes

Keith
kgnoble
Posts: 78
Joined: Sun Jan 14, 2018 4:05 pm

Re: Panel Menu

Post by kgnoble »

I don't believe it - before posting it didn't work, after posting it does!!!

Any ideas why it should be so inconsistent?

K
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

The implementation of your breakpoints is incorrect. it looks like you do not have a default view.
The default layout should exist, because this is the 'base' for all other views.
The colors of the panel menu must be set in the default view. Currently the color is 'undefined' so this will result in random behavior.

Also, I do not recommend to use 'orientation' in breakpoints.
kgnoble
Posts: 78
Joined: Sun Jan 14, 2018 4:05 pm

Re: Panel Menu

Post by kgnoble »

Got it!

Thats really helpful. I have a main website that redirects to the "mobile" one; but I didn't realise I needed the default view as a matter of course.

Thank you

Keith
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

Why do you use redirect?
Can you just implement the mobile view on the same page?
kgnoble
Posts: 78
Joined: Sun Jan 14, 2018 4:05 pm

Re: Panel Menu

Post by kgnoble »

I was using redirect because the content and menu selections are sometimes different for the big screen and mobile. However, with the insight you have given me Ithink I can revert to the usual model.

Thanks Pablo - every little bit helps :-)

K
alex4orly
Posts: 321
Joined: Thu Jul 23, 2020 9:34 am

Re: Panel Menu

Post by alex4orly »

How can I stop redirect for mobile phones?
Sounds a better option
But how?

Thank
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

How can I stop redirect for mobile phones?
By default, there is no redirect. So, if the page is redirected then you have implemented this yourself.
Maybe you have added a script?
alex4orly
Posts: 321
Joined: Thu Jul 23, 2020 9:34 am

Re: Panel Menu

Post by alex4orly »

Sorry, what I mean is that I do the following:

I have a button, please see example below
Can I do it in any other way - without redirecting?

if(Onclick)
{
if(isMobile)
{
redirect to the moble.html
}
else
{
use this page
}
}
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

There are several ways to make your website mobile friendly without redirect.
For example:
- layout grids
- flexbox
- fixed/absolute layout with breakpoints

See also:
http://quickandeasywebbuilder.com/layout_modes.html
alex4orly
Posts: 321
Joined: Thu Jul 23, 2020 9:34 am

Re: Panel Menu

Post by alex4orly »

OK, I will look at that link.

I will tell you another detail. I full screen size (Desktop or Tablet)
https://ourvilla.net.au/frontpage.php - > Vuilla Finder

For a mobile phone however, I go directly to the page, to offer the user the entire screen space
https://ourvilla.net.au/villaloc.html

All this is using Layout grid and in breakpoint for mobile, there are screen changes

But, I can't think of a way to do the switch between the 2 modes without a redirect. Below is the entire function.
Maybe, you will not consider it a redirect - I am just construction the URL 2 different ways.

function showTopic(htmlPage, goback)
{
var MyPage = "mypage=";
var PageName2 = htmlPage.replace(".html", "");

var iFrame = "";
var iDialog = "";
var PageToSendTo = "https://ourvilla.net.au/pagevisited.php?" + MyPage + PageName2;

if(goback)
{
AllowGoBack = true;
iFrame = 'InlineFrame1';
iDialog = '#Dialog1';
}
else // This is a Dialog without the Go-Back button
{
iFrame = 'InlineFrame2';
iDialog = '#Dialog2';
}

window.open(PageToSendTo, iFrame);
pageName = htmlPage; // The argument here is passed from the onclick of the button calling it

// Give it a chance to create the record - in pages visited, then load the Dialog page
setTimeout(function()
{
var url = 'https://ourvilla.net.au/';
var goto = url.concat(pageName);

if(myDevice == "mobile" && PageName2 == "villaloc")
{
window.open(goto);
}
else
{
window.open(goto , iFrame);
$(iDialog).dialog('open'); // The Dialog is initially hidden on page load
}

if(goback)
{
ClickBack = 1;
}

}, 500);
}
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

if you use breakpoints then the browser will select screen layout for that breakpoints. Most modern websites do not use redirect, they offer the same content (on the same page) with a simplified layout for smaller screens.
If you use layout grid then in most cases the layout is flexible so there is no need to use breakpoints.
alex4orly
Posts: 321
Joined: Thu Jul 23, 2020 9:34 am

Re: Panel Menu

Post by alex4orly »

But please note

1) All my websites are using layout grids
2) In most pages, I use breakpoints

In this case, I am either showing the page inside a Modal dialog,
OR - showing the page directly in full screen for mobiles

Cheers
User avatar
Pablo
Site Admin
Posts: 3918
Joined: Mon Feb 13, 2006 7:00 am
Location: Europe
Contact:

Re: Panel Menu

Post by Pablo »

This is not a common situation so this will require a redirect.
alex4orly
Posts: 321
Joined: Thu Jul 23, 2020 9:34 am

Re: Panel Menu

Post by alex4orly »

Thanks Pablo,

I am always looking for your opinion

Cheers and Merry Christmas
Post Reply