|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| − | Read the article about [[Adding tabs to listing detail page]]. | + | Read the article about [[Adding jQuery UI tabs to listing detail page]]. The included _tabs suffixed detail theme file already displays the map inside a tab. |
| − | | + | |
| − | To show the map inside a tab move the code that outputs the Map in the detail.thtml theme file into one of the tabs.
| + | |
| − | | + | |
| − | <source lang="php">
| + | |
| − | <!-- BEGIN MAP -->
| + | |
| − | <?php if(isset($listing['Geomaps']) && $listing['Geomaps']['lat']!='' && $listing['Geomaps']['lon']!=''):?>
| + | |
| − | <div class="clear"></div>
| + | |
| − | <?php echo $this->renderControllerView('geomaps','map_detail',array('width'=>'100%','height'=>'300'));?>
| + | |
| − | <?php endif;?>
| + | |
| − | <!-- END MAP -->
| + | |
| − | </source>
| + | |
| − | | + | |
| − | There is an issue when the Map is loaded in a hidden tab and a portion of the map is rendered in grey. To fix this you can modify the code used in assets.php like this:
| + | |
| − | | + | |
| − | | + | |
| − | <source lang="php">
| + | |
| − | <script type="text/javascript">
| + | |
| − | jQuery(document).ready(function()
| + | |
| − | {
| + | |
| − | jreviews.lightbox();
| + | |
| − | <?php if($addReviewCheck): // Init tooltips for reviews ?>
| + | |
| − | jreviews.tooltip();
| + | |
| − | <?php endif;?>
| + | |
| − | <?php if($addReviewCheck && $datePickerCheck): // Init datepicker for review fields?>
| + | |
| − | jreviews.datepicker();
| + | |
| − | <?php endif;?>
| + | |
| − | // Add lines below
| + | |
| − | jQuery("#jr_tabs").tabs().bind('tabsshow', function(event, ui) {
| + | |
| − | if (ui.panel.id == "map") {
| + | |
| − | /*"map" is the id of the div used for the map tab*/
| + | |
| − | var jrMap = GeomapsDetail.getMap();
| + | |
| − | jrMap.checkResize();
| + | |
| − | GeomapsDetail.centerAndZoomOnBounds(); // Re-center marker
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | </source>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| | | | |
| | | | |
Latest revision as of 09:57, 15 December 2013
Read the article about Adding jQuery UI tabs to listing detail page. The included _tabs suffixed detail theme file already displays the map inside a tab.