How to make a home link with spry tabbed panels

Question

I have a site that mainly uses spry tabbed panels to link between pages. On the very top of the site I have a logo that I would like to use as a link to either refresh the page or take it back to the original tab. The problem is that since I've used spry tabbed panels, the URL never changes in the site when I move from one tabbed page to another, making a 'home' link impossible.

Does anyone know how to make a link on my site with the logo.jpeg that will refresh the page or open the original tab back up?

Here is the site: http://emilymagnuson.com/trustbank/index.html

Thank you!

Answer 1

Spry Tabbed Panels are basically JavaScript. It doesn’t seem there is an easy way to hook a custom JavaScript call into the script to allow an outside element—like the logo—to trigger a tab being displayed. So I would recommend a quick & simple solution. Wrap the logo image in a link that will reload the page completely. So this:

<img src="images/logo.jpg" width="100" height="100">

Turns into this:

<a href="/" target="_top"><img src="images/logo.jpg" width="100" height="100"></a>

Or maybe this if you do not mind the index.html showing:

<a href="index.html" target="_top"><img src="images/logo.jpg" width="100" height="100"></a>

EDIT/CLEANER SOLUTION: Okay, I just found this official Adobe documentation so it seems an external JavaScript call can be done. Specifically refer to "Using Links to open tabs". So you can do this:

<a href="#" onclick="TabbedPanels1.showPanel(0); return false;"><img src="images/logo.jpg" width="100" height="100"></a>

Or do this:

<a href="#" onclick="TabbedPanels6.showPanel('first'); return false;"><img src="images/logo.jpg" width="100" height="100"></a>

But I find those recommended ways of adding an <a href> tag clunky so I would try these instead. The image itself can be clicked without additional code but just a simple JavaScript onclick event:

<img src="images/logo.jpg" width="100" height="100" onclick="TabbedPanels1.showPanel(0); return false;">

<img src="images/logo.jpg" width="100" height="100" onclick="TabbedPanels6.showPanel('first'); return false;">

Hope this helps!