I use UniversalViewer inside a tab. You can see how with the code below (from my /item/show.phtml).
When the page is loaded, it shows the first tab (which is not universalviewer), but universalviewer adds anyway something to the url (for example : #?cv=&c=&m=&s=&xywh=-221%2C-1%2C1240%2C1240). This code inside the url has the side effect to prevent the viewer to be launched properly when clicking on the tab corresponding to UniversalViewer.
If I click to the UV tab quickly, before the generation of the UV url code, I can see my document inside the viewer. If I wait, the url code is set and the viewer does not work.
How to prevent the generation of UV url code when the page/tab are no showing UV?
<div class="tabbed">
<!-- Premier onglet -->
<input name="tabbed" id="tabbed1" type="radio" checked>
<section>
<h1>
<label for="tabbed1">Transcription</label>
</h1>
<div>
blabla
</div>
</section>
<!-- Second onglet -->
<input name="tabbed" id="tabbed2" type="radio">
<section>
<h1>
<label for="tabbed2">Métadonnées</label>
</h1>
<div>
<?php echo $item->displayValues(); ?>
</div>
</section>
<!-- Troisième onglet -->
<input name="tabbed" id="tabbed3" type="radio">
<section>
<h1>
<label for="tabbed3">Scan</label>
</h1>
<?php echo $this->universalViewer($item);?>
</section>
</div>
<style>
.tabbed{
float : left;
width : 100%;
}
.tabbed > input{
display : none;
}
.tabbed > section > h1{
float : left;
box-sizing : border-box;
margin : 0;
padding : 0.5em 0.5em 0;
overflow : hidden;
font-size : 1em;
font-weight : normal;
}
.tabbed > input:first-child + section > h1{
padding-left : 1em;
}
.tabbed > section > h1 > label{
display : block;
padding : 0.25em 0.75em;
border : 1px solid #ddd;
border-bottom : none;
border-top-left-radius : 4px;
border-top-right-radius : 4px;
box-shadow : 0 0 0.5em rgba(0,0,0,0.0625);
background : #fff;
cursor : pointer;
-moz-user-select : none;
-ms-user-select : none;
-webkit-user-select : none;
}
.tabbed > section > div{
position : relative;
z-index : 1;
float : right;
box-sizing : border-box;
width : 100%;
margin : 3.5em 0 0 -100%;
padding : 0.5em 0.75em;
border : 1px solid #ddd;
border-radius : 4px;
box-shadow : 0 0 0.5em rgba(0,0,0,0.0625);
background : #fff;
}
.tabbed > input:checked + section > h1{
position : relative;
z-index : 2;
}
.tabbed > input:not(:checked) + section > div{
display : none;
}
</style>