Skip to content

Latest commit

 

History

History
72 lines (54 loc) · 5.02 KB

emwiden_README.md

File metadata and controls

72 lines (54 loc) · 5.02 KB

Expand Elements to Prevent Horizontal Scroll with a One-Click Bookmarklet: emwiden

Introduction

In web development and browsing, encountering horizontal scrollbars can disrupt the user experience and indicate layout issues. Whether you're a developer debugging a webpage or a user navigating a site with design flaws, addressing horizontal overflow is essential. Manually inspecting and adjusting elements can be time-consuming and inefficient. This is where our emwiden Bookmarklet becomes useful.

The Ask

The objective was to create a bookmarklet that allows users to expand any element or its parent elements on a webpage to ensure that the content fits within the viewport, thereby eliminating unwanted horizontal scrollbars. This tool is particularly useful for developers, designers, and power users who need a quick and efficient way to manage and rectify layout issues without diving deep into the browser's developer tools.

The Solution

emwiden.js is a JavaScript bookmarklet that:

  1. Highlights Elements on Hover: Provides visual feedback by overlaying a semi-transparent highlight on elements as you hover over them.
  2. Selects and Expands Elements: Allows users to click on an element, automatically identifying the nearest ancestor causing horizontal overflow and expanding it to fit its content.
  3. Non-Intrusive Notifications: Utilizes console logs for feedback instead of intrusive alerts.
  4. Graceful Exit: Enables users to deactivate the bookmarklet mode by pressing the Esc key, removing all overlays and event listeners.

How to Install the Bookmarklet

  1. Use my Bookmarklet Installer
  2. Or copy the JavaScript into a bookmark, the traditional way

Using the Bookmarklet

  1. Navigate to a Web Page:

    • Open any webpage where you experience horizontal scrolling or suspect layout issues.
    • Drag the Emwiden link to your bookmarks

  2. Activate the Bookmarklet:

    • Click on the Expand Element to Prevent Scroll bookmarklet in your bookmarks bar.
    • Console Notification: Open the browser's developer console (F12 or Ctrl+Shift+I) to see the activation message: 
      Bookmarklet activated. Hover to highlight elements and click to expand. Press Esc to deactivate.

  3. Select and Expand Elements:

    • Visual Guidance: As you move your mouse over elements, a semi-transparent blue overlay highlights them.
    • Click to Expand: Click on the element you suspect is causing horizontal overflow. The script will:
      • Traverse up the DOM tree to find the nearest ancestor with scrollWidth > clientWidth.
      • Expand the identified element by setting its width and minWidth to its scrollWidth, ensuring content fits without causing horizontal scroll.
      • Log the action in the console: 
        Expanded element: <div id="example">...</div>
      • If no overflowing element is found, it logs: 
        No overflowing element found for the selected element.

  4. Deactivate the Bookmarklet:

    • Press Esc: To exit the bookmarklet mode and remove all overlays and event listeners, simply press the Esc key.
    • Console Notification: Upon pressing Esc, you'll see: 
      Bookmarklet mode deactivated.

Real-World Use Case

An excellent example of where this bookmarklet proves beneficial is ChatGPT code blocks, see e.g. the chat used to create this bookmarklet (and the draft of this README). These code blocks frequently scroll horizontally, making the code harder to read than ideal. Using emwiden.js on these code blocks widens them to fit the code content. Another example -- and the impetus for creating the bookmarklet -- are the historical crime tables from the FBI, e.g. Table 4 a tall and too-wide-for-its-container table that requires scrolling way down to then scroll side to side.

Conclusion

The Expand Elements to Prevent Horizontal Scroll Bookmarklet offers a streamlined solution to manage and rectify horizontal overflow issues on any webpage. By leveraging the power of JavaScript and modern browser APIs, this bookmarklet provides:

  • Efficiency: Quickly identify and adjust elements causing layout issues without delving into developer tools.
  • User-Friendly Interaction: Visual overlays guide users in selecting the right elements, enhancing usability.
  • Non-Intrusive Experience: Reliance on console logs ensures a smooth browsing experience without disruptive alerts.
  • Control and Flexibility: The ability to deactivate the bookmarklet gracefully ensures that users retain full control over their browsing environment.