Permalink
Browse files

Adding some test elements to the prev/next navigation and implementin…

…g some basic transitions.
  • Loading branch information...
1 parent a367294 commit fa7337084533b418b483498a9c838e10b8fab8ff @WanderingMatt committed Apr 29, 2012
Showing with 81 additions and 30 deletions.
  1. +46 −12 public/stylesheets/screen.css
  2. +33 −14 stylesheets/screen.scss
  3. +2 −4 views/layouts/default.html.erb
@@ -517,29 +517,63 @@ nav a:hover {
}
.fancybox-nav {
- background: #4c489e;
- height: 36px;
- margin-top: -18px;
+ height: 41px;
+ margin-top: -33px;
position: fixed;
top: 50%;
+ min-width: 36px;
width: 36px;
}
- .fancybox-nav span {
- display: block;
- height: auto;
- margin: 0;
- position: static;
- top: auto;
- visibility: visible;
+ .fancybox-nav em {
+ position: absolute;
+ width: 36px;
+ height: 36px;
+ background: red;
+ }
+ .fancybox-nav hgroup {
+ background: #4c489e;
+ opacity: 0;
+ padding: 15px 30px;
+ position: absolute;
+ -moz-transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+ -o-transition: opacity 0.5s;
+ transition: opacity 0.5s;
+ white-space: nowrap;
+ }
+ .fancybox-nav:hover {
width: auto;
}
+ .fancybox-nav:hover hgroup {
+ opacity: 1;
+ }
.fancybox-prev {
- left: 30px;
+ left: 0;
+ text-align: left;
+ }
+ .fancybox-prev em {
+ left: 0;
+ }
+ .fancybox-prev hgroup {
+ left: -500px;
+ }
+ .fancybox-prev:hover hgroup {
+ left: 0;
}
.fancybox-next {
- right: 30px;
+ right: 0;
+ text-align: right;
+ }
+ .fancybox-next em {
+ right: 0;
+ }
+ .fancybox-next hgroup {
+ right: -500px;
+ }
+ .fancybox-next:hover hgroup {
+ right: 0;
}
.fancybox-title {
View
@@ -123,25 +123,44 @@ nav {
right: 30px;
}
.fancybox-nav {
- background: $purple;
- height: 36px;
- margin-top: -18px;
+ // background: red;
+ height: 41px;
+ margin-top: -33px;
position: fixed;
top: 50%;
+ min-width: 36px;
width: 36px;
- span {
- display: block;
- // Nuking Defaults //
- height: auto;
- margin: 0;
- position: static;
- top: auto;
- visibility: visible;
- width: auto;
+ em {
+ position: absolute;
+ width: 36px;
+ height: 36px;
+ background: red;
}
+ hgroup {
+ background: $purple;
+ opacity: 0;
+ padding: 15px 30px;
+ position: absolute;
+ @include transition(opacity .5s);
+ white-space: nowrap;
+ }
+ &:hover { width: auto; }
+ &:hover hgroup { opacity: 1; }
+ }
+ .fancybox-prev {
+ left: 0;
+ text-align: left;
+ em { left: 0; }
+ hgroup { left: -500px; }
+ &:hover hgroup { left: 0; }
+ }
+ .fancybox-next {
+ right: 0;
+ text-align: right;
+ em { right: 0; }
+ hgroup { right: -500px; }
+ &:hover hgroup { right: 0; }
}
- .fancybox-prev { left: 30px; }
- .fancybox-next { right: 30px; }
.fancybox-title {
line-height: $default-line-height;
hgroup {
@@ -47,10 +47,8 @@
aspectRatio: true,
beforeLoad: function() {
this.title = $(this.element).children('aside').html();
- this.tpl.prev = "<a title='Previous' class='fancybox-nav fancybox-prev'>The Previous Title</a>";
- this.tpl.next = "<a title='Next' class='fancybox-nav fancybox-next'>" + $(this.element).parent().next().find('a > aside > hgroup').html() + "</a>";
- console.log($(this.element).parent().prev().find('a > aside > hgroup').html());
- console.log($(this.element).parent().next().find('a > aside > hgroup').html());
+ this.tpl.prev = "<a title='Previous' class='fancybox-nav fancybox-prev'><em></em>" + $(this.element).parent().prev().find('a > aside').html() + "</a>";
+ this.tpl.next = "<a title='Next' class='fancybox-nav fancybox-next'><em></em>" + $(this.element).parent().next().find('a > aside').html() + "</a>";
},
height: 540,
loop: false,

0 comments on commit fa73370

Please sign in to comment.