Loading an iframe

Developer
Jared Pearce
Size
2,180 Kb
Views
12,144
  1. Loading an iframe Previews
  2. Loading an iframe HTML Codes
  3. Loading an iframe CSS Codes
  4. Loading an iframe JS Codes

How do I make an loading an iframe?

Load an iframe and size the page accordingly.. What is a loading an iframe? How do you make a loading an iframe? This script and codes were developed by Jared Pearce on 14 January 2023, Saturday.

Loading an iframe Previews
IQ Test

Loading an iframe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Loading an iframe</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid"> <div class="col-xs-12"> <div id="error"></div> </div> <div class="col-xs-12 col-sm-3"> <!-- Nav tabs --> <ul class="nav nav-list"> <li class="selected"><a href="#item1" data-iframe-source="https://codepen.io/jaredpearce/full/FbdDI">Item 1</a></li> <li><a href="#item2" data-iframe-source="https://codepen.io/jaredpearce/full/zIfra">Item 2</a></li> <li><a href="#item3" data-iframe-source="https://codepen.io/jaredpearce/full/iBdxb">Item 3</a></li> </ul> </div> <div class="col-xs-12 col-sm-9"> <!-- Tab panes --> <div class="panel panel-default" id="item1_iframe_holder"> <iframe id="item1_iframe" src="" align="center" width="100%" height="900"></iframe> </div> <div class="panel panel-default" id="item2_iframe_holder"> <iframe id="item2_iframe" src="" align="center" width="100%" height="900"></iframe> </div> <div class="panel panel-default" id="item3_iframe_holder"> <iframe id="item3_iframe" src="" align="center"></iframe> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loading an iframe - Script Codes CSS Codes

iframe { width: 100%; min-height: 900px; border: 0; display: none; }
.selected { background: #f4f4f4; }

Loading an iframe - Script Codes JS Codes

$('li a').on('click', function(e) { e.preventDefault(); var iframe_url = $(this).attr('data-iframe-source'), iframe_name = $(this).attr('href') + '_iframe', iframe_height = 900; $('li').removeAttr('class'); $('iframe').removeAttr('style'); $(iframe_name).attr('src', iframe_url); $(iframe_name).css({ height: iframe_height, display: 'block' }); $(this).parent('li').attr('class', 'selected');
})
Loading an iframe - Script Codes
Loading an iframe - Script Codes
Home Page Home
Developer Jared Pearce
Username jaredpearce
Uploaded January 14, 2023
Rating 3
Size 2,180 Kb
Views 12,144
Do you need developer help for Loading an iframe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jared Pearce (jaredpearce) Script Codes
Name
Bootstrap Tabs
SVG Container
Dojo Training
Border-image Investigation
Columns
My Truck
Floats
CSS Background Gradient
Interactive Process Chart
Ag-grid styling
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!