Javascript Demos Tutorials HTML
Using jQuery it’s possible to pass properties to set the src, width and height of an iframe from a series of links.
Give the links a class for jQuery to read and set data properties, you can call these anything but using the named properties makes sense so set data-src, data-width and data-height.
<a class="item" data-src="http://domain.com" data-height="350" data-width="100%">Link</a>
Next the jquery (this snippet assumes you’ve already included jquery).
Looking for click events the class item is looked for then the data attributes are collected by using $(this).att(data-src) the data-src must match what’s set in the link, in the below snippet the width and height has a set value for cases where no width and height has been set.
Then the iframe inside #itemcontent is identified and the properties are applied.
$('a.item').on('click', function(e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;
$("#itemcontent iframe").attr({'src':src,'height': height,'width': width});
});
Finally have the div with an iframe.
<div id='itemcontent'>
<iframe></iframe>
</div>
Subscribe to my newsletter for the latest updates on my books and digital products.
Find posts, tutorials, and resources quickly.
Subscribe to my newsletter for the latest updates on my books and digital products.
