Fextralife Map Fullscreen Tampermonkey User Script

README.md

Elden Ring Interactive Map Modifier

This Tampermonkey script customizes the Elden Ring Interactive Map on the Fextralife website. It moves the map element to the top of the body and applies specific styles to enhance its visibility and accessibility.

Features

• Moves the map container (div with id="mapA") to the top of the body.
• Applies the following styles to the map container:
  • position: absolute;
  • z-index: 10000;
  • top: 0;
  • left: 0;
  • width: 100vw;
  • height: 100vh;
• Ensures the map iframe (iframe with class interactivemapcontainer) has a height of 100vh.

Installation

1. Install Tampermonkey if you haven't already.
2. Click on the Tampermonkey icon in your browser and select Create a new script....
3. Delete the default content and paste in the script from below.
4. Save the script.
5. Visit the Elden Ring Interactive Map to see the changes in effect.

fextralife_eldenring_fullscreenmap.js

// ==UserScript==
// @name         Elden Ring Interactive Map Modifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Move and style the map on the Elden Ring Interactive Map page
// @author       Aron Schüler
// @match        https://eldenring.wiki.fextralife.com/Interactive+Map
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Wait for the DOM to be fully loaded
    window.addEventListener('load', function() {
        // Get the mapA div
        const mapDiv = document.getElementById('mapA');
        if (mapDiv) {
            // Move mapA to be the first element in the body
            document.body.insertBefore(mapDiv, document.body.firstChild);

            // Apply the specified styles to mapA
            mapDiv.style.position = 'absolute';
            mapDiv.style.zIndex = '10000';
            mapDiv.style.top = '0';
            mapDiv.style.left = '0';
            mapDiv.style.width = '100vw';
            mapDiv.style.height = '100vh';

            // Get the iframe inside mapA
            const mapIframe = mapDiv.querySelector('.interactivemapcontainer');
            if (mapIframe) {
                // Apply the specified styles to the iframe
                mapIframe.style.height = '100vh';
            }
        }
    }, false);
})();