Difference between revisions of "List page map overlapping template header"
From JReviews Documentation
| (One intermediate revision by one other user not shown) | |||
| Line 3: | Line 3: | ||
To fix the conflict, it is necessary to push down the map by the height of the header. | To fix the conflict, it is necessary to push down the map by the height of the header. | ||
To do that, modify this file: | To do that, modify this file: | ||
| − | *<span style="color: blue">/com_jreviews_addons/geomaps/views/ | + | *<span style="color: blue">/components/com_jreviews_addons/geomaps/views/js/geomaps.js</span> |
| − | + | ||
| − | + | ||
Find this line in the file: | Find this line in the file: | ||
<source lang="php"> | <source lang="php"> | ||
| − | var y = | + | 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 = | + | 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. | |
| + | |||
| + | 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"> | ||
| − | + | .jrMapResultsWrapper.fixed { | |
| − | top: 55px; | + | top: 55px !important; |
} | } | ||
</source> | </source> | ||
| − | |||
In these examples, 55 represents the height of the header/menu. | In these examples, 55 represents the height of the header/menu. | ||
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.