Skip to content

Commit

Permalink
Fix Icebox scaling issues and update functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mookman288
mookman288 committed Oct 19, 2015
1 parent c661c7e commit 017bd09
Show file tree
Hide file tree
Showing 7 changed files with 188 additions and 77 deletions.
4 changes: 2 additions & 2 deletions css/stylesheet.css
View file

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions js/framework.js
View file

Large diffs are not rendered by default.

38 changes: 19 additions & 19 deletions src/css/icebox/icebox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,29 @@ div#icebox *.icebox {
}

div#ice-shadow {
display: none;
position: fixed;
top: 0px;
left: 0px;
display: none;
width: 100%;
height: 100%;
background-image: url('../../images/shadow.png');
background-image: url('../images/shadow.png');
background-repeat: repeat;
z-index: 8400;
}

div#icebox {
position: absolute;
display: none;
padding: 0.25%;
position: relative;
top: 25.00%;
left: 25.00%;
padding: 0.25em;
width: auto;
height: auto;
max-width: 88.00%;
max-height: 88.00%;
min-width: 20.00%;
min-height: 20.00%;
max-width: 85.00%;
max-height: 85.00%;
min-width: 15.00%;
min-height: 15.00%;
background-color: #000;
border-width: 1px;
border-color: #007BA7;
Expand All @@ -39,13 +41,15 @@ div#icebox {
box-shadow: 0px 0px 1.00em #000;
font-family: sans-serif, serif;
font-size: 1.00em;
opacity: 0;
overflow: visible !important;
z-index: 8500;
}

div#icebox > a#icebox-close {
float: right;
margin-top: -1.00em;
margin-right: -1.00em;
position: absolute;
top: -1.00em;
right: -1.00em;
padding: 0.25em 0.50em;
background-color: #000;
border-width: 1px;
Expand All @@ -63,17 +67,13 @@ div#icebox > a#icebox-close {
div#icebox > a#icebox-close:hover, div#icebox > a#icebox-close:active {
background-color: #D00;
}

div#icebox > div, div#icebox img {
max-width: 100.00%;
max-height: 100.00%;
}

div#icebox > * {
overflow: hidden;
div#icebox > div {
width: auto;
height: auto;
}

