Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Working on default horizontal animation - slide

off screen (with best guess about document
structure and style)
  • Loading branch information...
commit 1f981ed5d10c75f908213cae01f62738bbe4a416 1 parent c5a667c
Nathan Long authored
14 examples/example.css
View
@@ -1,7 +1,8 @@
-html{background: #444; color: white; font-face: arial;}
+/* TODO: Fix CSS! Height is broken on panels; panels and code overlapping */
+html, body{background: #444; color: white; font-face: arial;}
div.panel {
width: 150px;
- /* height: 150px; */
+ height: 150px;
padding: 10px;
background-color: #225;
border-radius: 10px;
@@ -12,9 +13,12 @@ div.panel {
.panelToggler.open {background: none}
.panelToggler.closed {color: #555;}
-/* #panel3wrapper {position: relative; display: inline-block;} */
-/* #panel3 {position: relative; display: inline-block;} */
-/* #panelToggler3 {} */
+#panel3wrapper, {position: absolute;}
+#panel3, #panelToggler3, #panel4, #panelToggler4 {position: relative; display: inline-block;}
+.panelWrapper {position: absolute;}
+#panel4wrapper {right: 0;}
+
+#panelToggler3 {}
hr{clear: both;}
.code {
52 examples/index.html
View
@@ -43,8 +43,24 @@
// }
});
- $('#panel4').nonPersistentPanel({
- toggler: '#panelToggler4',
+ $('#panel4wrapper').persistentPanel({
+ openDirection: 'left',
+ toggler: '#panelToggler4',
+ cookieName: 'paneltacular',
+ togglerClass: false
+
+ // Custom cookie setting function. You must pass in the cookieName
+ // and value as shown here if you want your settings to be used and
+ // the 'open' and 'closed' value to be set correctly, but the options
+ // to jQuery.cookie can be set however you like - custom domain, secure
+ // cookie, etc. See the source code - it's very well-documented.
+ // setCookie: function(cookieName, value) {
+ // $.cookie(cookieName, value, { expires: 30, path: '/', domain: 'mysite.com', secure: true});
+ // }
+ });
+
+ $('#panel5').nonPersistentPanel({
+ toggler: '#panelToggler5',
defaultState: 'closed'
});
@@ -109,7 +125,7 @@
});
</div>
- <div id="panel3wrapper">
+ <div id="panel3wrapper" class="panelWrapper">
<div class="panel" id="panel3">
<h2>Not a panel</h2>
<p>Don't you believe it. I mean, unless you like facts.</p>
@@ -120,19 +136,41 @@
<hr>
<div class="code">
+ // Change a default setting - affects rest of instances on the page
+ $.fn.persistentPanel.defaults.duration = 50;
- $('#panel4').nonPersistentPanel({
- toggler: '#panelToggler4',
+ $('#panel4').persistentPanel({
+ openDirection: 'right',
+ toggler: '#panelToggler3',
+ cookieName: 'paneltacular',
+
+ });
+ </div>
+
+ <div id="panel4wrapper" class="panelWrapper">
+ <span class="panelToggler" id="panelToggler4"></span>
+ <div class="panel" id="panel4">
+ <h2>Not a panel</h2>
+ <p>Don't you believe it. I mean, unless you like facts.</p>
+ </div>
+ </div>
+
+ <hr>
+
+ <div class="code">
+
+ $('#panel5').nonPersistentPanel({
+ toggler: '#panelToggler5',
defaultState: 'closed'
});
</div>
<div>
- <div class="panel" id="panel4">
+ <div class="panel" id="panel5">
<h2>This panel won't persist</h2>
<p>Note that I'm using nonPersistentPanel().</p>
</div>
- <div class="panelToggler" id="panelToggler4"></div>
+ <div class="panelToggler" id="panelToggler5"></div>
</div>
</body>
50 jquery.persistentpanel.js
View
@@ -80,7 +80,7 @@
// set cookie, change toggler contents (if applicable) and set toggler class
var open = function(duration) {
$.data(panel, 'persistentPanelState', 'open');
- settings.animations.open.call(panel, duration === undefined ? settings.duration : duration);
+ settings.animations.open.call(panel, duration === undefined ? settings.duration : duration, settings);
settings['setCookie'].call(panel, settings.cookieName, 'open');
if (settings.togglerContents && settings.togglerContents.open){
$(settings.toggler).html(settings.togglerContents.open);
@@ -91,7 +91,7 @@
};
var close = function(duration) {
$.data(panel, 'persistentPanelState', 'closed');
- settings.animations.close.call(panel, duration === undefined ? settings.duration : duration);
+ settings.animations.close.call(panel, duration === undefined ? settings.duration : duration, settings);
settings['setCookie'].call(panel, settings.cookieName, 'closed');
if (settings.togglerContents && settings.togglerContents.closed){
$(settings.toggler).html(settings.togglerContents.closed);
@@ -118,18 +118,19 @@
// Decide if panel should initially be open or closed
switch(initialState){
- case 'open':
- open(0);
- if (settings.togglerContents && settings.togglerContents.open){
- $(settings.toggler).html(settings.togglerContents.open);
- }
- break;
case 'closed':
close(0);
if (settings.togglerContents && settings.togglerContents.closed){
$(settings.toggler).html(settings.togglerContents.closed);
}
break;
+ case 'open':
+ default:
+ open(0);
+ if (settings.togglerContents && settings.togglerContents.open){
+ $(settings.toggler).html(settings.togglerContents.open);
+ }
+ break;
}
// Stash settings here for access by default methods
@@ -159,8 +160,6 @@
};
$.fn.persistentPanel.defaults = {
- // opts: settings,
- // getSettings: function(){return settings;},
togglerContents: {open: null, closed: null}, // To be determined by openDirection
animations: {open: null, close: null}, // To be determined by openDirection
cookieName: 'persistentPanel',
@@ -173,23 +172,34 @@
getCookie: function(cookieName) {return $.cookie(cookieName);},
setCookie: function(cookieName, value) {$.cookie(cookieName, value, { expires: 30, path: '/'});},
toggles: {
- // opts: this.getSettings(),
- horizontalClose: function(duration){
- // var togglerWidth = function(){return $(settings.toggler).outerWidth();};
- var togglerWidth = function(){return 40;}; // Dummy value for now
- var left = (0 - $(this).outerWidth() + togglerWidth()) + 'px';
- $(this).animate({left: left}, duration);
+ horizontalClose: function(duration, settings){
+ // Determine opposite direction of openDirection
+ var dir = settings.openDirection === 'left' ? 'right' : 'left';
+ var togglerWidth = $(settings.toggler).outerWidth(true);
+ // TODO: Make this take into account all measurements that I know are
+ // relevent - body and html margin and padding.
+ // Work out bug with left and right animating asymmetrically
+ var documentMargin = parseInt($(this).closest('body').css('margin-' + dir),10);
+ var dist = (0 - ($(this).outerWidth(true) + documentMargin) + togglerWidth);
+ console.log($(this).outerWidth(true));
+ var animationOpts = {};
+ animationOpts[dir] = dist + 'px';
+ console.log(animationOpts);
+ $(this).animate(animationOpts, duration);
},
- horizontalOpen: function(duration){
- $(this).animate({left: '0px'}, duration);
+ horizontalOpen: function(duration, settings){
+ var dir = settings.openDirection === 'left' ? 'right' : 'left';
+ var animationOpts = {};
+ animationOpts[dir] = '0px';
+ $(this).animate(animationOpts, duration);
},
- verticalClose: function(duration){
+ verticalClose: function(duration, settings){
$(this).slideUp(duration);
},
- verticalOpen: function(duration){
+ verticalOpen: function(duration, settings){
$(this).slideDown(duration);
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.