Menu icon Foundation
Deep-Linking Performance Issues

Hello,
I have a page that has tabs that deep link to tabs within a modal. With deep-linking, the modal and tabs run excruciatingly slow and the modal is positioned incorrectly. However, when I turn off deep-linking, everything runs smoothly.
Any ideas as to how I can get the deep-linking functionality to cooperate?

Thanks!

<!--Links to Primary Modal-->
<ul class="tabs" data-tab data-options="deep_linking:true">
    <li class="tab-title"><a href="#panel<?php echo $i; ?>-1" data-reveal-id="modal<?php echo $i; ?>-1">Overview</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-2" data-reveal-id="modal<?php echo $i; ?>-1">Local Map</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-3" data-reveal-id="modal<?php echo $i; ?>-1">Reviews</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-4" data-reveal-id="modal<?php echo $i; ?>-1">Video Tour</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-5" data-reveal-id="modal<?php echo $i; ?>-1">Photos</a></li>
</ul>

<!-- Primary Modal Content -->
<div id="modal<?php echo $i; ?>-1" class="reveal-modal" data-reveal>
	<a class="close-reveal-modal">&#215;</a>

	<div class="thumb">
	  <img src="http://placehold.it/250x175&text=Photo" />
	</div><!-- .thumb -->

	<div class="details">
	  
	</div><!-- .details -->

	<!-- Tabs inside of Modal -->
	<ul class="tabs" data-tab data-options="deep_linking:true">
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-1">Overview</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-2">Local Map</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-3">Reviews</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-4">Video Tour</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-5">Photos</a></li>
	</ul>

	<!-- Content for Tabs inside of Modal -->
	<div class="tabs-content">
	  <div class="content" id="panel<?php echo $i; ?>-1">
	    <p>Lorem ipsum </p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-2">
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-3">
	    <p>Third panel content goes here...</p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-4">
	    <p>Fourth panel content goes here...</p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-5">
	    <p>Photos go here</p>
	  </div><!-- .content -->
	</div><!-- .tabs-content -->

</div><!-- #modal -->

            

         

deepdeep-linkDeep-linkingmodaltabtabsslowperformanceissues

Hello,
I have a page that has tabs that deep link to tabs within a modal. With deep-linking, the modal and tabs run excruciatingly slow and the modal is positioned incorrectly. However, when I turn off deep-linking, everything runs smoothly.
Any ideas as to how I can get the deep-linking functionality to cooperate?

Thanks!

<!--Links to Primary Modal-->
<ul class="tabs" data-tab data-options="deep_linking:true">
    <li class="tab-title"><a href="#panel<?php echo $i; ?>-1" data-reveal-id="modal<?php echo $i; ?>-1">Overview</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-2" data-reveal-id="modal<?php echo $i; ?>-1">Local Map</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-3" data-reveal-id="modal<?php echo $i; ?>-1">Reviews</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-4" data-reveal-id="modal<?php echo $i; ?>-1">Video Tour</a></li>
	<li class="tab-title"><a href="#panel<?php echo $i; ?>-5" data-reveal-id="modal<?php echo $i; ?>-1">Photos</a></li>
</ul>

<!-- Primary Modal Content -->
<div id="modal<?php echo $i; ?>-1" class="reveal-modal" data-reveal>
	<a class="close-reveal-modal">&#215;</a>

	<div class="thumb">
	  <img src="http://placehold.it/250x175&text=Photo" />
	</div><!-- .thumb -->

	<div class="details">
	  
	</div><!-- .details -->

	<!-- Tabs inside of Modal -->
	<ul class="tabs" data-tab data-options="deep_linking:true">
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-1">Overview</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-2">Local Map</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-3">Reviews</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-4">Video Tour</a></li>
	  <li class="tab-title"><a href="#panel<?php echo $i; ?>-5">Photos</a></li>
	</ul>

	<!-- Content for Tabs inside of Modal -->
	<div class="tabs-content">
	  <div class="content" id="panel<?php echo $i; ?>-1">
	    <p>Lorem ipsum </p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-2">
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-3">
	    <p>Third panel content goes here...</p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-4">
	    <p>Fourth panel content goes here...</p>
	  </div><!-- .content -->
	  <div class="content" id="panel<?php echo $i; ?>-5">
	    <p>Photos go here</p>
	  </div><!-- .content -->
	</div><!-- .tabs-content -->

</div><!-- #modal -->

            

         
Karl Ward about 5 years ago

Got a live link or codepen?

It is tremendously difficult to diagnose posts like this regarding "deep-linking & performance" with just some pasted code including php. Deep-linking is essentially just a feature that sets active tab on page load, and I can't guess how it affects performance without a link to diagnose ...