Tell us what you are trying to do?
I have sliders which display a variable amount of text. This causes the content below it to jump up and down the page, depending on which slide is displayed. In Drupal, I can set the slider to dynamically check the height of the tallest slide and then display all slides at the same height.
Is there a jquery way of doing this?
You can see an example here:
hidden link
In this example, I've made the pagination dots display vertically using css, but this is not an essential feature and I'm looking for a generic solution to the slider height problem.
Hi Michael,
Thank you for contacting us and I'd be happy to assist.
Since the contents of the next slides are dynamically loaded through AJAX, detection, and manipulation of height through jQuery/script becomes challenging and it can also negatively affect the performance/page loading.
A simple workaround for avoiding the jump of content below the slider can be to use some custom CSS, to apply a min-height value to the slider's wrapping container ( i.e div with ID "slide-container-mw").
Example:
/* for screens wider than 767px */
@media only screen and (min-width: 768px) {
#slide-container-mw {
min-height: 230px;
}
}
/* for screens narrower than 768px */
@media only screen and (max-width: 767px) {
#slide-container-mw {
min-height: 560px;
}
}
I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/
regards,
Waqar
Thank you Waqar. I agree this is the easiest solution.
