Show or Hide a Reload Icon to Load an iFrame in jQuery Tabs

JQuery Tabs with Refresh Icon
JQuery Tabs with Refresh Icon

jQuery tabs are pretty great, and you can get some cool functionality if you mix tabbing with nested content in an iFrame. Once you put the pieces together, you can see how your Web page might appear in the example image included with this post.

The iFrame and jQuery tabs that form the example page work well with out of the box settings, but you might want to make a few tweaks to the default settings. For example, the default jQuery UI tabbing logic makes the active tab non-clickable by the user. This makes sense, since it is the active tab and shouldn’t be click-able. However, because we are working with iFrame content in the page, we will want a way to allow the user to re-load the content without having to click to another tab and then back to the tab they want to select.

A simple way to get this to happen without adding a lot of extra formatting to your page is to add a click-able reload icon to the active tab. This way if a user wants to refresh the iFrame content of the tab, they can easily click the reload icon in the tab. One other thing to consider is that you’ll only want the reload icon to show on the active tab when the tab is actually active. It should be invisible the rest of the time.

Setting up the Basics

For starters, you’ll need to include the right jQuery JavaScript and CSS libraries with your page to make it work. In this example I’m pointing to hosted libraries so the example page will work right away. If you intend to use this functionality it’s a good idea to change the library references to local files so that you are not dependent on a third party hosting the code.

To get the tabbing effect, you’ll need the jQuery core library and the jQuery UI library. You’ll also need to include a reference to the styling of your choice to make the tabs look good, not to mention that you need the CSS include to be able to access the jQuery icon library. Here are the libraries that we will use in this example:

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

Adding the Tabs

You’ll want to set up the HTML markup for your tabs in the usual way. You’ll need to add some HTML markup in a later step to show the refresh icon in one of your tabs.

Adding the iFrame to the Tab

As I mentioned above, setting up the tabs and adding the iFrame HTML markup are all fairly straightforward. Make sure to give your iFrame a name attribute since you’ll need to reference it in the refresh icon of the tab. Here is what the markup for your iFrame should look like:

<iframe src='http://example.com' frameborder='0' scrolling="no" width='50%' height='400' id="ifrExample" name="ifrExampleName"></iframe>

Adding the Click-able Refresh Icon to the Tab

As you can see in the example tab markup below, we have added the refresh icon after the tab text using a blank span tag that references the icon in its class attribute. Then to make the icon click-able we encase the span in a hyperlink.

To have the hyperlink refresh the iFrame content, set the href to the URL that you want to show in the iFrame. Then set the target attribute to the name attribute of your iFrame. This is the best way of accomplishing the refresh, especially in the case of this example since JavaScript/jQuery reloads would fail due to the external iFrame content violating the JavaScript same origin policy.

<li><a href="#tabs-3">Details Tab</a><a href="http://www.iana.org/domains/example" target="ifrExampleName" id="hrefRefreshPage"><span class="ui-icon ui-icon-refresh" id="spanTestIcon"></span></a></li>

 Adding the jQuery Tab Handling to Hide/Show the Refresh Icon

In the example jQuery below you can see that the default tabs handling logic has been extended with a custom activate function. This runs when the user clicks a tab, and gets the index of the active (clicked) tab. If the active tab is the one that contains the iFrame, then we show the refresh icon in the tab by setting the CSS display attribute of the encapsulating href. Conversely, if some other tab was clicked, then we hide the refresh icon by setting the CSS display attribute of the encapsulating href to display=’none’

$("#tabs").tabs({
active: 2,
activate: function (event, ui) {
var clickedTab = $('#tabs').tabs('option', 'active');
if (clickedTab == 2) {
(document.getElementById('hrefRefreshPage')).style.display = 'inline';
} else {
(document.getElementById('hrefRefreshPage')).style.display = 'none';
}
}
});

Putting it all Together: the Example Code

Now that we have covered the steps needed to get the example tabs working the way that we want them to, here is the code for the fully working example. Just copy and paste it into an HTML file and then open it up in your browser to see it in action.

<html>
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script>

$(function () {
$("#tabs").tabs({
active: 2,
activate: function (event, ui) {
var clickedTab = $('#tabs').tabs('option', 'active');
if (clickedTab == 2) {
// The iFrame Tab is Active
// Set the tab's refresh icon to be visible/click-able
(document.getElementById('hrefRefreshPage')).style.display = 'inline';
} else {
// The iFrame Tab is Not Active... some other tab is active
// Set the tab's refresh icon to be invisible
(document.getElementById('hrefRefreshPage')).style.display = 'none';
}
}
});
});

</script>
</head>
<body>
<div id="tabs">

<ul>
<li><a href="#tabs-1">Test Tab #1</a></li>
<li><a href="#tabs-2">OverView Tab</a></li>
<li><a href="#tabs-3">Details Tab</a><a href="http://www.iana.org/domains/example" target="ifrExampleName" id="hrefRefreshPage"><span class="ui-icon ui-icon-refresh" id="spanTestIcon"></span></a></li>
<li><a href="#tabs-4">Appendix</a></li>
</ul>

<div id="tabs-1">
<p>Some random text </p>
</div>

<div id="tabs-2">
<p>You are now on tab #2</p>
</div>

<div id="tabs-3">
This is the example active tab. When you click on another tab, the refresh icon will disappear, and if you click back on the tab it will re-appear. When you click on the refresh icon it will refresh the contents of your iFrame with a new URL.
This is achieved by giving the iFrame a Name attribute, and then setting the Target= location in your hyperlink to the name of the iFrame. It is important to do it this way and to not use JavaScript because JavaScript/JQuery enforces the same domain policy and will throw a permissions error since we are pointing to the external http://example.com site.<br>
 <iframe src='http://example.com' frameborder='0' scrolling="no" width='50%' height='400' id="ifrExample" name="ifrExampleName"></iframe>
</div>

<div id="tabs-4">
<p>Here is the example tab #4.</p>

</div>

</div>
</body>
</html>

 

Advertisements

One thought on “Show or Hide a Reload Icon to Load an iFrame in jQuery Tabs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s