CMS Menu touch enabled

Issues related to the CMS tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/cms_tools.html
A lot of information about the Content Manager System can be found in the help/manual. Please read this first before posting any questions! Also check out the demo template that is include with the software.

CMS trouble shooting / FAQ:
viewtopic.php?f=10&t=43245
User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

CMS Menu touch enabled

Post by madebyibloo » Tue Mar 24, 2015 12:45 pm

Hi Pablo,

Would you be able to add 'touch' support to the CMS Menu just like the CSS Menu has please?


Cheers,
Scott
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Tue Mar 24, 2015 12:51 pm

The CSS menu does nor have any specific 'touch' support. Touch devices translate 'touch' events into mouse clicks.
So the CMS should also work on touch devices.

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Tue Mar 24, 2015 1:12 pm

Got ya! Thanks Pablo.

hmmmm.....the CMS menu dropdown works with apple devices but not any other 'touch' devices such as tablets and touchscreen desktops/laptops.

The CSS menu works with this because there is no page/link selected on the parent menu - meaning when you 'touch' the parent menu button, the sub-menu drops down and you can select a page from the sub-menu.

Now with the CMS menu - there is a page linked to the parent page button, therefore when it is 'touched' it opens up the page and not the dropdown sub-menu.

Hope this makes sense - you can try here on a 'touch' device (but not apple products) - http://www.ibloo.co.uk/cms/index.php

So my question is - is there an option to maybe add a '#' to the parent page from within the CMS Admin? so the actual parent button is not linked?

I have looked at a couple of fixes for this below:
https://snippets.webaware.com.au/snippe ... h-devices/
https://coderwall.com/p/3uwgga/make-css ... ch-devices
http://www.prowebdesign.ro/how-to-deal- ... n-devices/

Hope this helps :)


Cheers,
Scott
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Tue Mar 24, 2015 3:04 pm

Thanks for the information, I will look into this.

Though it looks that there is no 'css only' solution.

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Tue Mar 24, 2015 3:09 pm

support wrote:Thanks for the information, I will look into this.

Though it looks that there is no 'css only' solution.
Thanks Pablo,

I've been trying to implement this myself but with no luck - I had found this tho which is interesting http://osvaldas.info/drop-down-navigati ... h-friendly

I got the double-tap to work but then the sub-menu didn't display.


Cheers,
Scott :)
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Tue Mar 24, 2015 5:47 pm

Did you also try this?

Code: Select all

// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
 
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) 
{
    var i, len, element,
        dropdowns = document.querySelectorAll("#wb_CmsMenu1 li.children > a");
 
    function menuTouch(event) {
        // toggle flag for preventing click for this link
        var i, len, noclick = !(this.dataNoclick);
 
        // reset flag on all links
        for (i = 0, len = dropdowns.length; i < len; ++i) {
            dropdowns[i].dataNoclick = false;
        }
 
        // set new flag value and focus on dropdown menu
        this.dataNoclick = noclick;
        this.focus();
    }
 
    function menuClick(event) {
        // if click isn't wanted, prevent it
        if (this.dataNoclick) {
            event.preventDefault();
        }
    }
 
    for (i = 0, len = dropdowns.length; i < len; ++i) {
        element = dropdowns[i];
        element.dataNoclick = false;
        element.addEventListener("touchstart", menuTouch, false);
        element.addEventListener("click", menuClick, false);
    }
}

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Tue Mar 24, 2015 9:46 pm

Hi Pablo,

I've tried your suggestion but no luck, I tried it in the head and the body section. http://www.ibloo.co.uk/cms/

It seemed to kind of work on chrome but not IE


Cheers,
Scott
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Wed Mar 25, 2015 7:38 am

It is one of the scripts from your URLs.
But there does not seem to be an easy workaround right now

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Fri Mar 27, 2015 4:11 pm

support wrote:It is one of the scripts from your URLs.
But there does not seem to be an easy workaround right now
Thanks Pablo,

I've tried numberous but without any luck - if you come up with something, can you please let me know?


Cheers,
Scott :)
Cheers,
Scott


creating the new, together.

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Mon Apr 06, 2015 4:55 pm

Hi Pablo,

Hope you are well, I've been looking at this 'hover' touch function with the CMS submenu and come up with an idea...

When a sub-menu is activated is it possible to make the parent menu button a dummy button so the submenu opens on touch?

Let's say...

In CMS Admin
under the 'Parent Page' tab/field
have...
'Button Only' tab/field = Yes/No

Yes = <a href="#" id="3">Products</a>
No = <a href="index.php?page=products" id="3">Products</a>

Yes will make the parent button open up the sub-menu without actually going to the parent menu page, this works on touch devices also, I've tested on firefox using the "#" method for the button.

Hope this makes sense,


Cheers,
Scott :)
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Mon Apr 06, 2015 5:46 pm

Thanks for the suggestion.
This will require an update of the CMS, but I will research if this is possible.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Mon Apr 06, 2015 6:13 pm

UPDATE:

Here's a possible solution, maybe you can try this? If it works then I can add it to the next update:

Change code the of 'CreateSubMenu' to:

Code: Select all

function CreateSubMenu($id, $dataset)
{
   $count = count($dataset);
   $ul = false;
   for ($i=0; $i<$count; $i++)
   {
      if ($dataset[$i]['parent_id'] == $id)
      {
         if (!$ul)
         {
            echo "<ul>\n";
            $ul = true;
         }
         echo "<li>\n";
         if ($dataset[$i]['url'] == '#')
         {
            echo "<a href=\"#\">" . $dataset[$i]['name'] . "</a>\n";
         }
         else
         {
            echo "<a href=\"" . basename(__FILE__) . "?page=" . $dataset[$i]['id'] . "\" id=\"" . $dataset[$i]['id'] . "\">" . $dataset[$i]['name'] . "</a>\n";
         }
         CreateSubMenu($dataset[$i]['id'], $dataset);
         echo "</li>\n";
      }
   }
   if ($ul)
   {
      echo "</ul>\n";
   }
}
Then in the CMS Admin you can create a 'parent' item by setting the 'External URL' to '#'

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Mon Apr 06, 2015 6:43 pm

Hi Pablo,

I've tried your update but with no success (IE) - it does read that the button page is # through the external Url and displays no page info in the cms view..... but the actual pointer still points to index.php?page=products therefore not making the button a click button but still a url pointer. It needs the href to read # for it to be a button only.

In chrome also, the update brings up the index page within the cms view.


It's almost there! I can sense it!



Cheers,
Scott
Cheers,
Scott


creating the new, together.

User avatar
Pablo
 
Posts: 20165
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: CMS Menu touch enabled

Post by Pablo » Mon Apr 06, 2015 8:20 pm

Are you sure you have updated the PHP correctly?
What does the HTML of the menu look like?

User avatar
madebyibloo
 
 
Posts: 480
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: CMS Menu touch enabled

Post by madebyibloo » Mon Apr 06, 2015 9:02 pm

Yeh I believe so, I updated the index.php with your code (replaced) and put a # in the External Url field of the cms admin - http://www.ibloo.co.uk/cms/index.php



Cheers,
Scott :)
Cheers,
Scott


creating the new, together.

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest