Difference between revisions of "List page map overlapping template header"

From JReviews Documentation
Jump to: navigation, search
 
Line 7: Line 7:
 
Find this line in the file:
 
Find this line in the file:
 
<source lang="php">
 
<source lang="php">
var y = jQuery(window).scrollTop();
+
var y = $(this).scrollTop()
 
</source>
 
</source>
  
 
and add the height of your fixed header like this:
 
and add the height of your fixed header like this:
 
<source lang="php">
 
<source lang="php">
var y = jQuery(window).scrollTop()+55;
+
var y = $(this).scrollTop()+55;
 
</source>
 
</source>
 +
  
 
If you enabled '''Load All Minified''' in JReviews Configuration, you will need to create a minified geomaps-ck.js file as well.
 
If you enabled '''Load All Minified''' in JReviews Configuration, you will need to create a minified geomaps-ck.js file as well.
  
 
Besides the change in the geomaps.js file, it is necessary to set the height like this in the custom_styles.css file of your JReviews theme:
 
Besides the change in the geomaps.js file, it is necessary to set the height like this in the custom_styles.css file of your JReviews theme:
 
 
<source lang="css">
 
<source lang="css">
#gm_map_wrapper.fixed {
+
.jrMapResultsWrapper.fixed {
     top: 55px;
+
     top: 55px !important;
 
}
 
}
 
</source>
 
</source>

Latest revision as of 07:35, 2 May 2014

If your Joomla template uses a fixed header/menu, it is possible that the map on JReviews list pages will overlap the header when scrolling the page.

To fix the conflict, it is necessary to push down the map by the height of the header. To do that, modify this file:

  • /components/com_jreviews_addons/geomaps/views/js/geomaps.js

Find this line in the file:

var y = $(this).scrollTop()

and add the height of your fixed header like this:

var y = $(this).scrollTop()+55;


If you enabled Load All Minified in JReviews Configuration, you will need to create a minified geomaps-ck.js file as well.

Besides the change in the geomaps.js file, it is necessary to set the height like this in the custom_styles.css file of your JReviews theme:

.jrMapResultsWrapper.fixed {
    top: 55px !important;
}

In these examples, 55 represents the height of the header/menu.