Blog, WordPress, WordPress Shortcode

Scrollable Content in WordPress Without an iFrame

The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context. The CSS overflow property comes in four flavours: visible, hidden, scroll, and auto. In this article we'll show you how to include a scrollable content area without the use of an iframe (using the overflow property). Below the article you'll find a download link to a WordPress shortcode that'll quickly enable the feature on your website.

The Result

The result of our super-simple effort is shown below. shortcode used was [scrollable]Content in here...[/scrollable]

[scrollables]Lorem ipsum auctor sagittis a sum sed sagittis purus sed tincidunt massa massa erat amet elit blandit consectetur facilisis blandit a eros condimentum velit velit hac orci nam eros egestas lorem ipsum accumsan aenean litora eros dui tellus quis habitasse dui rhoncus habitasse torquent eget id etiam mollis ut et ante mattis venenatis nec nisi velit odio mollis curabitur magna scelerisque lorem consectetur vehicula nam id sagittis curabitur auctor justo.

Fringilla at platea praesent aliquet adipiscing sodales pretium platea ornare aenean venenatis leo mollis erat ante nibh gravida in nec eros posuere vestibulum felis fringilla orci consectetur suspendisse magna lacus auctor egestas habitasse nostra amet sapien platea nam sagittis lacinia tellus litora feugiat odio adipiscing tortor placerat eleifend internoetics turpis magna hendrerit eleifend gravida venenatis inceptos inceptos luctus sodales ultricies eget vestibulum nunc magna blandit sed faucibus suspendisse dui conubia orci fusce posuere donec aenean dictum ultrices accumsan posuere eget.[/scrollables]

A number of stylistic and functional attributes apply: margin, padding, height, width, min_height, and style. If we were to apply internal padding and create a small margin, we'd use the following: [scrollable style="border: 3px dotted #000000;" padding="20" height="250"]Content in here...[/scrollable].

[scrollables margin="25" style="border: 3px dotted #000000;" padding="20" height="250"]Fringilla at platea praesent aliquet adipiscing sodales pretium platea ornare aenean venenatis leo mollis erat ante nibh gravida in nec eros posuere vestibulum felis fringilla orci consectetur suspendisse magna lacus auctor egestas habitasse nostra amet sapien platea nam sagittis lacinia tellus litora feugiat odio adipiscing tortor placerat eleifend internoetics turpis magna hendrerit eleifend gravida venenatis inceptos inceptos luctus sodales ultricies eget vestibulum nunc magna blandit sed faucibus suspendisse dui conubia orci fusce posuere donec aenean dictum ultrices accumsan posuere eget.

WordPress Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Scrollable shortcode

https://www.beliefmedia.com.au/scrollable-content-wordpress

function beliefmedia_scrollable_shortcode($atts, $content = null) {

$atts = shortcode_atts(array(

'margin' => '30',

'padding' => '4',

'height' => '150',

'width' => '100',

'min_height' => '30',

'style' => false

), $atts);

/* If 100 we'll set to 100%, otherwise pixels apply */

$width = ($atts['width'] == '100') ? '100%' : $atts['width'] . 'px';

/* Result */

$r = '<div style="margin-top: ' . $atts['margin'] . 'px; margin-bottom: ' . $atts['margin'] . 'px; padding: ' . $atts['padding'] . 'px; width: ' . $width . '; min-height: ' . $atts['min_height'] . 'px; max-height: ' . $atts['height'] . 'px; overflow-x: hidden; overflow-y: auto; text-align: justify;';

if ($atts['style'] !== false) $r .= $atts['style'];

$r .= '">' . do_shortcode($content) . '</div>';

return $r;

}

add_shortcode('scrollable', 'beliefmedia_scrollable_shortcode');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

You should alter the default values in the download to your liking to avoid using attributes any time the scrollable feature is used.

Download

Title: WordPress Scrollable
Description: Add scrollable sections to WordPress without the use of iframes. Can be styled to your liking.
Download • Version 0.1, 652.0B, zip, Category: WordPress Shortcodes

;

■ ■ ■

Download our complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.