Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS /

[SOLVED] Testimonials Page Issues


Reply


2 Posts   541 Views

Avatar
helenclarko

Community Member, 25 Posts

18 February 2013 at 1:32pm

Edited: 25/02/2013 11:27am

Using Silverstripe 2.4.5

Hi All,

Let me ask the question first and explain whats going on after.

Is there a limit on the "content" amount for a page?

The reason I ask is because I seem to have reached a limit on my Testimonials page.
For example, Whenever I dropdown my list of Testimonials I can read about 19 separate Testimonials, but the 20th is cut-off half way.

Here are my Testimonial files...

TestimonialPage.ss

<div id="contentHolder">
   <% include SideBar %>
   
   <div id="content" class="typography">
      $Content
      
      <% if BigTestimonials %>
         <% control BigTestimonials.GroupedBy(Type) %>
            <div class="testimonialScrollWrap">
               <h3>$Type Testimonials</h3>
               <div class="testimonialGroupWrap">
                  <% control Children %>
                     <div class="eachtestimonial <% if Last %>last<% end_if %>">
                        <h5>$PersonsName</h5>
                        $Testimonial
                     </div>
                  <% end_control %>
               </div>
            </div>
            <hr />
         <% end_control %>
      <% end_if %>
   </div>
</div>

Javascript File

   //Function for the testimonials page
   if($('.testimonialScrollWrap').length > 0) {
      $('.testimonialGroupWrap').height(0);
      $('.testimonialScrollWrap h3').click(function(){
         var currentSlide = $(this).parent('.testimonialScrollWrap').children('.testimonialGroupWrap');
         var newHeight = 0;
         var countChild = 0;
         if($(currentSlide).hasClass('current')){
            $(currentSlide).removeClass('current');
            newHeight = 0;
         } else {
            $(currentSlide).addClass('current');
            $(currentSlide).children('.eachtestimonial').each(function(){
               newHeight += $(this).outerHeight();
               countChild++;
            });
            if(countChild > 3){newHeight += $(currentSlide).children('.last').outerHeight();}
         }
         if(!$(currentSlide).parent().hasClass('last')){
            $(currentSlide).stop().animate({height: newHeight}, 1500, 'easeInOutCubic');
         }
      });
   }

Any help would be much appreciated.

Thanks,
-helenclarko

Avatar
helenclarko

Community Member, 25 Posts

25 February 2013 at 11:27am

Edited: 07/03/2013 10:44am

Hi Again,

I believe the issue I am having is caused by the javascript file.
Its not calculating the length of my testimonials correctly, therefore it is unable to display all of them on the page.

I have a feeling it has something to do with the following line:

if(countChild > 3){newHeight += $(currentSlide).children('.last').outerHeight();}

Can anyone give me a hand with what would be a better way to calculate the total length of the testimonials?

Thanks again,
-helenclarko

EDIT: I managed to get the effect I was after by removing the Line I mentioned above and adding .outerHeight(true) onto the first calculation in the javascript file.

Example:

if($('.testimonialScrollWrap').length > 0) {
      $('.testimonialGroupWrap').height(0);
      $('.testimonialScrollWrap h3').click(function(){
         var currentSlide = $(this).parent('.testimonialScrollWrap').children('.testimonialGroupWrap');
         var newHeight = 0;
         var countChild = 0;
         if($(currentSlide).hasClass('current')){
            $(currentSlide).removeClass('current');
            newHeight = 0;
         } else {
            $(currentSlide).addClass('current');
            $(currentSlide).children('.eachtestimonial').each(function(){
               newHeight += $(this).outerHeight(true);
               countChild++;
            });
            
         }
         if(!$(currentSlide).parent().hasClass('last')){
            $(currentSlide).stop().animate({height: newHeight}, 1500, 'easeInOutCubic');
         }
      });
   }