div#icebox * {
div#icebox > div * {
max-width: 100.00%;
max-height: 100.00%;
color: #FFF;
Expand Down
105 changes: 80 additions & 25 deletions src/js/50_icebox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,39 @@ var icebox = function() {
var $icebox = jQuery('<div>', {id: 'icebox'}).append($close).append($div);

//Append the shadow and icebox.
jQuery('body').append($shadow).append($icebox);
jQuery('body').append($shadow.append($icebox));

//Fade the shadow in.
jQuery('#ice-shadow').fadeIn('400', function() {
//Fade the icebox in.
jQuery('#icebox').fadeIn('400', function() {
//Center the element.
jQuery(this).css("top", (((jQuery(window).height() - jQuery(this).outerHeight()) / 2) +
jQuery(window).scrollTop()));
jQuery(this).css("left", (((jQuery(window).width() - jQuery(this).outerWidth()) / 2) +
jQuery(window).scrollLeft()));
//Declare this.
var $this = jQuery(this);
var $parent = $this.parent();

//Recalculate element.
recalculateIcebox($parent, $this, $this.children('div'));

//Create a new timer.
var timer;

//Resize the element.
jQuery(window).bind('resize', function() {
//Set the div to display none.
//$this.children('div').animate({'opacity': 0}, 125).css('display': 'none');

//If there is a timer.
if (timer) clearTimeout(timer);

//Create a new timer.
timer = setTimeout(function() {
//Recalculate element.
recalculateIcebox($parent, $this, $this.children('div'));
}, 250);
});

//Set close listener.
jQuery('#icebox-close, #ice-shadow').click(function(e) {
jQuery('#icebox-close').click(function(e) {
//Prevent default.
e.preventDefault();

Expand All @@ -91,24 +110,6 @@ var icebox = function() {
icebox = false;
});
});

//Create a new timeout.
var timer;

//Resize the element.
jQuery(window).bind('resize', function() {
//If there is a timer.
if (timer) clearTimeout(timer);

//Create a new timer.
setTimeout(function() {
//Center the element.
$this.css("top", (((jQuery(window).height() - $this.outerHeight()) / 2) +
jQuery(window).scrollTop()));
$this.css("left", (((jQuery(window).width() - $this.outerWidth()) / 2) +
jQuery(window).scrollLeft()));
}, 250);
});

//Return fales.
return false;
Expand All @@ -126,6 +127,60 @@ var icebox = function() {
});
};

/**
* Recalculates an element based on its child and vise-versa.
*/
function recalculateIcebox($parent, $this, $child, repeat) {
//Declare variables.
var options = {'queue': false, 'duration': (!repeat) ? 0 : 125};

//If this is not a repeat.
if (!repeat) {
//Reset CSS.
$this.css({'width': 'auto', 'height': 'auto'});
$child.css({'width': 'auto', 'height': 'auto'});
}

//Get the heights and widths.
var cHeight = $child.height();
var cWidth = $child.width();
var height = $this.height();
var width = $this.width();

//Calculate the height.
if (height > cHeight) {
$this.animate({'height': $child.outerHeight()}, options);
} else if (cHeight > height) {
$child.animate({'height': $this.height()}, options);
}

//Calculate the width.
if (width > cWidth) {
$this.animate({'width': $child.outerWidth()}, options);
} else if (cWidth > width) {
$child.animate({'width': $this.width()}, options);
}

//If this is not a repeat.
if (!repeat) {
//Set the CSS.
$child.css('display', 'inline-block');

//Repeat.
recalculateIcebox($parent, $this, $child, true);
} else {
//Set a timeout.
setTimeout(function() {
//Center the element.
$this.animate({'top': (($parent.outerHeight() - $this.outerHeight()) / 2)}, options);
$this.animate({'left': (($parent.outerWidth() - $this.outerWidth()) / 2)}, options);

//Show the element.
$this.animate({'opacity': 1}, {'queue': false, 'duration': 250});
}, 126);
}
}

//If jQuery exists.
if (typeof jQuery !== 'undefined') {
//Launch icebox.
Expand Down
2 changes: 1 addition & 1 deletion src/js/80_ice.framework.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ ice.galleries = (function($) {
//Resize the element.
$(window).bind('resize', function() {
//Hide the images.
$this.find('img').css('opacity', 0);
$this.find('img').animate({'opacity': 0}, 150);

//If there is a timer.
if (timer) clearTimeout(timer);
Expand Down
105 changes: 80 additions & 25 deletions src/js/hint/50_icebox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,39 @@ var icebox = function() {
var $icebox = jQuery('<div>', {id: 'icebox'}).append($close).append($div);

//Append the shadow and icebox.
jQuery('body').append($shadow).append($icebox);
jQuery('body').append($shadow.append($icebox));

//Fade the shadow in.
jQuery('#ice-shadow').fadeIn('400', function() {
//Fade the icebox in.
jQuery('#icebox').fadeIn('400', function() {
//Center the element.
jQuery(this).css("top", (((jQuery(window).height() - jQuery(this).outerHeight()) / 2) +
jQuery(window).scrollTop()));
jQuery(this).css("left", (((jQuery(window).width() - jQuery(this).outerWidth()) / 2) +
jQuery(window).scrollLeft()));
//Declare this.
var $this = jQuery(this);
var $parent = $this.parent();

//Recalculate element.
recalculateIcebox($parent, $this, $this.children('div'));

//Create a new timer.
var timer;

//Resize the element.
jQuery(window).bind('resize', function() {
//Set the div to display none.
//$this.children('div').animate({'opacity': 0}, 125).css('display': 'none');

//If there is a timer.
if (timer) clearTimeout(timer);

//Create a new timer.
timer = setTimeout(function() {
//Recalculate element.
recalculateIcebox($parent, $this, $this.children('div'));
}, 250);
});

//Set close listener.
jQuery('#icebox-close, #ice-shadow').click(function(e) {
jQuery('#icebox-close').click(function(e) {
//Prevent default.
e.preventDefault();

Expand All @@ -91,24 +110,6 @@ var icebox = function() {
icebox = false;
});
});

//Create a new timeout.
var timer;

//Resize the element.
jQuery(window).bind('resize', function() {
//If there is a timer.
if (timer) clearTimeout(timer);

//Create a new timer.
setTimeout(function() {
//Center the element.
$this.css("top", (((jQuery(window).height() - $this.outerHeight()) / 2) +
jQuery(window).scrollTop()));
$this.css("left", (((jQuery(window).width() - $this.outerWidth()) / 2) +
jQuery(window).scrollLeft()));
}, 250);
});

//Return fales.
return false;
Expand All @@ -126,6 +127,60 @@ var icebox = function() {
});
};

/**
* Recalculates an element based on its child and vise-versa.
*/
function recalculateIcebox($parent, $this, $child, repeat) {
//Declare variables.
var options = {'queue': false, 'duration': (!repeat) ? 0 : 125};

//If this is not a repeat.
if (!repeat) {
//Reset CSS.
$this.css({'width': 'auto', 'height': 'auto'});
$child.css({'width': 'auto', 'height': 'auto'});
}

//Get the heights and widths.
var cHeight = $child.height();
var cWidth = $child.width();
var height = $this.height();
var width = $this.width();

//Calculate the height.
if (height > cHeight) {
$this.animate({'height': $child.outerHeight()}, options);
} else if (cHeight > height) {
$child.animate({'height': $this.height()}, options);
}

//Calculate the width.
if (width > cWidth) {
$this.animate({'width': $child.outerWidth()}, options);
} else if (cWidth > width) {
$child.animate({'width': $this.width()}, options);
}

//If this is not a repeat.
if (!repeat) {
//Set the CSS.
$child.css('display', 'inline-block');

//Repeat.
recalculateIcebox($parent, $this, $child, true);
} else {
//Set a timeout.
setTimeout(function() {
//Center the element.
$this.animate({'top': (($parent.outerHeight() - $this.outerHeight()) / 2)}, options);
$this.animate({'left': (($parent.outerWidth() - $this.outerWidth()) / 2)}, options);

//Show the element.
$this.animate({'opacity': 1}, {'queue': false, 'duration': 250});
}, 126);
}
}

//If jQuery exists.
if (typeof jQuery !== 'undefined') {
//Launch icebox.
Expand Down
2 changes: 1 addition & 1 deletion src/js/hint/80_ice.framework.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ ice.galleries = (function($) {
//Resize the element.
$(window).bind('resize', function() {
//Hide the images.
$this.find('img').css('opacity', 0);
$this.find('img').animate({'opacity': 0}, 150);

//If there is a timer.
if (timer) clearTimeout(timer);
Expand Down

0 comments on commit 017bd09

Please sign in to comment.