artberri / sidr Goto Github PK

If I have links in my sidr menu, such as <a href="/somepage.php">Some Page</a>, sidr appears to be stopping them from opening with a preventDefault - can you add an option honor links?

I'm currently investigating using your plugin. But I would like to know how would one implement a pull slide tab?

Imagine that there was a list of icons on the right. Now when I slide my thumb across it, it would pull the menu from the right. The difference being that the icons are married to the text. That is these icons are part of the menu link itself.

So basically when the menu is collapsed, it isn't fully gone. Only the text portion of the menu is hidden, but the icons are still visible. And when I pull the menu out, the icons and the text come out and they are semantically part of the same div box.

when the side menu appears, my original page disappears.

The body seems not displayed:

Whats wrong? Thanks

Hello, just tried your responsive demo and the menu button in upper left corner. It opens the demo menu... but how should i close the menu and revert back to the button display. I guess, it should work in both directions.

I expected it to work like this:

• shrink page or small page
• top menu hidden, button appears
• click button to reveal side menu (but keep button visible)
• OR click on menu item closes sidebar, returns to button display.

Do I miss something? Is it a specific issue with your demo page setup?

(Latest Safari 6)

Your works are great! you help me so much, thanks.

I have one question~
Take a look this image~ this is my iphone(iOS4) screen.

This panel height has problem only iOS, How I can fix it?

I have tried to set up a JQuery UI Accordion inside the Sidr Menu but have not been able. Has anyone done this or does anyone know how to?

Thanks

Hello,

Excellent work!
I have just one question: Is it possible to use your plugin with jQueryMobile pages?
I want to change the pages by clicking the menu links but I think that won't work.
Your example is based on sections but they are always visible.

Greetings

Having some difficulty resolving a flash of the sidr content on page load. Is there a way to hide that content while it loads?

Thanks!
Justin

I have used the plugin and created a sliding menu which work perfectly on FF/IE7-10, chrome & opera but not with safari

the nav is fixed by css

position : fixed
top : -47px (negative because eader is moved up slightly when its fixed to make it more slimline)

On safari the fixed nav does not slide with the body, it remains relative to the view port.

I saw a closed issue which states using width:100% on the nav container but this was already present.

Only safari has the problem.

test this fiddle in safari and you'll see header area dosent move when menu appears
http://jsfiddle.net/RV2eA/19/

Update
I notice this exact same issue exists on the main site for the plugin.
If you scroll down till the menu gets fixed at top - in safari clicking the 'menu' button dosent slide the menu container.
http://www.berriart.com/sidr/

I would love to have an option which opens the menu when the page is loaded initially.

on a mobile device, switching to landscape from portrait breaks the menu and causes it to not function until refresh/reload.. can anyone help fix this issue? thank you..

I hate to have to open another issue, I did my reading on jQuery and have been able to create a few cool little functions using .animate, I have a better feel for it now.

So while trying to spice up some internal linking I implemented jquery.smooth-scroll just to allow smooth on page scrolling.

The issue is with the right attribute to the body.. in chrome it stays at 0px while in firefox and ie it adds right: 260px; appropriately to the body.

and with jquery.smooth-scroll enabled and the sidr menu open the page scroll is a bit choppy only using the touchpad though, its an on/off sort of thing...

I AM SURE YOU ARE SWAMPED with other things, I am going to fiddle with it today, but I thought by opening this you could take a look and shed some light my way, thanks again....

Instead of using touch swipe how can I use 2 different selectors to open/close one opening and the other selector closing?

Tried to be as accurate in the title as possible, currently when i open my browser in full width and proceed to resize, the sidr button needs to be clicked twice in order for it to start working.
I tried to simulate the first click on window resize but it did nothing.

Dear All,

I'm testing this lib and loves it, but I experienced the following: with JQuery 1.7 it works great but replacing with jQuery 1.9.1 or the today released 2.0.0, after one opening and closing action, the menu never opens again no matter how I press the link for it.

Did anyone else experienced the same? Does anyone have a solution for it?

I initially presumed this was just a typo in the documentation, but I see you actually do have a method named "toogle" rather than "toggle".

Surely this needs to be renamed?!

Hi - great plugin.

Only issue is that on first click of my selector element, nothing happens to the .sidr element. The callback function runs, but the sidr does not appear until the second click. I have used the selector implementation - so assume it's the 'toogle' method. From the second click onwards, the .sidr element toggles as expected.

I tried using the generic implementation too, with the open and close methods manually toggled, but I couldn't get that to work at all (again, the 'complete' callback function ran, but not toggling of the .sidr element)

