UniversalViewer inside a tab


#1

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>