manuel/uhr
1
0
Fork 0
Code Issues 5 Pull requests Releases Wiki Activity

make the clock adjust its size on window resizing

Browse source
This commit is contained in:
Manuel Friedli 2014-08-11 19:19:11 +02:00
parent 633401862f
commit c0742a6f11
2 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -49,13 +49,24 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
(function($) {
var width = $(window).width();
var height = $(window).height();
var size = (width < height ? width : height) + 'px';
var size = Math.min(width, height) + 'px';
$('#uhr').uhr({
width: size,
color: 'black',
language: 'de_CH',
controls: true
});
$(window).on('resize', function (event) {
var $uhr = $('#uhr');
var $parent = $uhr.parent();
var $window = $(window);
var parentWidth = $parent.width();
var parentHeight = $parent.height();
var windowWidth = $window.width();
var windowHeight = $window.height();
var size = Math.min(parentWidth, parentHeight, windowWidth, windowHeight) + 'px';
$uhr.uhr("width", size);
});
})(jQuery);
</script>
</body>

15
js/uhr.js
View file

@ -108,6 +108,14 @@
}
update.bind(this)();
};
var setWidth = function setWidth(width) {
var e = this.element;
e.css('width', width);
var realWidth = e.width();
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
};
// private interface methods
var create = function create() {
@ -140,11 +148,7 @@
e.append('<span class="item dot dot4"></span>');
e.append('<div class="letterarea"></div>');
e.append('<div class="reflection"></div>');
e.css('width', this.options.width);
var realWidth = e.width();
e.width(realWidth);
e.height(realWidth);
e.css('font-size', (realWidth / 40) + 'px');
setWidth.bind(this)(this.options.width);
if (this.options.controls) {
var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
@ -352,6 +356,7 @@
"language": setLanguage,
"theme": setTheme,
"time": setTime,
"width": setWidth,
// constructor method
"_create": create
});