Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

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

…g some basic transitions.
  • Loading branch information...
commit fa7337084533b418b483498a9c838e10b8fab8ff 1 parent a367294
@WanderingMatt authored
View
58 public/stylesheets/screen.css
@@ -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
47 stylesheets/screen.scss
@@ -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 {
View
6 views/layouts/default.html.erb
@@ -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,
Please sign in to comment.
Something went wrong with that request. Please try again.