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($) { (function($) {
var width = $(window).width(); var width = $(window).width();
var height = $(window).height(); var height = $(window).height();
var size = (width < height ? width : height) + 'px'; var size = Math.min(width, height) + 'px';
$('#uhr').uhr({ $('#uhr').uhr({
width: size, width: size,
color: 'black', color: 'black',
language: 'de_CH', language: 'de_CH',
controls: true 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); })(jQuery);
</script> </script>
</body> </body>

15
js/uhr.js
View file

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