TNT: Useful Bookmarklet - "Now Learning Window Size"

[Jim Coyne]

Part of the "Tips 'N Tricks" series.

I ran into this article on the weekend: Learning Popup Height Adjuster for NowLearning: Enhance Your Learning Experience! and thought "why didn't I think of that?".  The height of the popup window on my screen has been driving me crazy, only using a bit more than half of the height of my monitor.  Why can't it be taller?

So, after reading that post I mentioned above, I didn't want to install something else just to resize the window, so I just created a simple bookmarklet to do the trick.  All you have to do is create a new bookmark in your favourite browser, give it a useful name and paste the following code into the URL or Location field:

javascript:(function(){
	try {
		var iframe = document.getElementsByClassName("scorm-iframe")[0];
		iframe.style.height = "95em";
	} catch(err) {}
})();

NOTE: When you paste the code into the bookmark/favourite, change ":" in the first line of code above with the actual colon character ":".

You will end up with a bookmark you can click to quickly resize the window now:

Simple and effective.  You'll probably have to play with the "95em" to get the right height for your monitor.  I could have added some smarts to figure out to optimum height, but sometimes you just have to get it done and move onto the next problem.

Kudos to @dogieglo and thanks for the inspiration.

EDIT: Here's a slightly more complicated version with some checking and sets the iframe height to a certain percentage of the window height as was suggested:

javascript:(function(){
	const desiredHeightPercent = 0.9;
	const learningDomain = "learning.servicenow.com";
	try {
		/* make sure it is a Now Learning window first */
		const url = decodeURIComponent(window.location.toString());
		if (url.indexOf(learningDomain) != -1) {
			console.log("Looking for scorm-iframe...");
			var element = document.getElementsByClassName("scorm-iframe")[0];
			element.style.height = document.getElementsByTagName('body')[0].clientHeight * desiredHeightPercent + 'px';
		} else {
			console.warn("Does not seem to be a Now Learning window: " + url);
		}
	} catch(err) {
		console.warn(err);
	}
})();

[FreddiBytes]

Thanks for the tip Jim! The booklet works great. It’s so satisfying to see the tiny learning window expand.

[dogieglo]

Thank you so much for sharing your experience and for creating the bookmarklet as an alternative solution! I understand the hesitation towards installing extension like Tampermonkey (especially when corporate computers often block installing browser extensions), and your approach to address this with a bookmarklet is both clever and practical.

Again, thank you for your kind words.

[BrandonForet]

This was extremely helpful. Thank you so much!

[SDGrubeWasTaken]

Fantastic work. I never understood why it wasn't sizable. This makes my life so much easier as someone who's at NowLearning for a large portion of my job 🙂 I made a post linking to this on LinkedIn but there's a lot of people with your name on LinkedIn it seems, so if you hit me up on there or give me details I'll link to you! -Sean Grube

[Jim Coyne]

That is indeed my LinkedIn profile.  Thanks for the shoutout!

[lindonmorris]

OMG so helpful, thank you. I can't believe they haven't fixed this themselves!!

[Susan31]

If I could give you 1,000 thumbs up I would!

[Jim Coyne]

@Susan31, well you could visit all the posts listed here (Developer Toolbox) and here (Tips 'N Tricks) and like them all.  Not quite 1,000, but quite a few  🤓

But seriously, thanks for the thumbs up

[Kyle Brown]

Just adding to the gratitude. Thanks for this! I'm currently doing some learning on a 4k monitor and the window only taking up about half the screen was annoying enough for me to search for a solution.

[Community Alums]

Thanks Jim! Very useful trick.

Just to add that it could be practical to work with percentages to adapt to different screens with something like:

iframe.style.height = document.getElementsByTagName('body')[0].clientHeight * 0.9 + 'px';