[bin-salmeen]

Hello, I have a question related to the side menu. I got the codes from your form tried it and it works fine on the first page, but when I shift to the next page it doesn’t work.
Below is the sample of the code, ill be waiting for your response..
Thanks in advance.

Attachments:

You must be logged in to view attached files.

[nvts]

Hello,

A few items about your example. All your js should be in your first screen _custon.js file. So in your menu_custom.js file you need to make some changes.

In the postPageTransition function put the following:

if (newScreenId == '#m1-menu') {
          $('#m1-menu-slidePanel').animate({
            left: '+=200px'},500);  
          $('#m1-menu-menuImage').css('visibility','visible');
          $('#m1-menu2-slidePanel').animate({
            left: '+=200px'},500);  
          $('#m1-menu2-menuImage').css('visibility','visible');
    }

Then in the documentReadyHandler function:

$('#m1-menu-slidePanel').animate({
            left: '+=200px'},500);

$('#m1-menu2-slidePanel').animate({
            left: '+=200px'},500);

Then add another function for your second screen to call the menu2() below:

function menu2(){
    $('#m1-menu2-slidePanel').animate({
            left: '-=200px'},500);
        
    $('#m1-menu2-menuImage').css('visibility','hidden');
}

Then of course change your second screen to call the menu2() function and not the menu() function.

Cheers…

[paulD]

Hi there,

This slide menu was designed for use with a multipage set up so that you only needed one menu on a master page which allowed you to navigate through the multipages.

Saves the need to have the menu and buttons duplicated on all you screens . But the method nvts provided will work as well

Paul

[mrsam]

Hi Octavio,

Thank for the previous help. I have a few question regarding slide menu. I tried your slide menu sample given but no luck. So, base on your sample given

1. Do I need to copy your code into every screen I have or may have? Cause I am think to use it as a menu for every screens
2. Do I have to rename the widget ID to make it different form others? e.g. Screen 1: Panel ID = “pageSlidePanel” and screen 2: Panel ID = “pageSlidePanel2”

Thank you in advance.

[paulD]

as i said before this design example was designed to use the multipage widget to negate the need to duplicate the menu on every page of your design.

If you want the same menu on every page of your design using this example you will have to duplicate the menu on every page and rename each menu then duplicate the functions. Not ideal really as it becomes a bit complex with multiple functions and widgets.

[mrsam]

@paulD wrote:

as i said before this design example was designed to use the multipage widget to negate the need to duplicate the menu on every page of your design.

If you want the same menu on every page of your design using this example you will have to duplicate the menu on every page and rename each menu then duplicate the functions. Not ideal really as it becomes a bit complex with multiple functions and widgets.

Thanks Paul. Do you have any suggestion ? I need same kind of slide for every screen to function as a menu.

Thanks again Paul.

[mrsam]

I am using Slide Menu according to the sample coding given. It works fine when I run it in the Test Center on its own (Own Screen) BUT when I run it together with other screens(From main page) it’s not working.

It is like the the Slide Menu screen does not execute the (phoneui.documentReadyHandler = function()) function. It there any where I can put this function something like onLoad(); funtion in HTML coding?

Please advise….thank you very much in advance.

[paulD]

It really depends on your eventual design. If your app isn’t particularly large or complex the multipage widget does a great job and is easy to implement. Then this design will work great. If your app is very large or complex i would seriously consider a different navigation scheme as you don’t want a bucket full of duplicated menu’s and functions.

I suppose another method would be to dynamically create the menu for your pages as you do for some of the js libraries? But that’s past my limited coding skills 🙂

The example should run fine with another page, just make sure your menu code is your other page custom js file.

Here is a very quick and dirty example, ive not got a load of time at the moment as I’m flying over to Florida for Christmas with the kids at the weekend so its all a bit of a last minute panic.

Looking forward to visiting the USA!

Attachments:

You must be logged in to view attached files.

[mrsam]

Very much appreciated Paul. I will try the sample. Thanks again and have a very nice Christmas.

[Author]

Posts