current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using angular-snap.js for my vertical slider. The problem I am facing is that the snap-content and snap-drawer Toggle buttons are appearing and functioning from the top of a page (even above the header and menu). I would like this snap-drwaer and snap-content should appear below the menu bar and when I click toggle button it should not cause drag effect on header and menu part. Can any one suggest me, how to achieve this with angular-snap.js? Please find the plunker at http://plnkr.co/edit/usbx8yP1fXMJleR3iqZ8?p=preview. The following snap-drawer and snap-content should appear and function below menu bar only,the toggle button should not cause header and menu to be hidden/showon toggle button click. The header and menu should always remain as it is without getting effected with the drag behavior of snap-drawer and snap-content. 

    <snap-drawer>
    <button snap-toggle>Another Toggle Button</button>
    </snap-drawer>

    <snap-content snap-options="{tapToClose:false}">
    <button snap-toggle>Toggle</button>   
    </snap-content>

Please let me know, if I need to make any further clarification to make my question clear?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

I'm having the same problem and the solution I came up with was to set the header as a fixed element.

You can see the code here http://plnkr.co/edit/brN1fNbPtm3Ad0pP4zKG?p=preview

<div class="wrapper" style="position:fixed;z-index:100;top:80px;">
...
<snap-drawer style="top:150px">
...
<snap-content style="top:150px" snap-options="{tapToClose:false}">

The css changes were made straight on the html file so it will be easier for you to check what I changed.

Not the perfect solution so if somebody comes up with a better one, please share.

share|improve this answer
    
How can extend snap-drawer width? I noticed when I click snap-toggle button in snap-content, transform: translate3d(266px, 0px, 0px) is getting replaced in style attribute, I want it to be translate3d(700px, 0px, 0px). Where exactly I need to make the change I am not sure. I made some trail and error but it is not working. –  mnkb Sep 9 '14 at 10:58
    
solved. Set maxPosition: 700, minPosition: -700 in snap.js –  mnkb Sep 9 '14 at 13:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.