Fullscreen Custom Macro

Question

Twine 2, Sugarcube 2. 

Heya, I've been trying to implement the custom Fullscreen Macro by Chapel but there seems to be a problem when using <<fullscreenlink 'FullScreen Mode'>>  The code works, and it functions properly, though it doesn't seem to like my backgrounds. It won't fit to scale with the image (gif) I've selected. Here's the CSS for the image: 

 

/* for Snowy background */
body.startbg {
	min-height: 100%;
	background-image: url('https://data.whicdn.com/images/301701280/original.gif');
	background-size: 100% 100%;
	background-repeat: no-repeat;
  	background-attachment: fixed;

And it appears as so: 

https://puu.sh/zo09m/05407051dd.png

The JS for this is below: 

 

// fullscreen function
setup.fullscreen = function (element) {
    if(element.requestFullScreen) {
        element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}

Macro.add('fullscreen', {
    handler : function() { 

        var bg = $('body').css('background-color');
        $('html').css('background-color', bg);

        setup.fullscreen(document.documentElement);

    }
});

Macro.add('fullscreenlink', {
    handler : function() { 
		
		var $wrapper  = $(document.createElement('span'));
		var $link     = $(document.createElement('a'));
		var className = 'macro-' + this.name;
		var bg;
		var linkText;
		
		if (this.args.length !== 1) {
			return this.error('incorrect number of arguments');
		}
		
		linkText = this.args[0];
		
		$link
			.wiki(linkText)
			.attr('id', 'fullscreen-macro-link')
			.ariaClick( function () {
				bg = $('body').css('background-color');
				$('html').css('background-color', bg);
				setup.fullscreen(document.documentElement);
			});
			
		$wrapper
			.append($link)
			.addClass(className)
			.appendTo(this.output);
			
    }
});

 

Answer 1

See if this works: 

html { height: 100% }
body { min-height: 100% }

 

Comments

A much better improvement! Thank you! I tried it out and it improved the look entirely, though it isn't picture perfect. The top of each page per passage still has a blank space above it: https://puu.sh/zo3VT/94a649472e.png

It's not as bad as before! Though something I've noticed is that the scrolling bugs the hell out of the page for some reason. Not sure if it's rendering the Gif that's so painful for it, or something else?

UPDATE: I increased both height and min-height by 15, and it improved the scrolling issue. Not so much for the top of the page though.

---

Hmm. My CSS skills are not great, so I don't know how much help I'd be, but if you're willing / able to post the file to a file sharing service like Google Drive, I'll take a look.

---

Here's the link to the HTML on google drive! If you're unable to come up with a fix, don't worry about it! ^^

https://drive.google.com/open?id=1RLggBrU9qx9MfIOJUidoNqd5T5nADlvv

---

That is weird and i have no idea why it's happening.  Someone who knows what they're doing will hopefully be able to provide more insight.  Regardless, this 'fixed' the problem:

body { min-height: 100%; padding-top: 5% }

I also recommend changing

body.myth {
  /* ... */
  background-size: 100% 100%;
  /* ... */
}

to

body.myth {
  /* ... */
  background-size: cover;
  /* ... */
}

which should prevent the image from warping in some browsers.

Note: I only tested this solution in Chrome.

---

Awesome! It works! Thank you so much, Chapel!