Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • May 26, 2016 at 1:11 pm #638681
    kopf-und-stift

    hello,

    i have a content slider onthe mention page. I want to the entries in the slider to be the same height and the button in the slide entry to be at the bottom. How to achieve that°?

    thanks

    May 27, 2016 at 8:02 am #639139
    Ismael

    Hey kopf-und-stift,

    Thank you for using Enfold.

    Please add this in the functions.php file:

    // apply height
add_action('wp_footer', 'ava_auto_height');
function ava_auto_height(){
?>
<script>
(function($){
	function c() {
		   if( $.avia_utilities.isMobile ) return;

		   $('.slide-entry').css('height', '');

		   var elementHeights = $('.slide-entry').map(function() {
			 return $(this).height();
		   }).get();

		   var maxHeight = Math.max.apply(null, elementHeights);

		   $('.slide-entry').height(maxHeight);
	}

	$(window).on('resize', function() {
	  	c();
	}).resize();
})(jQuery);
</script>
<?php
}

    And the following code in the Quick CSS field:

    .slide-entry-excerpt .avia-button-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;    
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

    Best regards,
    Ismael

    May 28, 2016 at 12:53 pm #639754
    kopf-und-stift

    hello ismael,

    thanks 4 reply. but the first code snippet is php so inserting this snippet in the css field will not help. In which php file i have to put the first code snippet?
    thanks!

    May 28, 2016 at 9:30 pm #639846
    Basilis

    Hi!

    Yes, the snippet field has to be added to the functions.php file.
    Please do add it there.

    Thanks a lot for your understanding

    Cheers!
    Basilis

    May 29, 2016 at 10:11 am #639927
    kopf-und-stift

    thanks 4 help! sorry but the content slider only gets the same height when i resize the window?! but it should be same height when i go on the site.
    and sometimes (when the text is too long) the button is in the text. can you plz check that?
    thanks!

    May 30, 2016 at 5:25 am #640100
    Ismael

    Hi!

    thanks 4 reply. but the first code snippet is php so inserting this snippet in the css field will not help. In which php file i have to put the first code snippet?

    I’m sorry. I meant functions.php file. We modified the code above. Please test it again.

    Cheers!
    Ismael

    May 30, 2016 at 10:35 pm #640618
    kopf-und-stift

    hey sorry but the code is only working on resize. maybe this line is wrong:
    $(window).on(‘resize’, function()
    also the button is overlayed in the text

    May 31, 2016 at 8:35 am #640741
    Ismael

    Hi!

    Alright. What is the username? You forgot to include it in the login details above.

    Best regards,
    Ismael

    May 31, 2016 at 4:22 pm #640965
    kopf-und-stift

    here you got it :)

    June 1, 2016 at 1:27 pm #641464
    Andy

    Hi,

    what is the username please?

    Best regards,
    Andy

    January 21, 2018 at 1:18 pm #900348
    betaphase

    Ismael’s code works great, but only after you change one line in the Javascript:

    Change:
    return $(this).height();
    to:
    return $(this).outerHeight();

    January 22, 2018 at 6:35 am #900633
    Rikard

    Hi betaphase,

    Thanks for the feedback, much appreciated :-)

    Best regards,
    Rikard

    April 5, 2021 at 8:58 pm #1292604
    mattmanforever

    This still only adjusts to equal height on resize, even with this change:

    Change:
    return $(this).height();
    to:
    return $(this).outerHeight();

    Also, the code provided adjusts the height on ALL sliders… so if you have any other sliders (like Blog Posts) on the page, their height gets adjusted too and it looks ridiculous. How do we get equal height on JUST the content slider?

    April 5, 2021 at 10:38 pm #1292617
    mattmanforever

    I fixed this on my own by modifying the code:

    // apply height
add_action('wp_footer', 'ava_auto_height');
function ava_auto_height(){
?>
<script>
(function($){
	function c() {
		   if( $.avia_utilities.isMobile ) return;

		   $('#ColorSectionID .slide-entry').css('height', '');

		   var elementHeights = $('#ColorSectionID .slide-entry').map(function() {
			 return $(this).outerHeight();
		   }).get();

		   var maxHeight = Math.max.apply(null, elementHeights);

		   $('#ColorSectionID .slide-entry').height(maxHeight);
	}

	$(window).on('load', function() {
	  	c();
	}).load();
})(jQuery);
</script>
<?php
}

    Add an ID to the color section your Content Slider is in, replace “#ColorSectionID” in the code above with your ID, and this functionality will only apply to the content slider. I also replaced “resize” with “load” and that seemed to do the trick.

    April 7, 2021 at 3:10 am #1292956
    Ismael

    Hi,

    Great! Glad to know that you have found working solution. Please feel free to open a new thread if you need anything else.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Content Slider same height and button on the bottom’ is closed to new replies.