0 votes
by (680 points)

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);
			
    }
});

 

1 Answer

+1 vote
by (63.1k points)

See if this works: 

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

 

by (680 points)
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.
by (63.1k points)
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.
by (680 points)
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
by (63.1k points)

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.

by (680 points)
Awesome! It works! Thank you so much, Chapel!
...