Apologies if I'm being stupid. Any more details please let me know.

Josh

Remote content is displayed correctly when i'm on the first website page,
when i add a $_GET variable like ?s=X, it still works but if i got an url rewrite on index.php?s=X to home/search/X.html, menu content is empty.

Thanks.

Really great little plugin thanks. Is there a way to initialize the scroll so if you open up the #sidr element then scroll it down, when you close and open again it resets to the top rather than the last scroll position.

I'm have successfully added the jquery.touchwipe.js effect to this navigation, but it seems to lag extremely bad. Is there a way to create a swipe effect similar to the Facebook navigation on iOS? I like the way you can actually hold the page and it slides back and forth with your finger.

Sidr refuses to open the side panel when it was opened and closed once before (no reloads of the page, if you reload it works again but just once). That's though an issue as people tend to check the side navigation and may decide later to open it again from the same page. Interestingly it doesn't work just on iOS, tested under iPhone4 and 5 with Chrome and Safari.

I'm using an :hover image (different coloer) which shows, that shows that the toggle is still "open" after closing. When tested on Firefox Desktop with iPhone 3.0 User Agent, it works without a problem. Also on Samsung Galaxy under Android.

Anyone else experiencing the same?

When the panel is open and the user resizes it's browser to desktop size, the panel is not closing. Furthermore my body seems broken and the media queries don't fire

For accessibility reasons I would like to set the focus to the menu, once the animation is complete.
Could anybody help with the jQuery code please

Hi, I don't know if this is supported already or not, but if so it's not documented - would it be possible to have nested menus, so a link may open a second adjacent menu, using static or dynamic content?

In iOS devices, activating the sidr menu causes the entire page to zoom out and then the menu becomes visible to the side. Any idea why this is happening only on iOS?

if you resize the browser - the button comes to life 😉

What about making the menu disappear when you click on a link?

The idea is to fire the menu in his button, that's OK. But from an usability standpoint, a CSS object should be integrated, so when the menu is opened, a click in the remaining screen will close it.

As seen here:
https://github.com/NicholasRBowers/CSS-Slider-Menu

Please, I don't know how to add this via jquery. This is a very nice improvement.

nT

Hey. First of all, thank you so much for creating this plugin. It's fantastic. However, I was having some issues with scrolling within the slide panel. It felt like the menu was getting stuck when scrolling. The "stickiness" was causing me to accidentally click on the links in the sidebar.

However, I was able to get the scrolling smoothed out by changing:

 .sidr {
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 200px;
    overflow-x: none;
    overflow-y: auto;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 15px;
    background: #333;
    color: #fff;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-box-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
}

to:

 .sidr {
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 200px;
    overflow-x: none;
    overflow-y: auto;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 15px;
    background: #333;
    color: #fff;
    -webkit-box-shadow: inset 0 0 5px 5px #222;
    -moz-box-shadow: inset 0 0 5px 5px #222;
    box-shadow: inset 0 0 5px 5px #222;
    -webkit-overflow-scrolling: touch;
}

and then adding:

.sidr > * {-webkit-transform: translateZ(0px);}

right below .sidr

This helps out in iOS 5 and above. Not too sure about Android. Trying to find a testing device to confirm.

Hi,

Just tried your feature because I'm interested in using it for a mobile webapp.
I only tried your online demo, so maybe it works when I'll use it but I doubt.
So the idea is to display the menu and hide 3/4 of the main content page. If it works well on my computer, on my smartphone (iPhone), the content is not hidden but resized. Everything is displayed but in less space. The zoom is also changed, meaning it's very small. Gets back to normal when you hide the menu.
Anyway, I was glad seeing your tool but it does not work properly.

Hope this could help.

I'm having trouble with the sidr menu on a clients page. 2 issues:

1. If I link to a certain section (id) on a page including the id attribute to the link, clicking the menu item on the sidr menu always opens the page but stays on top. I t doesn't link to the id below one the page.
2. If I'm on the page and I link to a certain id on that page, the browser jumps to that section clicking the link, but the sidr menu doesn't close.

Can anybody help on one of those issues? Or has anybody experienced the same issues and knows a trick?

I may be doing it incorrectly.... could you provide a thorough example.
I tried the following:

$('#responsive-menu-button').sidr({
name: 'sidr-remote-content',
source: 'http://www.berriart.com/sidr/remote-menu.html',
body: '.wrapper'
});

the menu returns blank.

Tested with a minimal test page and jquery 2.0.3 > youcan see the page here : http://www.poopeecraft.com/test/

When we toggle the menu, the whole page resize itself, the menu resize itself also.

