Display External Links in A Sliding Panel Overlay – slideFrame.js

Category: Javascript | February 2, 2026
0 Comment
Authorjonaspelzer
Last UpdateFebruary 2, 2026
LicenseMIT
Tags
Views35 views
OfficialGo to website
Live DemoDownload
Display External Links in A Sliding Panel Overlay – slideFrame.js

slideFrame is a vanilla JavaScript library that displays external links in dynamic iframe overlays.

It intercepts external link clicks and presents the destination content in a sliding panel overlay.

Features:

  • Dual activation modes: Enable slideFrame globally on all external links or activate it per-link with data attributes.
  • Keyboard accessible: Full ESC key support to close overlays quickly.
  • Selective exclusion: Exclude specific links from overlay behavior using data attributes.
  • Automatic external link detection: Identifies external domains and applies overlay behavior automatically.
  • Browser security compliant: Respects same-origin policies and HTTPS restrictions.

Use Cases:

  • Portfolio Live Previews: You can display live demos of your work in the overlay. This prevents the user from navigating away from your portfolio page.
  • Documentation References: It is excellent for linking to external API documentation or MDN articles. The reader stays in context while checking the reference.
  • News Aggregation: You can show a preview of a linked article. The user reads the content and closes the slide to return to the feed.
  • Terms and Privacy Policies: It loads legal text from external URLs. This keeps your main DOM clean.

How To Use It:

1. Download the slideFrame files and load them in your HTML document.

<link rel="stylesheet" type="text/css" href="slideFrame.css" />
<script src="slideFrame.min.js"></script>

2. slideFrame relies on HTML5 data- attributes for configuration. You do not need to write initialization code in JavaScript. It runs automatically.

<a href="https://example.com" data-slideframe="true" title="My Portfolio">View Project</a>

3. To enable the overlay for every link on the site, add the attribute to the <body> tag.

<body data-slideframe="true">
  <a href="https://example.com">This link opens in overlay</a>
  <a href="https://another-site.com">This one too</a>
</body>

4. The overlay displays a title bar above the iframe content. By default, it shows the link text. You can override this with a custom title.

<a href="https://example.com" 
   data-slideframe="true" 
   title="Example Website Documentation">
   Click here
</a>

5. Specify minimum viewport width in pixels where slideFrame activates. Set to 0 to enable on all screen sizes. You can open the source file to modify this setting.

// customizable values
const SFthreshold = 0;

FAQs:

Q: Why do some external links fail to load in the overlay?
A: The target website likely implements security headers that prevent iframe embedding. Headers like X-Frame-Options or CSP frame-ancestors block cross-origin iframe loading. This is a server-side security measure that slideFrame cannot override.

Q: Can I customize the overlay appearance beyond the default CSS?
A: Yes. All overlay elements use standard CSS classes prefixed with slideframe-. Open the slideFrame.css file and modify the selectors to match your design system.

Q: Does slideFrame work with single-page applications or dynamically loaded content?
A: The script runs once on page load and only attaches event listeners to links present in the DOM at that moment. Links added after initialization will not trigger the overlay. You need to reinitialize slideFrame after loading new content by calling the slideFrame() function again.

Q: What happens to browser history when users navigate within the iframe?
A: The iframe maintains its own navigation history independent of the parent page. You cannot use browser back/forward buttons to control iframe navigation. The back button in the slideFrame title bar closes the overlay but does not navigate iframe history.

See Also:

You Might Be Interested In:

Leave a Reply