Permalink
Browse files

Attempt to keep background and images centred by moving them in relat…

…ion to screen size.

  This approach works pretty well, but the original positioning needs to be tweaked so that the images are in a good position over lots of different sizes.
  • Loading branch information...
1 parent a7214cb commit 8af7c3b5e81d5b35009e35715c8372c0976f8ef7 Jason Cale committed Apr 13, 2012
Showing with 203 additions and 118 deletions.
  1. +199 −114 assets/javascripts/src/site.js
  2. +2 −2 assets/stylesheets/src/vacationists.scss
  3. +2 −2 views/layout.haml
@@ -2,136 +2,221 @@ var tracks = [];
var fadeInTimer;
$(document).ready(function() {
- $('body').addClass('js-enabled');
-
- $('.track').each(function () {
- if ($(this).attr('href')) {
- var player = jwplayer($(this).attr('id')).setup({
- players: [
- {type: "flash", src: "/media/player.swf"}
- ],
- playlist: "none",
- flashplayer: "/media/player.swf",
- duration: parseInt($(this).attr('data-duration')),
- file: $(this).attr('href'),
- provider: "sound",
- height: 24,
- width: 250,
- dock: false,
- controlbar: "bottom",
- "playlist.position" : "none",
- backcolor: "ffffff",
- frontcolor: "333333",
- wmode: "transparent"
- }).onPlay(function () {
- var currentId = this.id;
- $(tracks).each(function () {
- if (this.id != currentId && this.getState().match(/PLAYING|PAUSED|BUFFERING/)) {
- this.stop();
- };
- });
- $('a[data-track="'+this.id+'"]').siblings('em.state').text(" is playing");
- }).onComplete(function () {
- $('a[data-track="'+this.id+'"]').siblings('em.state').remove();
- var currentTrack = tracks.indexOf(player);
- if (currentTrack < (tracks.length - 1)) {
- tracks[currentTrack + 1].play();
- };
- });
- tracks.push(player);
- }
- });
+ $('body').addClass('js-enabled');
- $('.toggle-track').click(function () {
- var track = jwplayer($(this).attr('data-track'));
- track.play();
- var state = track.getState();
+ $('.track').each(function() {
+ if ($(this).attr('href')) {
+ var player = jwplayer($(this).attr('id')).setup({
+ players: [
+ {
+ type: "flash",
+ src: "/media/player.swf"
+ }
+ ],
+ playlist: "none",
+ flashplayer: "/media/player.swf",
+ duration: parseInt($(this).attr('data-duration')),
+ file: $(this).attr('href'),
+ provider: "sound",
+ height: 24,
+ width: 250,
+ dock: false,
+ controlbar: "bottom",
+ "playlist.position": "none",
+ backcolor: "ffffff",
+ frontcolor: "333333",
+ wmode: "transparent"
+ }).onPlay(function() {
+ var currentId = this.id;
+ $(tracks).each(function() {
+ if (this.id != currentId && this.getState().match(/PLAYING|PAUSED|BUFFERING/)) {
+ this.stop();
+ };
+ });
+ $('a[data-track="' + this.id + '"]').siblings('em.state').text(" is playing");
+ }).onComplete(function() {
+ $('a[data-track="' + this.id + '"]').siblings('em.state').remove();
+ var currentTrack = tracks.indexOf(player);
+ if (currentTrack < (tracks.length - 1)) {
+ tracks[currentTrack + 1].play();
+ };
+ });
+ tracks.push(player);
+ }
+ });
- $('.toggle-track, #content').removeClass('playing paused');
- $('.track-listing em.state').remove();
+ $('.toggle-track').click(function() {
+ var track = jwplayer($(this).attr('data-track'));
+ track.play();
+ var state = track.getState();
- $(this).after('<em class="state" />');
+ $('.toggle-track, #content').removeClass('playing paused');
+ $('.track-listing em.state').remove();
- if (state == "PLAYING" || state == "BUFFERING") {
- $(this).addClass('playing');
- $('#content').addClass('playing');
- } else if (state == "PAUSED") {
- $(this).addClass('paused');
- $('#content').addClass('paused');
- $(this).siblings('em.state').text(" is paused");
- }
+ $(this).after('<em class="state" />');
- var trackClass = "track_" + (tracks.indexOf(track)+1);
+ if (state == "PLAYING" || state == "BUFFERING") {
+ $(this).addClass('playing');
+ $('#content').addClass('playing');
+ } else if (state == "PAUSED") {
+ $(this).addClass('paused');
+ $('#content').addClass('paused');
+ $(this).siblings('em.state').text(" is paused");
+ }
- if (!$('.images').hasClass(trackClass)) {
- $('.images').attr('class', 'images '+trackClass).find('div').hide();
- clearTimeout(fadeInTimer);
- fadeInTimer = setTimeout(function () {
- $('.images').find('div').fadeIn();
- }, 2000);
- }
+ var trackClass = "track_" + (tracks.indexOf(track) + 1);
- return false;
- });
-
- $('a.moreinfo').click(function () {
- if (($(window).width() > 600)) {
- var target = $($(this).attr('href'));
- if (target && ($(window).width() > 600)) {
- if (target.hasClass('active')) {
- var currTop = target.css('top');
- target.css('z-index', '-1').animate({ left: '50%', top: $('.player').css('top') }, function () {
- target.removeClass('active').hide().css({top: currTop});
- });
- $('.player').animate({ left: '50%' });
- } else {
- // close any active panels
- $('.info.active').each(function () {
- var _this = $(this);
- var currTop = _this.css('top');
- _this.css('z-index', '-1').animate({ left: '30%', top: $('.player').css('top') }, function () {
- _this.removeClass('active').hide(function () {
- _this.css({left: '50%', top: currTop});
- });
+ if (!$('.images').hasClass(trackClass)) {
+ $('.images').find('.image').fadeOut('slow', function () {
+ $('.images').attr('class', 'images ' + trackClass);
+ repositionImages();
+ $('.images').find('.image').hide();
+
+ clearTimeout(fadeInTimer);
+ fadeInTimer = setTimeout(function() {
+ $('.images').find('.image').fadeIn();
+ },
+ 2000);
});
- });
+ }
- var currTop = target.css('top');
- target.addClass('active').css({top: $('.player').css('top')}).show();
- target.animate({left: '65%', opacity: 1, top: currTop}, function () {
- target.css('z-index', '10');
- });
- $('.player').animate({ left: '30%' });
+ return false;
+ });
+
+ $('a.moreinfo').click(function() {
+ if (($(window).width() > 600)) {
+ var target = $($(this).attr('href'));
+ if (target && ($(window).width() > 600)) {
+ if (target.hasClass('active')) {
+ var currTop = target.css('top');
+ target.css('z-index', '-1').animate({
+ left: '50%',
+ top: $('.player').css('top')
+ },
+ function() {
+ target.removeClass('active').hide().css({
+ top: currTop
+ });
+ });
+ $('.player').animate({
+ left: '50%'
+ });
+ } else {
+ // close any active panels
+ $('.info.active').each(function() {
+ var _this = $(this);
+ var currTop = _this.css('top');
+ _this.css('z-index', '-1').animate({
+ left: '30%',
+ top: $('.player').css('top')
+ },
+ function() {
+ _this.removeClass('active').hide(function() {
+ _this.css({
+ left: '50%',
+ top: currTop
+ });
+ });
+ });
+ });
+
+ var currTop = target.css('top');
+ target.addClass('active').css({
+ top: $('.player').css('top')
+ }).show();
+ target.animate({
+ left: '65%',
+ opacity: 1,
+ top: currTop
+ },
+ function() {
+ target.css('z-index', '10');
+ });
+ $('.player').animate({
+ left: '30%'
+ });
+ }
+ }
+
+ return false;
+ };
+ }).each(function() {
+ if ($(window).width() > 600) {
+ $($(this).attr('href')).hide();
}
- }
+ });
- return false;
- };
- }).each(function () {
- if ($(window).width() > 600) {
- $($(this).attr('href')).hide();
+ var _afterResize = function() {
+ $('.images div').height($(document).height());
+ if ($(window).width() < 600) {
+ $('a.moreinfo').each(function() {
+ $($(this).attr('href')).show();
+ });
+ } else {
+ $('a.moreinfo').each(function() {
+ var target = $($(this).attr('href'));
+ if (target.hasClass('active')) {
+ target.show();
+ } else {
+ target.hide();
+ }
+ });
+ }
+ repositionImages();
}
- });
- $(window).resize(function () {
- $('.images div').height($(document).height());
- if ($(window).width() < 600) {
- $('a.moreinfo').each(function () {
- $($(this).attr('href')).show();
+ var imagePositions = {};
+ var bgImageWidth = 1556;
+
+ function repositionImages() {
+ var offset = $(window).width() - bgImageWidth;
+ var moveBy = (offset > 0) ? offset : 0;
+
+ $('body').animate({
+ 'background-position-x': moveBy
});
- } else {
- $('a.moreinfo').each(function () {
- var target = $($(this).attr('href'));
- if (target.hasClass('active')) {
- target.show();
- } else {
- target.hide();
+ $('.images').each(function() {
+ var track = $(this).attr('className').replace(/images/, '').trim();
+ if (track.length > 0) {
+ if (imagePositions[track] == undefined) {
+ imagePositions[track] = {};
+ $(this).find('.image').each(function () {
+ if ($(this).attr('style')) {
+ var styleWithoutBgPosition = $(this).attr('style').replace(/background-position-x:\s+\d+px;/, '').trim();
+ $(this).attr('style', styleWithoutBgPosition);
+ }
+ imagePositions[track][$(this).attr('id')] = { left: $(this).css('background-position-x') };
+ });
+ }
+
+ $(this).find('.image').each(function () {
+ var originalPos = parseInt(imagePositions[track][$(this).attr('id')].left);
+ if (originalPos) {
+ $(this).animate({
+ 'background-position-x': originalPos + moveBy + 'px'
+ });
+ };
+ });
}
});
}
- });
- // var grid = new hashgrid({
- // numberOfGrids: 1
- // });
+ var _resizingWait;
+ var _resize_handler = function() {
+ try {
+ if (_resizingWait !== false)
+ clearTimeout(_resizingWait);
+ _resizingWait = setTimeout(_afterResize, 200);
+ } catch(err) {
+ //do nothing
+ }
+ };
+
+ $(window).resize(_resize_handler);
+
+ repositionImages();
+
+ // var grid = new hashgrid({
+ // numberOfGrids: 1
+ // });
});
@@ -56,7 +56,7 @@ body.js-enabled {
}
@mixin track_image($id, $img, $width, $height, $top, $left) {
- .img_#{$id} {
+ #i#{$id} {
background: url(/assets/#{$img}) $left $top no-repeat;
width: 100%;
height: 100%;
@@ -66,7 +66,7 @@ body.js-enabled {
.images {
display: none;
- .img_1, .img_2 {
+ .image {
position: absolute;
z-index: -1;
top: 0;
View
@@ -13,8 +13,8 @@
<!-- <![endif]-->
%body
.images
- .img_1
- .img_2
+ .image#i1
+ .image#i2
#content
=yield

0 comments on commit 8af7c3b

Please sign in to comment.