Bug is not present with other devices tested (pc windows 8 : firefox/chrome/ Linux Mint DE : Firefox/chrome), and other browsers on android, it was not present before the last chrome update.

I think the bug is critical, because every android tablets/phones use chrome by default, and not using the lastest jquery is not an option for a developer.

System :
Android JellyBean
Chrome 29.0.1547.59

Hi,

Can't seem to get sidr to not add prefixes to id's and classes with renaming: false. Coming on here and looking at the code, there doesn't seem to be anything in the code to prevent these prefixes from being added although on your website it states this is possible. Have you not implemented this option yet?

Hello,

First off let me say i love your work! Thank you.

I see a problem on iphone 5 IOS, that when you open your navigation, the page with content is still scrollable. This means i can scroll the main page and my "close/show" isnt visibl anymore. So then i cant leave the menu without having a close button inside my menu - this is intended? Also if you use both the left and right menus, you cant leave menu to the right unless you put a close menu button inside the navigation.

I see you allready have overflow hidden X so im not sure why it does this. Just letting you know there is an issue here.

Nice work on the plugin. I have noticed, however, that the sliding animation is choppy. Is there a way to make it more smooth? Is there an option I've missed?

I am running the plugin within a PhoneGap build on an iPhone 5 running iOS 6.1.2, but it's choppy even when viewed in desktop Chrome v20.0.1132.47.

Thanks.

On the iPhone when side menue opens, the font size gets minuscule. Closing the side menue returns the font size to normal.

How would I trigged Sidr to open automatically when the page loads?

Thank you for your great plugin!

I testet the demo at your page and hit on "simple menu". In IE7 - IE8 it seems to work but IE9 and IE10 are showing some mad margins...

I searched for a note on your page where i can read something about browsersupport but cant find anything. I think this could be interesting...

To replicate:

1. visit http://www.berriart.com/sidr/
2. resize your browser window so that the menu link appears at the top left
3. click it to pop the menu open
4. leaving it open resize the browser window again to widen it so that the menu appears across the top
5. the left hand menu remains present, this is the issue

I've implemented a very simple slide-in left menu as per the example given on the plugin home page. This works perfectly on Chrome on my desktop PC and on a Kindle Fire HD but on an iPad running either Safari or Chrome the menu is blank (white) when it appears and momentarily flickers into existence as the menu is closed again. I've tried playing around with the z-axis parameter in the CSS to no avail. I've also tried the same thing on other pages that are not doing anything special except just display some text - and it never works.

Anyone else seeing this?

Did you notice, that if you try to put closing button inside Sidr id simply does not work, but works outside Sidr div. Any ideas or fixes?

What happens when the menu bar has many links that extend past the viewport? More likey when viewing on a mobile device. The examples show the menu in a fixed position. I don't see an option to have the menu scroll with the page.

How can I keep the original menu's styling?

The sidr menu loses the originals styling once it is created, along with any additional internal content. For instance... my menu has icons associated with all the links... the are not pulled into the new menu created with sidr.

I've successfully implemented this plugin but I'm having issues on mobile devices (iPhone/iPad) where the content to the right of my left sidr panel can scroll in the x and y direction. This becomes an issue because the trigger button is easily lost.

On Chrome/FF/Safari (desktop) I do no get this issue.

I tried setting overflow to hidden for my content wrapper but it does not work. Does anyone have any suggestions?

Thanks.

When viewing the demo on the official site (and also in my project) list items change positions when I hover my mouse over them.

The problem does not exist in the latest build of Chrome and Firefox.

How can I fix this issue?

Hi,

Thank you very much for developing this plugin. I'm a jquery beginner. I'd like the left panel menu that Ive created to disappear when my window size is 1024px and larger.

I attempted with this:

if (jQuery(document.body).width() > 1024) {
jQuery.sidr('close', 'sidr-main');
}

Could you tell me what the proper code should be? I also attempted using media queries/css to make the menu disappear but for some reason it didn't work.

Thanks again for this and your time.

I am using the sidr menu with a smooth scroll script and I would like the menu to close when an anchor link is clicked and then smooth scroll to location on the page. Has anyone had any luck with this? This is the smooth scroll script: http://demos.flesler.com/jquery/scrollTo/

Thanks

It would be nice if this coul be easily integrated into bootstrap, going to replace their navbar collapse.

I've got a fixed header that stays at the top of each page and when I use sidr it moves the rest of the pages, but not the fixed header. The css I'm using for the header is

.navbar-fixed-top
{
position: fixed;
}

Is there a work-around or a way I could hook into the open and close events to alter the css while the menu is open?