aldomatic / fb-style-page-slide-menu Goto Github PK

View Code? Open in Web Editor NEW

243.0 58.0 85.0 281 KB

FB mobile inspired slide out menu built on jQuery mobile

Home Page: http://www.aldomatic.com/jqm/fb-menu-style/

JavaScript 100.00%

fb-style-page-slide-menu's People

Contributors

Stargazers

Watchers

Forkers

tansengming vpixle mourice ascanio toddsantoro tpedreira filmon12 davisdole jrudderman germanny ubiratanbraga paulfgagnon deanreinhard arunee patrickmooney jimcoly okpaguu saupur93 leedaesoon alphac jasondavis greyskymedia cloudmetal kcire87 tomtom10 yenhoang joscha raptor-x adanarchila mb202005 mcka1n vadivelmsc-zz alisonjoseph alienx guinnesslee prabhjotsl liubiantao sentertec wilsonxp designzoos melanie27 galo4biz 4nakin olalekan-adeyemi qwer999 msthomaz terencerocks venkatforce lukaspa thematts bluefactor tjbomdreaux johnag omollorichard opelonado jimmac91 jkfennis alfqui19 phplaw anshul123 aczepod sirithink dekurnia tonykean888 gsangeryee gianjj praveensubramaniam gioutn19 kikiwang0625 acroyear haibudi muraligk allan-empalmado mccoy123 gumabel alongself dongpengfei091 mngogo jiaofengxianzi khetsothea bimarvolo snail9528 riahtu tarminetor generalx1

fb-style-page-slide-menu's Issues

Iphone Changing of Orientation

Tried it on Iphone, left navigation half seen.
Scenario:

View it in portrait orientation
View it in landscape orientation
View it again in portrait mode, the problem occurs here where left navigation partially seen.

Selecting text triggers function

Hi Aldo
Thanks for snippet. But one bug needs your attention. Page starts to move on selecting text. Can you fix it? Another thanks in advance

Menu wont work when GET is set

Hey, i'm using this menu to reload the index page with a GET parameter,
however when the get is set, the first time the page loads it works but after the menu wont show itself.

Anyone got an idea ?

Making it work without jQuery Mobile

Hi ... wondering if this can be done without jQuery mobile?

Distribution Files

It would be great if you included ALL the files in the Zip from Github -- you're missing the Jquery files..

Issues with IFrame using the FB-Style-Page-Slide-Menu-using iPhone and iPad

Hi,

I had a major issue with adding an iframe into the content section of the JQuery Mobile index page, where I have increased the width of the side navigation and changed the styling as well as making the top bar fixed using data-position="fixed".

The problem lies with the portrait orientation of the Iphone in which the IFrame size can sometimes be a lot wider than the top bar navigation bar (if a cookie pop bar shows up) or when the content inside the IFrame is very wide that it overflows.
I am not sure why this is occuring and it happens only on the iPhone and iPad.
If you change the viewport to about 0.75 it would scale down and work on occassions.

The other thing is that you can't zoom at all inside an IFrame, the content is verylarge when viewed on a phone.

Many thanks!

Form scrolling

Hey,

It's not really related to the project, but I used this as a base. So I thought you may know a solution.
When using the absolute positioning, forms are getting hard to scroll when on mobile.
Looks like it's because the browser is not really great on dealing with absolute positioning.

Or it there something I'm doing wrong.

Change code for more speedy

// Show menu
$("a.showMenu").click(function() {
    if (menuStatus != true) {
        $(".ui-page-active").css({ 
                '-webkit-transition': 'all .1s ease-in',
                '-moz-transition': 'all .1s ease-in',
                'margin-left': '280px'
        });
        menuStatus = true;
        return false;       
    } else {
        $(".ui-page-active").css({ 
            '-webkit-transition': 'all .1s ease-in-out',
            '-moz-transition': 'all .1s ease-in-out',
            'margin-left': '0px'
        });
        menuStatus = false;
        return false;       
    }
});

$('#menu, .pages').live("swipeleft", function() {
    if (menuStatus) {
        $(".ui-page-active").css({ 
            '-webkit-transition': 'all .1s ease-in-out',
            '-moz-transition': 'all .1s ease-in-out',
            'margin-left': '0px'
        });
        menuStatus = false;
    }
});

$('.pages').live("swiperight", function() {
    if (!menuStatus) {
        $(".ui-page-active").css({ 
            '-webkit-transition': 'all .1s ease-in',
            '-moz-transition': 'all .1s ease-in',
            'margin-left': '280px'
        });
        menuStatus = true;
    }
});

menu visible when switching pages

The menu is momentarily visible when switching to different pages with href link.

tabs files

Thanks for the codes. What are the tabs files used for? I don't see them defined in index.html. Thanks.

Page flicker

When a page is populated with a lot of content (enough to at least make it scroll), it will flicker when you navigate to it (by flicker, I mean it will go to the page, then quickly show the side menu, and then finally back to the page content.

Long menu issue

I have an issue when the menu (which is dynamically built using ajax) is longer than the page content. The menu wraps around the bottom of the page. This looks terrible when you scroll down, especially if the menu background is a different colour.

Is there a way to extend the height of the content to match the menu after it is loaded, so this doesn't happen.

Not compatible with JQuery 1.9.0

The last version your page slide works with is Jquery 1.8.3
Can you update your code or create a new version to work with the latest version of the jquery library.

Multiple menus on one page

Hi
What do I need to change if i want multiple menus on the same page?
One slidein from the left like your example, and one more that slides down from top right.

jQM 1.1 issue

I really love this snippet. The code is neat, but for some reason it collides with the new jQM. I can't find why, the code doesn't seem to be tricky in any way. Just a basic thoughtful code, but for some reason the jQM1.1 CSS corrupts the header and custom.css and jQM 1.1(.js) cripples the slide menu background.